Cubic Bezier

by sosegon

HTML

<div id='container'>

</div>

JavaScript

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

const svg = new SvJs().addTo(document.getElementById("container"))
const svgSize = Math.min(window.innerWidth, window.innerHeight)
svg.set({
  x: 0,
  y: 0,
  width: svgSize,
  height: svgSize,
  viewBox: "0 0 1000 1000",
})

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

let noise = new Noise()
let n = Gen.random(0, 1000)
let speed = 0.05
let amplifier = Gen.random(200, 500)

let curves = svg.create("g")
let numCurves = Gen.random(75, 125)
let hue = Gen.random(0, 360)

for (let i = 0; i < numCurves; i++) {
  let noiseValue = noise.get(n)
  noiseValue = Gen.map(noiseValue, -1, 1, -amplifier, amplifier, false)

  let mx = 0,
    my = 0 + i * 5

  let cpx1 = 0 + noiseValue,
    cpy1 = -100,
    cpx2 = 250 + noiseValue,
    cpy2 = -100,
    x2 = 300,
    y2 = 0,
    spx = 350 + noiseValue,
    spy = 100,
    x3 = 300,
    y3 = -50
    
  curves.create('path').set({
  	fill: 'none',
    stroke: `hsl(${hue} 80% 80% / .8)`,
    d: `
    	M ${[mx, my]}
      c ${[cpx1, cpy1, cpx2, cpy2, x2, y2]}
      s ${[spx, spy, x3, y3]}
    `
  })
  
  n += speed
  hue = (hue % 360) + (noiseValue / 25)
}

curves.moveTo(500, 500)