<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#linear-gradient-4);}.cls-5{fill:url(#linear-gradient-5);}.cls-6{fill:url(#linear-gradient-6);}.cls-7{fill:url(#linear-gradient-7);}.cls-8{fill:url(#linear-gradient-8);}.cls-11,.cls-9{fill:none;stroke:#f2f2f2;stroke-linecap:round;stroke-miterlimit:10;}.cls-9{stroke-width:8px;}.cls-10{fill:url(#linear-gradient-9);}.cls-11{stroke-width:2px;}.cls-12{fill:url(#linear-gradient-10);}.cls-13{fill:url(#linear-gradient-11);}.cls-14{fill:url(#linear-gradient-12);}</style><linearGradient id="linear-gradient" x1="960" x2="960" y2="1080" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7bffff"/><stop offset="0.12" stop-color="#5ec7ce"/><stop offset="0.23" stop-color="#4597a3"/><stop offset="0.35" stop-color="#306e7f"/><stop offset="0.47" stop-color="#1f4c61"/><stop offset="0.6" stop-color="#11324a"/><stop offset="0.72" stop-color="#082039"/><stop offset="0.85" stop-color="#02152f"/><stop offset="1" stop-color="#00112c"/></linearGradient><linearGradient id="linear-gradient-2" x1="251.69" y1="1080" x2="251.69" y2="485.84" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#142a00"/><stop offset="0.19" stop-color="#133003"/><stop offset="0.44" stop-color="#0f410c"/><stop offset="0.72" stop-color="#085d1a"/><stop offset="1" stop-color="#007f2b"/></linearGradient><linearGradient id="linear-gradient-3" x1="1305.31" y1="1019" x2="1305.31" y2="891" gradientTransform="matrix(-1, 0, 0, 1, 2950.23, 0)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#7fe0ff"/><stop offset="0.29" stop-color="#58b8ff"/><stop offset="0.77" stop-color="#1977ff"/><stop offset="0.99" stop-color="#005eff"/></linearGradient><linearGradient id="linear-gradient-4" x1="-729.98" y1="663" x2="-729.98" y2="323" gradientTransform="matrix(-1, 0, 0, 1, 896.23, 0)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#f7bfff"/><stop offset="0.12" stop-color="#f3b8fc"/><stop offset="0.27" stop-color="#e7a6f4"/><stop offset="0.44" stop-color="#d488e6"/><stop offset="0.64" stop-color="#b95ed4"/><stop offset="0.85" stop-color="#9828bc"/><stop offset="0.99" stop-color="#7e00aa"/></linearGradient><linearGradient id="linear-gradient-5" x1="175.45" y1="255" x2="175.45" y2="156.95" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#99ff94"/><stop offset="0.07" stop-color="#90f188"/><stop offset="0.4" stop-color="#67af4e"/><stop offset="0.67" stop-color="#487e24"/><stop offset="0.88" stop-color="#35600a"/><stop offset="0.99" stop-color="#2e5500"/></linearGradient><linearGradient id="linear-gradient-6" x1="1462.67" x2="1462.67" y2="294" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-7" x1="1336.42" y1="247" x2="1336.42" y2="38" gradientTransform="matrix(-1, 0, 0, 1, 2950.23, 0)" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#ffa694"/><stop offset="0.27" stop-color="#ed8176"/><stop offset="0.76" stop-color="#cd4042"/><stop offset="0.99" stop-color="#c1272d"/></linearGradient><linearGradient id="linear-gradient-8" x1="1299" y1="1008" x2="1233" y2="1008" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#fff"/><stop offset="0.06" stop-color="#f3fcff"/><stop offset="0.53" stop-color="#7de0ff"/><stop offset="0.85" stop-color="#32ceff"/><stop offset="1" stop-color="#15c7ff"/></linearGradient><linearGradient id="linear-gradient-9" x1="1318" y1="1053.5" x2="1287" y2="1053.5" xlink:href="#linear-gradient-8"/><linearGradient id="linear-gradient-10" x1="556.19" x2="556.19" y2="15" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-11" x1="961.5" y1="993" x2="961.5" y2="546.98" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="#f4b569"/><stop offset="0.17" stop-color="#f5b162"/><stop offset="0.39" stop-color="#f7a750"/><stop offset="0.65" stop-color="#fa9532"/><stop offset="0.94" stop-color="#fe7e08"/><stop offset="0.99" stop-color="#ff7900"/></linearGradient><linearGradient id="linear-gradient-12" x1="929.25" y1="1079.89" x2="929.25" y2="0" xlink:href="#linear-gradient-2"/></defs><g id="Layer_2" data-name="Layer 2">
    
