∞ forever components

Memphis 80s

Noodle Loop

Five thick snaking SVG noodles in Memphis colors travel via stroke-dashoffset on a dark violet field; corner dots pulse and confetti spins.

svgmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Memphis or retro 80s hero backgrounds, screensavers, or decorative section breaks where looping ambient motion fits the brand.

When not to

Light-background layouts (background hardcoded dark violet). Content-heavy contexts where thick animated strokes compete with readable text.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the teal noodle to hot orange (#ff6b00) by updating --mp07-teal, and slow its travel by setting --mp07-dur to 10s on the fourth path element. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • noodle colors (CSS vars --mp07-teal, --mp07-pink, --mp07-yellow, --mp07-violet, --mp07-coral)
  • travel speed per noodle (--mp07-dur on each path)
  • stroke width (stroke-width 13 on the noodle group)
  • dot pulse scale (1.35 in mp07-pulse keyframe)
  • confetti spin duration (--mp07-sd per element)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper with setMotion() reduced-motion guard
  • visibilitychange pause handler
  • coral noodle stroke-width:0 markup guard (promoted in JS only when motion allowed)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • stroke-dashoffset is paint-layer — may stutter on low-end devices with all 5 noodles active
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Coral noodle invisible if JS disabled (stroke-width promoted from 0 only in JS)

memphissvgnoodlestroke-dashoffsetloopambient80s

More Memphis 80s components

  • Squiggle ParadeSix bold sine-wave ribbons with marching color beads drift across a confetti field of dots, zigzags, crosses, and terrazzo flecks on deep indigo.
  • Terrazzo Scatter96 colored terrazzo chips breathe apart from a tilted slab card and resettle in a 5.2s looping cycle, using a Memphis 80s palette on dark umber.
  • Zigzag Bounce7 stacked chevron bars in clashing Memphis colors spring upward with a staggered ripple phase; confetti speckles and squiggle accents frame the scene.
  • Confetti PopMemphis geometric shapes burst upward with gravity and rotation in repeating pops on deep plum. Dots, zigzags, triangles, bars, and pluses auto-cycle.
  • Polka ShuffleBrick-offset grid of dots, rings, and squares sways and breathes while colors cross-fade between three clashing Memphis 80s palettes on dark charcoal.
  • Grid Jumble5x5 grid of Memphis shapes — circles, triangles, squiggles, zigzags — jittering in sine-wave phases over a terrazzo-speckled dark background.