Bezier Slinky

by sosegon

HTML

<div id='container'>

</div>

JavaScript

import { SvJs, Gen, Noise } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"

// Parent SVG.
const svg = new SvJs().addTo(document.getElementById("container"))

// Viewport and viewBox (1:1 aspect ratio).
const svgSize = Math.min(window.innerWidth, window.innerHeight)
svg.set({ width: svgSize, height: svgSize, viewBox: "0 0 1000 1000" })

svg.create("style").content(`
	#slinky path {
  	fill: none;
    stroke-width: 0.75;
    stroke-linecap: round;
  }
`)

svg.create("rect").set({
  x: 0,
  y: 0,
  width: 1000,
  height: 1000,
  fill: "#080808",
})

let hue = Gen.random(0, 180)

let slinky = svg.create("g").set({ id: "slinky" })

for (let i = 0; i < 500; i += 5) {
  let cpx = 0
  if (i % 2 === 0) {
    cpx = Gen.random(-100, 0)
  } else {
    cpx = Gen.random(600, 700)
  }
  // cpx = 300
  let cpy = i - 400

  slinky.create("path").set({
    stroke: `hsl(${hue} 90% 80% / 0.85)`,
    d: `M 0 ${i} q ${cpx} ${cpy} 600 0`,
  })

  hue = (hue % 360) + 1.5
}

slinky.moveTo(500, 500)

document.addEventListener("keydown", (event) => {
  let key = event.key.toLowerCase()
  if (key === "s") svg.save()
})