<div id="container"></div>

<form>

	<fieldset>
		<input type="radio" name="type" id="turbulence" value="turbulence" checked>
		<label for="turbulence">turbulence</label>
		<input type="radio" name="type" id="fractalNoise" value="fractalNoise">
		<label for="fractalNoise">fractalNoise</label>
	</fieldset>

	<fieldset>
		<input type="range" id="freq" name="freq" min="0.001" max="0.25" step="0.001" value="0.01">
		<label for="freq">baseFrequency: <span id="freq-val">0.01</span></label>
	</fieldset>

	<fieldset>
		<input type="range" id="octaves" name="octaves" min="1" max="8" step="1" value="1">
		<label for="octaves">numOctaves: <span id="octaves-val">1</span></label>
	</fieldset>

	<fieldset>
		<input type="range" id="seed" name="seed" min="1" max="500" step="1" value="1">
		<label for="seed">seed: <span id="seed-val">1</span></label>
	</fieldset>

	<fieldset>
		<input type="radio" name="stitchTiles" id="noStitch" value="noStitch">
		<label for="noStitch">noStitch</label>
		<input type="radio" name="stitchTiles" id="stitch" value="stitch" checked>
		<label for="stitch">stitch</label>
	</fieldset>

</form>
body {
	margin: 0;
	font-family: monospace;
}

fieldset {
	border: none;
	display: flex;
	align-items: center;
	padding: 2px 0;
	font-size: 12px;
}

import { SvJs } from 'https://cdn.jsdelivr.net/npm/svjs@latest/dist/svjs.min.js';

const svg = new SvJs().addTo(document.getElementById('container'));
const types = document.getElementsByName('type');
const tiles = document.getElementsByName('stitchTiles');
const freq = document.getElementById('freq');
const octs = document.getElementById('octaves');
const seed = document.getElementById('seed');

svg.set({ width: '250px', height: '250px', viewBox: '0 0 1000 1000' });

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

let filter = svg.createFilter('noise');

let turbulence = filter.create('feTurbulence').set({
	type: 'turbulence',
  baseFrequency: 0.01,
  seed: 1,
  numOctaves: 1,
	stitchTiles: 'stitch',
  result: 'turbulence'
});

filter.create('feComposite').set({
  in: 'turbulence',
  in2: 'SourceGraphic',
  operator: 'atop',
  result: 'atop'
});

svg.create('rect').set({
	x: 150,
	y: 150,
	width: 700,
	height: 700,
	fill: "#fff",
	rx: 20,
	ry: 20,
	filter: 'url(#noise)'
});

types.forEach((type) => {
	type.addEventListener('change', () => {
		if (type.checked) turbulence.set({ type: type.value });
	});
});

freq.addEventListener('input', () => {
	turbulence.set({ baseFrequency: freq.value });
	document.getElementById('freq-val').innerHTML = freq.value;
});

octs.addEventListener('input', () => {
	turbulence.set({ numOctaves: octs.value });
	document.getElementById('octaves-val').innerHTML = octs.value;
});

seed.addEventListener('input', () => {
	turbulence.set({ seed: seed.value });
	document.getElementById('seed-val').innerHTML = seed.value;
});

tiles.forEach((tile) => {
	tile.addEventListener('change', () => {
		if (tile.checked) turbulence.set({ stitchTiles: tile.value });
	});
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.