Gaussian circle

by sosegon

HTML

<div id='container'>

</div>

JavaScript

import { SvJs, Gen } 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" })

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

const linesGroup = svg.create('g').set( {
	x: 0,
  y: 0,
  width: 900,
  height: 900,
  fill: '#f0f0f0'
})

for (let i = 0; i < 2000; i++) {
  let hue = Gen.random(100, 120, false)
  let rect = linesGroup.create("line").set({
    x1: 0,
    x2: 15,
    y1: 0,
    y2: 15,
    stroke: `hsl(${hue} 80% 80% / 0.33)`,
  })

  rect.moveTo(Gen.gaussian(500, 150, false), Gen.gaussian(500, 150, false))
  rect.rotate(Gen.random(0, 360, false))
}

const circlesGroup = svg.create('g').set({
	x: 0,
  y: 0,
  width: 900,
  height: 900,
  fill: '#f0f0f0'
})

for (let i = 0; i < 10; i += 1) {
  circlesGroup.create("circle").set({
    cx: 500,
    cy: 500,
    r: 25 + i * 25,
    fill: "none",
    stroke: `hsl(0 0% 0% / ${0.25 - i / 50})`,
    stroke_width: 15,
  })
}

const gradient = svg.createGradient('radialGrad', 'radial', ['#fff', '#ffffff60'])

const mask = svg.create("mask").set({ id: "mask" })
mask.create("circle").set({
  cx: 500,
  cy: 500,
  r: 325,
  fill: "url(#radialGrad)",
})

linesGroup.set({
	mask: 'url(#mask)'
})

circlesGroup.set({
	mask: 'url(#mask)'
})