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.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: "#181818",
})
svg.create("circle").set({
  cx: 500,
  cy: 500,
  r: Gen.random(250, 350),
  fill: "#000",
  filter: "url(#cosmic)",
})

let filter = svg.createFilter("cosmic")
filter.create("feTurbulence").set({
  type: "fractalNoise",
  baseFrequency: Gen.random(0.002, 0.006, true),
  seed: Gen.random(0, 10000),
  numOctaves: 4,
  stitchTiles: "stitch",
  result: "turbulence",
})
filter.create("feGaussianBlur").set({
  stdDeviation: Gen.random(10, 25),
  in: "SourceGraphic",
  result: "blurred",
})
filter.create("feDisplacementMap").set({
  in: "turbulence",
  in2: "blurred",
  scale: Gen.random(250, 500),
  result: "distortion",
})
filter.create('feComposite').set({
  in: 'distortion',
  in2: 'blurred',
  operator: 'atop'
});