sunshine: gonna do individual displacement

html/common.tsx

@@ -194,3 +194,24 @@ export const pick_random = <T,>(xs: T[]): T =>
     xs[Math.floor(Math.random() * xs.length)];
 
 export const jitter = (n: number) => n * (Math.random() - 0.5);
+
+export const svg_url = (svg: string) => `data:image/svg+xml,${encodeURI(svg)}`;
+
+export const css = {
+    url(href: string) {
+        return `url('${href}')`;
+    },
+    px(n: number) {
+        return `${n}px`;
+    },
+    em(n: number) {
+        return `${n}em`;
+    },
+    rem(n: number) {
+        return `${n}rem`;
+    },
+    inline_block: "inline-block",
+    block: "block",
+    grid: "grid",
+    flex: "flex",
+} as const;

html/sunshine-curved-text.tsx

@@ -0,0 +1,29 @@
+import { css, render_and_copy, svg_url } from "./common.tsx";
+
+const svg = `
+<svg id="filterSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <filter id="displacement" filterUnits="userSpaceOnUse">
+      <!-- this is just a base64 encoded PNG with a simple linear gradient -->
+      <!-- this may not be exactly what you want, but you can adjust the R and B channels to displace the element however you like. -->
+      <feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGlJREFUaIHtz6ENwEAMxVBfUWn3H7Kw8LpCdMjAT/osIF7AZuAGnsMt4D3cN3kOuIZ3eoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNj9ceBBjuV6HJAAAAABJRU5ErkJggg==" result="dispMap" />
+      <feDisplacementMap
+        in="SourceGraphic"
+        in2="dispMap"
+        scale="10"
+        xChannelSelector="B"
+        yChannelSelector="R" />
+    </filter>
+  </svg>
+`.trim();
+
+render_and_copy(
+    <div
+        style={{
+            display: css.inline_block,
+            filter: css.url(svg_url(svg) + "#displacement"),
+            height: css.rem(10),
+        }}
+    >
+        yo what's up i am a chuckya
+    </div>
+);