∞ 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 motionmobile-ready

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 →
1

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.