<!--     <g id="Background"><g id="Background-2" data-name="Background"><rect class="cls-1" width="1920" height="1080"/></g></g> -->
    
    <g id="Seaweed"><path class="cls-2" d="M291.57,584.81c-4.51-12.34,4.43-72.19,4.43-72.19s-19.11,27.4-22.14,51.89c-7.57,11-27.5,43-16.62,62.28,13.28,23.57,10,59.44-3.32,82-9.38,15.91-17.91,45.11-18,69.56-.76-4-1.41-7.19-1.88-9.07-17.78-6.52-1.38-83.62,7.19-104.45,5.06-12.28,13-88.9,7.75-103.87-4.51-12.83,4.43-75.11,4.43-75.11s-32.65,48.71-19.37,75.7,10,68.07-3.32,93.89-24.89,82.15-13.28,110.32,10.52,99.76,10.52,99.76-32.09,49.29-16,100.93.28,109.44.28,109.44,15.16-.18,23.24,0v0h.52a35.51,35.51,0,0,1,4.18.26c.09,0,.17-.09.24-.29,4.25,0,10.44-.05,15.36,0-.59,2.47-1,3.82-1,3.82s25.17-.28,27.94.29S278,983.27,278,983.27c-12.45-36.94,3.33-85.73,9.14-95,7.19-5.08-6.91-89.4-10.5-103.21-17.79-6.27-1.38-80.38,7.2-100.4C288.86,672.84,296.82,599.19,291.57,584.81Zm-51.34,468.38c-1-22.71-3.3-56.07-4.33-70.53C244.31,1008.07,242.94,1034.87,240.23,1053.19ZM230.82,948c-1.21-31.87,9.21-63.83,13.69-71.3,4.71-3.46.3-42.2-4.32-72.61.15.35.29.72.45,1.06,11.62,24.59,10.51,87.11,10.51,87.11S233,916.64,230.82,948ZM259,993a181.85,181.85,0,0,1,2.62,34.12C260.63,1013,259.56,999.73,259,993Zm11.5-115.43s-.51.76-1.37,2.17c-2.18-25-9.46-63-11.9-71.51-12.31-3.93-8.25-37.36-1.74-63.62-.83,14.11.33,27.35,4.51,37.08C271.62,808.71,270.51,877.52,270.51,877.52Zm.93-198.2c2.49-21.7,3.67-45.75.74-53-2.86-7.1-.33-31.48,1.92-48.43a27.78,27.78,0,0,0,2.53,7.52c13.27,25.94,9.95,65.42-3.33,90.24C272.67,676.78,272.05,678,271.44,679.32Z"/></g>
    
    <g id="BlueFish"><path id="BlueFish-2" data-name="BlueFish" class="cls-3" d="M1552.4,944.84s44.13-27.58,63.13-24.72c3.47-7.77,7.56-20.64,19.41-29,6.13-.62,9.8,1,19,16.34,7.56,6.13,22.47,13.08,22.47,39,3.88,0,6.54,2.66,20.23-8.37s32.48-22.68,32.48-22.68-22.06,18.39-19.82,21.45c5.32-1.63,35.48-.89,27.79,4.7-11.24,8.17-17.57,12-36.78,18.18,5.32,3.68,16.35,14.51,16.14,22.88,0,0-15.93,1.64-26.56-8.58-9.39-3.88-17.57-6.94-17.57-6.94s-6.53-3.07,3.07,6.13c1.22,1.63.41,18.79-15.53,14.09-3.88-3.88-11-13.28-13.07-7.76-2.46,1.63-11.65,4.7-15.73,4.7,3.88.82,11,0,12.46-.41.2,1.84,3.27,7.56,6.13,9.81-.82,4.49-1.84,21.24-17.78,25.33-3.68-4.09-11.23-12.46-12.46-31.87-8-2-31.26-2.25-46.38-16.75-4.7-1.64-9.8-3.68-9.8-3.68S1547.7,959.34,1552.4,944.84Z"/></g>
    
    <g id="PurpleFish"><path id="PurpleFish-2" data-name="PurpleFish" class="cls-4" d="M1380.44,466s117.22-73.27,167.69-65.67c9.22-20.62,20.08-54.81,51.55-77.06,16.28-1.63,26,2.71,50.47,43.41,20.08,16.29,59.7,34.74,59.7,103.66,10.31,0,17.36,7,53.72-22.25s86.29-60.24,86.29-60.24-58.61,48.84-52.64,57c14.11-4.34,94.22-2.37,73.8,12.48-29.84,21.71-46.67,32-97.68,48.3,14.11,9.77,43.42,38.53,42.87,60.78,0,0-42.33,4.34-70.55-22.79-25-10.31-46.67-18.45-46.67-18.45s-17.36-8.14,8.14,16.28c3.26,4.34,1.09,49.93-41.24,37.44-10.31-10.31-29.31-35.27-34.73-20.62-6.51,4.34-30.94,12.48-41.79,12.48,10.31,2.17,29.31,0,33.1-1.08.55,4.88,8.69,20.08,16.29,26.05-2.18,11.94-4.89,56.44-47.22,67.29-9.77-10.85-29.85-33.1-33.1-84.66-21.17-5.43-83-6-123.19-44.5-12.48-4.34-26-9.77-26-9.77S1368,504.54,1380.44,466Z"/></g>
    
    <g id="GreenFish"><path id="GreenFish-2" data-name="GreenFish" class="cls-5" d="M246.32,198.19s-33.8-21.12-48.35-18.93c-2.67-5.95-5.8-15.81-14.87-22.22-4.7-.47-7.51.78-14.56,12.51-5.79,4.7-17.21,10-17.21,29.9-3,0-5,2-15.49-6.42A295.86,295.86,0,0,0,111,175.66s16.9,14.08,15.17,16.43c-4.06-1.25-27.17-.68-21.28,3.6,8.61,6.26,13.46,9.23,28.17,13.93-4.07,2.81-12.52,11.11-12.36,17.52,0,0,12.2,1.26,20.34-6.57,7.2-3,13.46-5.32,13.46-5.32s5-2.35-2.35,4.7c-.94,1.25-.31,14.39,11.9,10.79,3-3,8.45-10.17,10-5.94,1.88,1.25,8.92,3.6,12,3.6a29.85,29.85,0,0,1-9.54-.32c-.16,1.41-2.51,5.79-4.7,7.51.63,3.45,1.41,16.28,13.62,19.41,2.81-3.13,8.6-9.55,9.54-24.41,6.11-1.57,23.95-1.72,35.53-12.84,3.6-1.25,7.51-2.81,7.51-2.81S249.92,209.3,246.32,198.19Z"/></g>
    
    <g id="Seaweed4"><path class="cls-6" d="M1521.76,424.92c-6.68-16.32,6.57-95.5,6.57-95.5s-28.32,36.25-32.81,68.65c-11.22,14.5-40.75,56.85-24.63,82.39,19.68,31.18,14.76,78.63-4.92,108.46-13.88,21-26.54,59.62-26.74,92-1.12-5.32-2.08-9.45-2.78-11.93-26.36-8.62-2-110.62,10.66-138.18,7.49-16.23,19.27-117.6,11.48-137.4-6.68-17,6.56-99.36,6.56-99.36s-48.37,64.43-28.7,100.14,14.76,90.05-4.92,124.2S1394.64,627,1411.86,664.28s15.57,132,15.57,132-47.55,65.21-23.77,133.52.41,144.78.41,144.78,22.46-.24,34.44,0v0h.79a52.65,52.65,0,0,1,6.18.35c.14,0,.26-.12.37-.39,6.29,0,15.46-.06,22.76,0-.87,3.27-1.44,5.06-1.44,5.06s37.3-.37,41.4.38-7-128-7-128c-18.44-48.87,4.93-113.41,13.54-125.72,10.66-6.71-10.23-118.26-15.56-136.54-26.36-8.29-2-106.32,10.68-132.8C1517.76,541.37,1529.55,444,1521.76,424.92Zm-76.08,619.61c-1.48-30-4.89-74.17-6.41-93.3C1451.72,984.84,1449.7,1020.3,1445.68,1044.53Zm-13.94-139.2C1430,863.17,1445.39,820.89,1452,811c7-4.57.45-55.74-6.39-96,.21.44.43.88.65,1.3,17.22,32.54,15.58,115.24,15.58,115.24S1434.9,863.89,1431.74,905.33Zm41.77,59.52a214.86,214.86,0,0,1,3.89,45.12C1475.92,991.42,1474.34,973.81,1473.51,964.85Zm17-152.71s-.76,1-2,2.88c-3.23-33.07-14-83.33-17.63-94.6-18.22-5.2-12.23-49.37-2.6-84.09-1.22,18.64.52,36.12,6.7,49C1492.21,721.12,1490.56,812.14,1490.56,812.14Zm1.38-262.23c3.69-28.7,5.43-60.49,1.09-70.13-4.23-9.38-.48-41.64,2.84-64.06a34.66,34.66,0,0,0,3.75,9.94c19.68,34.33,14.75,86.55-4.93,119.38C1493.77,546.58,1492.85,548.21,1491.94,549.91Z"/></g>
    
    <g id="RedFish"><path id="RedFish-2" data-name="RedFish" class="cls-7" d="M1462.73,125.91s72.06-45,103.08-40.37c5.67-12.67,12.35-33.69,31.69-47.37,10-1,16,1.67,31,26.69,12.34,10,36.69,21.35,36.69,63.72,6.34,0,10.68,4.33,33-13.68s53-37,53-37-36,30-32.36,35c8.67-2.67,57.92-1.46,45.37,7.67-18.35,13.34-28.69,19.68-60,29.69,8.68,6,26.69,23.68,26.36,37.36,0,0-26,2.67-43.37-14-15.34-6.34-28.69-11.34-28.69-11.34s-10.67-5,5,10c2,2.66.66,30.69-25.36,23-6.34-6.33-18-21.68-21.35-12.67-4,2.67-19,7.67-25.68,7.67,6.33,1.33,18,0,20.35-.67.33,3,5.33,12.35,10,16-1.33,7.34-3,34.7-29,41.37-6-6.67-18.35-20.35-20.35-52-13-3.34-51-3.67-75.72-27.35-7.68-2.67-16-6-16-6S1455.06,149.59,1462.73,125.91Z"/></g>
    
    <g id="Bubbles"><g id="Bubbles-2" data-name="Bubbles"><circle class="cls-8" cx="1266" cy="1008" r="33"/><path class="cls-9" d="M1244.57,1004.26s-4.09-21.44,18.37-18.37"/><circle class="cls-10" cx="1302.5" cy="1053.5" r="15.5"/><path class="cls-11" d="M1292.11,1052.86s-1.91-10.07,8.63-8.63"/></g></g>
    
    <g id="Seaweed2" x= "1000"><path class="cls-12" d="M654.11,192.39C643,170.27,665,63,665,63s-46.93,49.12-54.38,93c-18.59,19.64-67.51,77-40.8,111.63,32.6,42.25,24.45,106.54-8.15,147-23,28.51-44,80.79-44.32,124.59-1.85-7.2-3.44-12.8-4.59-16.16-43.68-11.68-3.4-149.88,17.66-187.22,12.41-22,31.92-159.35,19-186.18C538.37,126.62,560.31,15,560.31,15s-80.16,87.3-47.55,135.69,24.45,122-8.16,168.29S443.47,466.23,472,516.72s25.81,178.81,25.81,178.81-78.8,88.35-39.4,180.92.68,196.16.68,196.16,37.23-.32,57.08,0l0,0h1.34c5.06.1,8.81.25,10.21.47.23,0,.44-.15.61-.53,10.42,0,25.62-.08,37.71,0-1.44,4.43-2.39,6.85-2.39,6.85s61.82-.5,68.61.52-11.52-173.38-11.52-173.38C590.16,840.4,628.89,753,643.16,736.28c17.66-9.1-17-160.24-25.78-185C573.7,540,614,407.21,635.06,371.33,647.48,350.18,667,218.17,654.11,192.39ZM528,1031.94c-2.44-40.69-8.1-100.48-10.62-126.41C538.06,951.07,534.71,999.11,528,1031.94ZM505,843.32c-3-57.12,22.61-114.4,33.62-127.8,11.54-6.19.74-75.53-10.6-130,.36.59.72,1.18,1.09,1.76,28.53,44.09,25.81,156.14,25.81,156.14S510.18,787.18,505,843.32ZM574.16,924a240,240,0,0,1,6.45,61.14C578.15,960,575.53,936.12,574.16,924Zm28.25-206.9s-1.26,1.35-3.37,3.89c-5.36-44.8-23.23-112.91-29.22-128.18-30.2-7-20.27-66.89-4.31-113.94-2,25.26.87,48.94,11.11,66.36C605.14,593.73,602.41,717.07,602.41,717.07Zm2.28-355.32c6.12-38.89,9-82,1.81-95-7-12.72-.79-56.42,4.71-86.8a42,42,0,0,0,6.22,13.47c32.6,46.5,24.44,117.27-8.18,161.75Q607,358.29,604.69,361.75Z"/></g>
    
    <g id="OrangeFish"><path id="OrangeFish-2" data-name="OrangeFish" class="cls-13" d="M1283.91,734.58s-153.77-96.11-220-86.15c-12.1-27-26.34-71.9-67.63-101.09-21.36-2.13-34.17,3.56-66.21,57-26.34,21.35-78.31,45.56-78.31,136-13.52,0-22.78,9.26-70.48-29.19s-113.19-79-113.19-79,76.89,64.07,69,74.75c-18.5-5.69-123.6-3.11-96.82,16.38,39.16,28.47,61.23,42,128.15,63.36-18.51,12.81-57,50.54-56.24,79.73,0,0,55.53,5.69,92.55-29.9C837.54,822.85,866,812.17,866,812.17s22.78-10.67-10.68,21.36c-4.27,5.7-1.42,65.5,54.11,49.12,13.52-13.52,38.44-46.27,45.56-27,8.54,5.7,40.58,16.37,54.82,16.37-13.53,2.85-38.45,0-43.43-1.42C965.69,877,955,896.89,945,904.72c2.85,15.66,6.41,74,61.94,88.28,12.81-14.24,39.15-43.43,43.43-111.06,27.76-7.12,108.92-7.83,161.6-58.38,16.37-5.69,34.17-12.81,34.17-12.81S1300.29,785.12,1283.91,734.58Z"/></g>
    
    <g id="Seaweed3"><path class="cls-14" d="M969.49,331.89s-.93,2.79-2.48,8c-4-92.35-17.1-232.71-21.51-264.17C935.3,69.08,931.32,39.46,931.14,0H883.77c10,120.78,8.73,287.51,8.73,287.51s-58,182.1-29,372.86.5,404.29.5,404.29,27.4-.65,42,.07v.07l1,0c3.73.21,6.49.52,7.52,1,.17.07.32-.31.45-1.09,7.67-.09,18.85-.17,27.75,0-1.06,9.14-1.75,14.14-1.75,14.14s45.5-1,50.5,1.05S983,722.56,983,722.56c-22.5-136.48,6-316.7,16.52-351.07,12.33-17.79-10-299.16-17.85-371.49H954.46C971.24,111,969.49,331.89,969.49,331.89Zm-54.74,649c-1.8-83.88-6-207.13-7.82-260.56C922.13,814.15,919.66,913.18,914.75,980.85ZM934.5,386.19s-32.91,90.22-36.75,205.94c-2.19-117.74,16.64-235.81,24.75-263.43C931,316,923,173.05,914.7,60.77c.26,1.22.53,2.43.8,3.62C936.5,155.25,934.5,386.19,934.5,386.19Zm19,498.19c-1.82-51.86-3.75-101.08-4.75-126.11C952.48,801.6,953.7,844.61,953.45,884.38Z"/></g>
      
    
    </g>
      
    </svg>

  
  
