Filters 1

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 filter = svg.createFilter("blur")
filter.create("feGaussianBlur").set({ stdDeviation: "10 0" })
filter.set({
  x: "0",
  y: "0",
  width: "100%",
  height: "100%",
})

let filter2 = svg.createFilter("shadow")
filter2.create("feDropShadow").set({ dx: 0, dy: 50, stdDeviation: 25 })

let filter3 = svg.createFilter("colourise")
filter3.create("feColorMatrix").set({
  type: "saturate",
  values: 0,
  result: "desaturate",
})
filter3.create("feFlood").set({
  flood_color: "#7F462C",
  result: "flood",
})
let blendModes = [
  "screen",
  "overlay",
  "lighten",
  "color-dodge",
  "soft-light",
  "color",
]
filter3.create("feBlend").set({
  mode: Gen.random(blendModes),
  in: "flood",
  in2: "desaturate",
  result: "blend",
})
filter3.create("feComposite").set({
  in: "blend",
  in2: "SourceGraphic",
  operator: "atop",
})
let filter4 = svg.createFilter("displacement")
filter4.create("feTurbulence").set({
  baseFrequency: 0.005,
  numOctaves: 3,
  stitchTiles: "noStitch",
  type: "fractalNoise",
  result:'noise'
})
filter4.create('feDisplacementMap').set({
	in2: 'noise',
  in: 'SourceGraphic',
  scale: 100,
  xChannelSelector: 'G',
  yChannelSelector: 'B'
})

let circles = svg.create("g")
for (let i = 0; i < 10; i++) {
  let circle = circles.create("circle").set({
    r: i * 40,
    cx: 500,
    cy: 500,
    fill: "none",
    stroke: `rgb(${[Gen.random(0, 255), Gen.random(0, 255), Gen.random(0, 255)]})`,
    stroke_width: 20,
  })
}

circles.set({ filter: "url(#displacement)" })