JSFiddle - React, Tailwind, and code Playground

by Troy Alford

HTML

<svg viewBox="0 0 100 100">
  <filter id="waves" x="0" y="0">
    <feTurbulence
      id="wave-turbulence"
      numOctaves="50" seed="20" 
    ></feTurbulence>
    <feDisplacementMap
      scale="50"
      in="SourceGraphic"
      xChannelSelector="R"
      yChannelSelector="G"
    ></feDisplacementMap>
    <animate xlink:href="#wave-turbulence"
      attributeName="baseFrequency"
      dur="60s"
      keyTimes="0;0.5;1"
      repeatCount="indefinite"
      values="0.02 0.06;0.04 0.08;0.02 0.06"
    ></animate>
  </filter>
  <circle id="ocean" class="ocean" cx="50" cy="50" r="45" />  
  <circle id="waves-1" class="waves" cx="50" cy="50" r="45" />
  <circle id="waves-2" class="waves" cx="50" cy="50" r="41" />
  <circle id="waves-3" class="waves" cx="50" cy="50" r="37" />
  <path class="line"
    d="M10,10,50,50,25,25"
  ></path>
</svg>

SCSS

svg {
  position: absolute;
  height: 90vh;
  width: 90vw;
  
  .ocean { fill: #00f; }
  .waves {
    clip-path: circle(45 at 50 50);
    fill: none;
    filter: url("#waves");
    
    &:nth-of-type(1) { stroke: #fff7; stroke-width: 1px; }
    &:nth-of-type(2) { stroke: #fff4; stroke-width: 2px; }
    &:nth-of-type(3) { stroke: #fff2; stroke-width: 3px; }
  }
  .line {
    stroke: #000;
    filter: url('#waves');
  }
}