JSFiddle - React, Tailwind, and code Playground

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({
  width: svgSize,
  height: svgSize,
  viewBox: "0 0 1000 1000",
})

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

let circles = svg.create("g")
let nCircles = 100
let hue = Gen.random(0, 360)
let rx = Gen.random(5, 350)
let ry = Gen.random(5, 350)

for (let i = 0; i < nCircles; i++) {
  circles.create("path").set({
    stroke: `hsl(${hue} 80% 80% / .9)`,
    stroke_width: 1,
    fill: "none",
    d: `M 0 0 A ${rx} ${ry} ${Gen.random(0, 360)} ${Gen.chance() ? 1 : 0} 1 600 0`,
  })
  
  circles.create("path").set({
    stroke: `hsl(${hue + 60} 80% 80% / .9)`,
    stroke_width: 1,
    fill: "none",
    d: `M 0 0 A ${rx} ${ry} ${Gen.random(0, 360)} ${Gen.chance() ? 1 : 0} 0 600 0`,
  })

  hue = (hue % 360) + 0.5
}

circles.moveTo(Gen.random(500, 600), Gen.random(500, 600))
circles.rotate(Gen.random(0, 360))