Paper texture

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.createGradient('parchment', 'linear', ['#fffbeb', '#fde68a'], 90)

let paper = svg.create('path').set({
	fill: 'url(#parchment)',
  stroke: '#4444',
  d: 'M 0,0 h 175 l 175,550 h -350 Z M 210,0 h 340 v 550 h -165 Z',
  filter: 'url(#rough-paper)'
}).moveTo(500,500)

let filter = svg.createFilter('rough-paper')
filter.create('feTurbulence').set({
	type: 'fractalNoise',
  numOctaves: 5,
  baseFrequency: 0.04,
  seed: Gen.random(0,100),
  result: 'turbulence'
})
filter.create('feDiffuseLighting').set({
	surfaceScale1:1,
  diffuseConstant:1.3,
  in:'turbulence',
  result:'lighting'
}).create('feDistantLight').set({
	azimuth: 0,
  elevation:45
})
filter.create('feDisplacementMap').set({
	in: 'SourceGraphic',
  in2: 'turbulence',
  scale: 25,
  result: 'distortion'
})
filter.create('feComposite').set({
	in: 'lighting',
  in2: 'distortion',
  operator: 'in',
  result: 'composite'
})
filter.create('feBlend').set({
	in: 'composite',
  in2: 'distortion',
  mode: 'multiply'
})