Skip to content

Instantly share code, notes, and snippets.

@samanpwbb
Created September 6, 2022 05:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samanpwbb/a063383944e683a5bb706137cac525c0 to your computer and use it in GitHub Desktop.
Save samanpwbb/a063383944e683a5bb706137cac525c0 to your computer and use it in GitHub Desktop.
javascript:(function p(){
const s = Math.min(window.innerWidth, window.innerHeight) / 2;
const img = [
"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",
];
const d = [...Array(6)].map((_, i) => `<filter colorInterpolationFilters="sRGB" id='squiggly-${i}'>
<feImage
width=${s}
height=${s}
href="data:image/png;base64,${img[i % 3]}"
result="noise"
/>
<feTile in="noise" result="noise" />
<feGaussianBlur in="noise" result="noise" stdDeviation="3" />
<feDisplacementMap
in="SourceGraphic"
in2="noise"
scale="${i % 2 ? '1.2' : '1.6'}"
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>`
);
const svg = document.createElement('SVG');
svg.innerHTML = `<svg style="display:none;" viewBox="0 0 ${window.innerWidth} ${window.innerHeight}" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs>${d}</defs></svg>`;
const st = document.createElement('style');
st.innerHTML = `.wilderplace-squiggle { animation: w-s 2s linear infinite; }
@keyframes w-s {
0% { filter: url('#squiggly-0'); }
16.6666% { filter: url('#squiggly-1'); }
33.3333% { filter: url('#squiggly-2'); }
50% { filter: url('#squiggly-3'); }
66.6666% { filter: url('#squiggly-4'); }
83.3333% { filter: url('#squiggly-5'); }
100% { filter: url('#squiggly-0'); }
}`;
document.head.appendChild(st);
document.body.appendChild(svg);
document.body.classList.add('wilderplace-squiggle');
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment