JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<svg
  viewBox="0 0 500 500"
  width="95vw"
  height="95vh"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg"
  shape-rendering="geometricPrecision"
>

  <mask id="overlay">
    <filter id="displacementFilter">
      <feTurbulence
        type="turbulence"
        baseFrequency="0.0666"
        numOctaves="6"
        result="turbulence" />
      <feDisplacementMap
        in2="turbulence"
        in="SourceGraphic"
        scale="80"
        xChannelSelector="R"
        yChannelSelector="G" />
    </filter>
    <circle cx="50%" cy="50%" r="25%" filter="url(#displacementFilter)" />
  </mask>
  <img href="https://github.com/nberlette.png" mask="url(#overlay)" width="50%" height="50%" x="50%" y="50%" />
</svg>