HTML + CSSBackgrounds
Dot grid wave
A grid of dots where each one lights up as a ripple travels outward from the center.
Settings
1x
1x
1
Code
<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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
A dot grid wave feels technical but friendly, so it fits the hero of a developer tool, the landing page of an analytics product or a “coming soon” page before a hardware launch. The ripple always starts in the middle and pulls the eye to whatever sits there. It’s an animated dot pattern background built with CSS only.
Put your logo or headline right in the center and let the wave do the framing. If the dots feel too busy on a large monitor, lower the density or the opacity before you start changing colors.