fig. 01 pen ggYzGO
Rainbow Rain
Two-pixel sparks in random colours drift down and to the left, fading over 200 frames behind a translucent black wash.
original “🌈 Rainy background” codepen.io/izmaelmag/pen/ggYzGO ↗
● running
§1 About
A background piece: one canvas, one array of sparks. Every spark is born somewhere in a field 200 px larger than the screen, picks a random acceleration between 5 and 40 and a random colour from the whole RGB cube, then slides along the same (−0.5, 1) direction until its opacity runs out.
There is no clearing. Each frame lays a 10% black rectangle over the last one, so faster sparks smear into short streaks while slow ones just flicker in place — the rain comes from the wash, not from the particles.
§2 Maths
- spawn
x ∈ [−200, W + 200], y ∈ [−200, H + 200]- acceleration
a = rand(5, 40)- drift / frame
Δ = 0.05 · (−0.5, 1) · a / 2 → up to (−0.5, 1) px- decay
opacity = 1 − age / 200- colour
rgb(rand(0, 255), rand(0, 255), rand(0, 255))- trail
fill rgba(0, 0, 0, 0.1) every frame → 0.9ⁿ
§3 Adaptation
- Sparks spawn per frame from the stage area instead of a 0.2 ms setInterval (which browsers clamp to ~4 ms), keeping the original density on phones and in previews; the 5 000 cap still applies.
- The stylesheet’s .aim reticle — a 45° square with #77f crosshairs — follows the pointer here. The recovered pen markup never rendered it.
- Dead sparks are compacted in place; the original spliced inside forEach and skipped a neighbour on every removal.
- Reduced motion: the field is settled for one lifetime and drawn once, each spark with the 0.9ⁿ trail the wash would have left.