archive codepen.io/izmaelmag ↗

CodePen
archive

Five pens from before this site, rebuilt from their original JavaScript and CSS. Same geometry, same frame timing, same odd constants — now sized to the screen, pausable and quiet when out of view.

○ previews still
  1. 01 ggYzGO

    Rainbow Rain

    “🌈 Rainy background”

    Two-pixel sparks in random colours drift down and to the left, fading over 200 frames behind a translucent black wash.

    Δ = 0.05 · (−0.5, 1) · a / 2, opacity = 1 − age / 200

  2. 02 MbyXXL

    Orbit Geometry

    “HTML5 canvas geometry animation”

    Three points ride a circle; each carries a satellite turning seven times faster, dotting its path onto a second canvas.

    R2 = R1 / 2π · COUNT, φᵢ = θᵢ + θᵢ · COUNT · 2

  3. 03 yVOqGe

    Trippy Geometry

    “HTML5 canvas: trippy geometry animation”

    The same orbit machine with every constant rolled at load: point count, radii, speed, stroke and trail wash.

    COUNT = ⌊rand(2, 12)⌋, R2 = R1 / (π · rand(1, 4)) · COUNT

  4. 04 YWdjXr

    Triangled

    “Triangled”

    Two counter-rotating equilateral triangles with breathing radii; every vertex of one is tied to every vertex of the other.

    r1 = 100 · sin θ + 500, r2 = 100 · sin(θ + 90) + 200

  5. 05 oNNzGvv

    Waving Rainbow Text

    “Waving rainbow text”

    Each letter’s font size rides a sine wave shifted −1.5 per letter while the hue sweeps across the word and glows.

    px = sin(φ + t / 360 + i / −1.5) · 40 + 120