this repo has no description
1// filter svg https://henry.codes/writing/how-to-distort-text-with-svg/
2
3const tmp = document.createElement("body");
4tmp.innerHTML = /*html*/ `
5 <svg style="position: absolute">
6 <defs>
7 <filter id="distort">
8 <feTurbulence
9 baseFrequency="0.01 0.01"
10 numOctaves="1"
11 result="noise"
12 />
13 <feDisplacementMap
14 in="SourceGraphic"
15 in2="noise"
16 scale="0"
17 xChannelSelector="R"
18 yChannelSelector="R"
19 id="distortion-intensity"
20 ></feDisplacementMap>
21 </filter>
22 <filter id="colour">
23 <feColorMatrix
24 in="SourceGraphic"
25 type="hueRotate"
26 id="colour-shift"
27 values="0"
28 />
29 </filter>
30 </defs>
31 </svg>
32 <style>
33 * {
34 --filters: url(#distort) url(#colour);
35 backdrop-filter: var(--filters);
36 filter: var(--filters);
37 }
38 </style>
39`;
40
41customElements.define(
42 "filter-controls",
43 class extends HTMLElement {
44 connectedCallback() {
45 const input = {
46 distort: { type: "range", min: "0", max: "100", value: "0", step: "1" }, // document.createElement("input"),
47 colour: { type: "range", min: "0", max: "360", value: "0", step: "1" }, // document.createElement("input"),
48 };
49
50 for (const k in input) {
51 const el = document.createElement("input");
52 Object.entries(input[k]).map(([k, v]) => el.setAttribute(k, v));
53 switch (k) {
54 case "distort": {
55 el.addEventListener("input", () =>
56 document
57 .getElementById("distortion-intensity")
58 .setAttribute("scale", el.value),
59 );
60 break;
61 }
62 case "colour": {
63 el.addEventListener("input", () =>
64 document
65 .getElementById("colour-shift")
66 .setAttribute("values", el.value),
67 );
68 break;
69 }
70 }
71 this.append(el);
72 }
73 }
74 },
75);
76
77window.onload = () => document.body.append(...tmp.children);