body {
  margin: 0;
}

svg {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#7bffff, #00112c 85%);
}

var tl = gsap.timeline({ repeat: -1 });

// tl.to("#OrangeFish", {
// 	x: 0,
// 	duration: 1,
// 	ease: "none"
// });

tl.set("#OrangeFish", {
	x: -1900
});
tl.to("#OrangeFish", {
	x: 1500,
	duration: 50,
	ease: "none",
	delay: 8
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#PurpleFish", {
	x: 950
});

tl.to("#PurpleFish", {
	x: -2200,
	duration: 25,
	ease: "none",
	delay: 3
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#BlueFish", {
	x: 1000
});

tl.to("#BlueFish", {
	x: -2100,
	duration: 23,
	ease: "none",
	delay: 0
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#RedFish", {
	x: 900
});

tl.to("#RedFish", {
	x: -2200,
	duration: 25,
	ease: "none",
	delay: 1
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#GreenFish", {
	x: -650
});

tl.to("#GreenFish", {
	x: 2200,
	duration: 25,
	ease: "none",
	delay: 3
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#Bubbles", {
	y: 2000
});

tl.to("#Bubbles", {
	y: -2000,
	duration: 15,
	ease: "none",
	delay: 1.5
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#Seaweed", {
	x: -300
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#Seaweed3", {
	x: 200
});

var tl = gsap.timeline({ repeat: -1 });

tl.set("#Seaweed4", {
	x: 300
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  3. https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js