CodePen Embed - SVG Warp Filter


<h1>United States Flag</h1>
<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <radialGradient gradientUnits="userSpaceOnUse" cx="338.4" cy="334.7" r="300" id="gradient-0" gradientTransform="matrix(1.32627, -1.43392, 1.25346, 1.15933, -568.34728, 326.86813)">
      <stop offset="0" style="stop-color: rgb(51, 237, 250);"></stop>
      <stop offset="1" style="stop-color: rgb(28, 0, 170);"></stop>
    </radialGradient>
    <filter id="warp-filter-0" color-interpolation-filters="sRGB"  bx:preset="warp 1 8 0.25">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0.5"></feFuncR>
      </feComponentTransfer>
      <feMerge result="a">
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
      <feTurbulence type="fractalNoise" baseFrequency="0.010" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="a" in2="warp"></feDisplacementMap>
    </filter>
  </defs>
  <rect width="600" height="400" style="stroke: rgb(0, 0, 0); fill: url(#gradient-0);"></rect>
  <g transform="matrix(3.77975, 0, 0, 3.73357, 41.4651, 65.59147)" style="filter: url(#warp-filter-0);" id="flag">
    <defs></defs>
    <g transform="matrix(1 0 0 -1 0 72)">
      <g transform="">
        <path d="M 0 66.461 L 136.8 66.461 L 136.8 72 L 0 72 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 60.923 L 136.8 60.923 L 136.8 66.462 L 0 66.462 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 55.385 L 136.8 55.385 L 136.8 60.923 L 0 60.923 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 49.846 L 136.8 49.846 L 136.8 55.385 L 0 55.385 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 44.308 L 136.8 44.308 L 136.8 49.847 L 0 49.847 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 38.769 L 136.8 38.769 L 136.8 44.308 L 0 44.308 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 33.231 L 136.8 33.231 L 136.8 38.77 L 0 38.77 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 27.692 L 136.8 27.692 L 136.8 33.231 L 0 33.231 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 22.154 L 136.8 22.154 L 136.8 27.692 L 0 27.692 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 16.615 L 136.8 16.615 L 136.8 22.155 L 0 22.155 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 11.077 L 136.8 11.077 L 136.8 16.615 L 0 16.615 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 5.538 L 136.8 5.538 L 136.8 11.078 L 0 11.078 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
        <path d="M 0 0 L 136.8 0 L 136.8 5.538 L 0 5.538 Z" style="fill: rgb(221, 41, 20); fill-opacity: 1;"></path>
        <path d="M 0 33.231 L 54.72 33.231 L 54.72 72 L 0 72 Z" style="fill: rgb(14, 56, 124); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(4.6104 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(9.1606 66.5376)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(18.2603 66.4868)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(27.3599 66.3345)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(36.4595 66.3345)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(45.5591 66.3345)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(9.1606 58.7886)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(18.2603 58.7378)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(27.3599 58.5854)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(36.4595 58.5854)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(45.5591 58.5854)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(9.1606 50.7041)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(18.2603 50.6533)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(27.3599 50.501)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(36.4595 50.501)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(45.5591 50.501)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(9.1606 42.686)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(18.2603 42.6353)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(27.3599 42.686)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(36.4595 42.4829)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(45.5591 42.4829)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(13.7104 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(22.8105 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(31.9106 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(41.0107 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(50.1108 70.4937)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(4.6099 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(13.71 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(22.8101 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(31.9102 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(41.0103 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(50.1104 62.5767)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(4.6094 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(13.7095 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(22.8096 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(31.9097 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(41.0098 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(50.1099 54.6597)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(4.6089 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(13.709 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(22.8091 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(31.9092 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(41.0093 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(50.1094 46.7427)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(4.6084 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(13.7085 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(22.8086 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(31.9087 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(41.0088 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
      <g transform="translate(50.1089 38.8257)">
        <path d="M 0 0 L 0.493 -1.528 L 2.099 -1.525 L 0.798 -2.466 L 1.298 -3.992 L 0 -3.046 L -1.298 -3.992 L -0.798 -2.466 L -2.099 -1.525 L -0.493 -1.528 Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
      </g>
    </g>
  </g>
</svg>

h1 {
	font-family:sans-serif;
	filter:url(#warp-filter-0);
}

const tl = gsap.timeline()

tl.to("feTurbulence", {
	duration:3, repeat:1, yoyo:true,
	ease:"none",
	attr:{
		baseFrequency:0.03
	}
})
tl.to("feDisplacementMap", {
	duration:3, repeat:1, yoyo:true,
	ease:"none",
	attr:{
		scale:15
	}
}, 0)


GSDevTools.create({animation:tl})

This Pen is owned by Snorkl.tv on CodePen.

See more by @snorkltv on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript