HTML + CSSFondos
Rejilla de puntos en onda
Una rejilla de puntos que se iluminan uno a uno cuando les llega la onda que sale del centro.
Ajustes
1x
1x
1
Código
<div class="pt-dots"><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.5"></i><i style="--r:9.5"></i><i style="--r:8.5"></i><i style="--r:7.5"></i><i style="--r:6.5"></i><i style="--r:5.5"></i><i style="--r:4.5"></i><i style="--r:3.5"></i><i style="--r:2.5"></i><i style="--r:1.6"></i><i style="--r:0.7"></i><i style="--r:0.7"></i><i style="--r:1.6"></i><i style="--r:2.5"></i><i style="--r:3.5"></i><i style="--r:4.5"></i><i style="--r:5.5"></i><i style="--r:6.5"></i><i style="--r:7.5"></i><i style="--r:8.5"></i><i style="--r:9.5"></i><i style="--r:10.5"></i><i style="--r:10.6"></i><i style="--r:9.6"></i><i style="--r:8.6"></i><i style="--r:7.6"></i><i style="--r:6.7"></i><i style="--r:5.7"></i><i style="--r:4.7"></i><i style="--r:3.8"></i><i style="--r:2.9"></i><i style="--r:2.1"></i><i style="--r:1.6"></i><i style="--r:1.6"></i><i style="--r:2.1"></i><i style="--r:2.9"></i><i style="--r:3.8"></i><i style="--r:4.7"></i><i style="--r:5.7"></i><i style="--r:6.7"></i><i style="--r:7.6"></i><i style="--r:8.6"></i><i style="--r:9.6"></i><i style="--r:10.6"></i><i style="--r:10.8"></i><i style="--r:9.8"></i><i style="--r:8.9"></i><i style="--r:7.9"></i><i style="--r:7.0"></i><i style="--r:6.0"></i><i style="--r:5.1"></i><i style="--r:4.3"></i><i style="--r:3.5"></i><i style="--r:2.9"></i><i style="--r:2.5"></i><i style="--r:2.5"></i><i style="--r:2.9"></i><i style="--r:3.5"></i><i style="--r:4.3"></i><i style="--r:5.1"></i><i style="--r:6.0"></i><i style="--r:7.0"></i><i style="--r:7.9"></i><i style="--r:8.9"></i><i style="--r:9.8"></i><i style="--r:10.8"></i><i style="--r:11.1"></i><i style="--r:10.1"></i><i style="--r:9.2"></i><i style="--r:8.3"></i><i style="--r:7.4"></i><i style="--r:6.5"></i><i style="--r:5.7"></i><i style="--r:4.9"></i><i style="--r:4.3"></i><i style="--r:3.8"></i><i style="--r:3.5"></i><i style="--r:3.5"></i><i style="--r:3.8"></i><i style="--r:4.3"></i><i style="--r:4.9"></i><i style="--r:5.7"></i><i style="--r:6.5"></i><i style="--r:7.4"></i><i style="--r:8.3"></i><i style="--r:9.2"></i><i style="--r:10.1"></i><i style="--r:11.1"></i><i style="--r:11.4"></i><i style="--r:10.5"></i><i style="--r:9.6"></i><i style="--r:8.7"></i><i style="--r:7.9"></i><i style="--r:7.1"></i><i style="--r:6.4"></i><i style="--r:5.7"></i><i style="--r:5.1"></i><i style="--r:4.7"></i><i style="--r:4.5"></i><i style="--r:4.5"></i><i style="--r:4.7"></i><i style="--r:5.1"></i><i style="--r:5.7"></i><i style="--r:6.4"></i><i style="--r:7.1"></i><i style="--r:7.9"></i><i style="--r:8.7"></i><i style="--r:9.6"></i><i style="--r:10.5"></i><i style="--r:11.4"></i><i style="--r:11.9"></i><i style="--r:11.0"></i><i style="--r:10.1"></i><i style="--r:9.3"></i><i style="--r:8.5"></i><i style="--r:7.8"></i><i style="--r:7.1"></i><i style="--r:6.5"></i><i style="--r:6.0"></i><i style="--r:5.7"></i><i style="--r:5.5"></i><i style="--r:5.5"></i><i style="--r:5.7"></i><i style="--r:6.0"></i><i style="--r:6.5"></i><i style="--r:7.1"></i><i style="--r:7.8"></i><i style="--r:8.5"></i><i style="--r:9.3"></i><i style="--r:10.1"></i><i style="--r:11.0"></i><i style="--r:11.9"></i><i style="--r:12.3"></i><i style="--r:11.5"></i><i style="--r:10.7"></i><i style="--r:9.9"></i><i style="--r:9.2"></i><i style="--r:8.5"></i><i style="--r:7.9"></i><i style="--r:7.4"></i><i style="--r:7.0"></i><i style="--r:6.7"></i><i style="--r:6.5"></i><i style="--r:6.5"></i><i style="--r:6.7"></i><i style="--r:7.0"></i><i style="--r:7.4"></i><i style="--r:7.9"></i><i style="--r:8.5"></i><i style="--r:9.2"></i><i style="--r:9.9"></i><i style="--r:10.7"></i><i style="--r:11.5"></i><i style="--r:12.3"></i></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Fondos
Dónde usarlo
Una rejilla de puntos con onda tiene un aire técnico pero amable, por eso encaja en el hero de una herramienta para desarrolladores, en la landing de un producto de analítica o en una página de «próximamente». La onda siempre nace en el centro y lleva la mirada justo ahí. Un fondo de puntos animado, solo con CSS.
Coloca tu logo o el titular en el centro y deja que la onda haga de marco. Si en una pantalla grande se ve demasiado cargado, baja la densidad o la opacidad antes de ponerte a cambiar los colores.