Cursor tracking

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.innerHeight, window.innerWidth)
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: "#000",
})

let hue = Gen.random(0, 360)
let rotation = Gen.random(0, 360)
let iterations = Gen.random(50, 100)

let ellipses = []

for (let i = 0; i < iterations; i++) {
  let ellipse = svg.create("ellipse")
  ellipse.set({
    cx: 500,
    cy: 500,
    rx: 100 + i * 3,
    ry: 100 + i * 5,
    fill: "none",
    stroke: `hsl(${hue} 80% 80% / 0.9)`,
    transform: `rotate(${rotation + (i*10)} 500 500)`
  })
  ellipses.push(ellipse)
  hue = (hue % 360) + 1.5
}

svg.trackCursor(() => {
  ellipses.forEach((e) => {
    e.set({ cx: svg.cursorX, cy: svg.cursorY })
  })
})