2023-09-06 20:29:10 -04:00
|
|
|
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>
|
|
|
|
|
);
|
