Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
  <g id="SCENE_3">
    <linearGradient id="bg_3_" x1=".5" x2="1920.5" y1="540" y2="540" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#a8a8a8"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient>
    <rect id="bg_2_" width="1920" height="1080" x=".5" fill="url(#bg_3_)"/>
    <linearGradient id="water_4_" x1="961.5005" x2="961.5005" y1="1078" y2="878" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#cfcfcf" stop-opacity="0"/>
      <stop offset="1" stop-color="#a8a8a8"/>
    </linearGradient>
    <rect id="water_3_" width="1920" height="200" x="1.5" y="878" fill="url(#water_4_)"/>
    <g id="waves" fill="#707070">
      <g id="whitecaps" fill="#FFF">
        <polygon points="891.7 886 911.3 881.6 930.8 886"/>
        <polygon points="704.7 919 724.3 914.6 743.8 919"/>
        <polygon points="308.7 886 328.3 881.6 347.8 886"/>
        <polygon points="1331.7 886 1351.3 881.6 1370.8 886"/>
        <polygon points="1573.7 897 1593.3 892.6 1612.8 897"/>
           <polygon points="1557.8 890 1538.3 885.6 1518.7 890"/>
        <polygon points="1744.8 923 1725.3 918.6 1705.7 923"/>
        <polygon points="1920.8 890 1901.3 885.6 1881.7 890"/>
        <polygon points="864.8 934 845.3 929.6 825.7 934"/>
        <polygon points="622.8 945 603.3 940.6 583.7 945"/>
      </g>
         <polygon points="1267.8 1009 1303.6 1001 1339.3 1009"/>
        <polygon points="1385.7 1038 1421.4 1030 1457.2 1038"/>
        <polygon points="1326.7 1067 1362.5 1059 1398.3 1067"/>
        <polygon points="1652.8 983 1688.6 975 1724.3 983"/>
        <polygon points="1770.7 1012 1806.4 1004 1842.2 1012"/>
        <polygon points="1711.7 1041 1747.5 1033 1783.3 1041"/>
        <polygon points="937.8 994 973.6 986 1009.3 994"/>
        <polygon points="1055.7 1023 1091.4 1015 1127.2 1023"/>
        <polygon points="996.7 1052 1032.5 1044 1068.3 1052"/>
        <polygon points="531.8 958 555.3 952.8 578.8 958"/>
        <polygon points="609.2 977 632.7 971.8 656.2 977"/>
        <polygon points="570.5 996 594 990.8 617.5 996"/>
        <polygon points="1092 940 1115.5 934.8 1139 940"/>
        <polygon points="1169.4 959 1192.9 953.8 1216.5 959"/>
        <polygon points="1130.7 978 1154.2 972.8 1177.7 978"/>
        <polygon points="1419.8 947 1443.3 941.8 1466.8 947"/>
        <polygon points="1497.2 966 1520.7 960.8 1544.2 966"/>
        <polygon points="1458.5 985 1482 979.8 1505.5 985"/>
        <polygon points="1827.7 895 1847.3 890.6 1866.8 895"/>
        <polygon points="1892.2 911 1911.7 906.6 1931.3 911"/>
        <polygon points="1859.9 927 1879.5 922.6 1899.1 927"/>
        <polygon points="1595.7 887 1615.3 882.6 1634.8 887"/>
        <polygon points="1660.2 903 1679.7 898.6 1699.3 903"/>
        <polygon points="1627.9 919 1647.5 914.6 1667.1 919"/>
        <polygon points="1265.7 898 1285.3 893.6 1304.8 898"/>
        <polygon points="1330.2 914 1349.7 909.6 1369.3 914"/>
        <polygon points="1297.9 930 1317.5 925.6 1337.1 930"/>
        <polygon points="407.7 887 427.3 882.6 446.8 887"/>
        <polygon points="472.2 903 491.7 898.6 511.3 903"/>
        <polygon points="439.9 919 459.5 914.6 479.1 919"/>
        <polygon points="957.7 886 977.3 881.6 996.8 886"/>
        <polygon points="1022.2 902 1041.7 897.6 1061.3 902"/>
        <polygon points="989.9 918 1009.5 913.6 1029.1 918"/>
        <polygon points="781.7 898 801.3 893.6 820.8 898"/>
        <polygon points="846.2 914 865.7 909.6 885.3 914"/>
        <polygon points="813.9 930 833.5 925.6 853.1 930"/>
        <polygon points="198.7 898 218.3 893.6 237.8 898"/>
        <polygon points="263.2 914 282.7 909.6 302.3 914"/>
        <polygon points="230.9 930 250.5 925.6 270.1 930"/>
        <polygon points="20.2 914 39.7 909.6 59.3 914"/>
        <polygon points="-12.1 930 7.5 925.6 27.1 930"/>
           </g>


    <g id="shore">
      <path id="land3_1_" fill="#B08D80" d="M-.4 947.6c-.3 10.9-.7 21.7-1.1 32.6l1180 99.8c94.5-.4 188.9-.5 283.4-.5h60.3"/>
      <polyline fill="gray" points="0 1080 1566.8 1080 .5 974.4"/>
      <rect width="1099.4" height="15.9" x="-.9" y="993" fill="#F2F2F2" transform="matrix(.9993 .03638 -.03638 .9993 36.7759 -19.3041)"/>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                #waves> #dist4 {
/*   opacity: 0.1; */
}


/*

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
  <g id="SCENE_3">
    <linearGradient id="bg_3_" x1=".5" x2="1920.5" y1="540" y2="540" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#a8a8a8"/>
      <stop offset="1" stop-color="#fff"/>
    </linearGradient>
    <linearGradient id="water_4_" x1="961.5005" x2="961.5005" y1="1078" y2="878" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#cfcfcf" stop-opacity="0"/>
      <stop offset="1" stop-color="#a8a8a8"/>
    </linearGradient>
    <g id="Tri_Waves">
      <g id="whitecaps" fill="#FFF">
        <polygon points="891.7 886 911.3 881.6 930.8 886"/>
        <polygon points="704.7 919 724.3 914.6 743.8 919"/>
        <polygon points="308.7 886 328.3 881.6 347.8 886"/>
        <polygon points="1331.7 886 1351.3 881.6 1370.8 886"/>
        <polygon points="1573.7 897 1593.3 892.6 1612.8 897"/>
      </g>
      <g fill="#707070">
        <polygon points="1267.8 1009 1303.6 1001 1339.3 1009"/>
        <polygon points="1385.7 1038 1421.4 1030 1457.2 1038"/>
        <polygon points="1326.7 1067 1362.5 1059 1398.3 1067"/>
        <polygon points="1652.8 983 1688.6 975 1724.3 983"/>
        <polygon points="1770.7 1012 1806.4 1004 1842.2 1012"/>
        <polygon points="1711.7 1041 1747.5 1033 1783.3 1041"/>
        <polygon points="937.8 994 973.6 986 1009.3 994"/>
        <polygon points="1055.7 1023 1091.4 1015 1127.2 1023"/>
        <polygon points="996.7 1052 1032.5 1044 1068.3 1052"/>
        <polygon points="531.8 958 555.3 952.8 578.8 958"/>
        <polygon points="609.2 977 632.7 971.8 656.2 977"/>
        <polygon points="570.5 996 594 990.8 617.5 996"/>
        <polygon points="1092 940 1115.5 934.8 1139 940"/>
        <polygon points="1169.4 959 1192.9 953.8 1216.5 959"/>
        <polygon points="1130.7 978 1154.2 972.8 1177.7 978"/>
        <polygon points="1419.8 947 1443.3 941.8 1466.8 947"/>
        <polygon points="1497.2 966 1520.7 960.8 1544.2 966"/>
        <polygon points="1458.5 985 1482 979.8 1505.5 985"/>
        <polygon points="1827.7 895 1847.3 890.6 1866.8 895"/>
        <polygon points="1892.2 911 1911.7 906.6 1931.3 911"/>
        <polygon points="1859.9 927 1879.5 922.6 1899.1 927"/>
        <polygon points="1595.7 887 1615.3 882.6 1634.8 887"/>
        <polygon points="1660.2 903 1679.7 898.6 1699.3 903"/>
        <polygon points="1627.9 919 1647.5 914.6 1667.1 919"/>
        <polygon points="1265.7 898 1285.3 893.6 1304.8 898"/>
        <polygon points="1330.2 914 1349.7 909.6 1369.3 914"/>
        <polygon points="1297.9 930 1317.5 925.6 1337.1 930"/>
        <polygon points="407.7 887 427.3 882.6 446.8 887"/>
        <polygon points="472.2 903 491.7 898.6 511.3 903"/>
        <polygon points="439.9 919 459.5 914.6 479.1 919"/>
        <polygon points="957.7 886 977.3 881.6 996.8 886"/>
        <polygon points="1022.2 902 1041.7 897.6 1061.3 902"/>
        <polygon points="989.9 918 1009.5 913.6 1029.1 918"/>
        <polygon points="781.7 898 801.3 893.6 820.8 898"/>
        <polygon points="846.2 914 865.7 909.6 885.3 914"/>
        <polygon points="813.9 930 833.5 925.6 853.1 930"/>
        <polygon points="198.7 898 218.3 893.6 237.8 898"/>
        <polygon points="263.2 914 282.7 909.6 302.3 914"/>
        <polygon points="230.9 930 250.5 925.6 270.1 930"/>
        <polygon points="20.2 914 39.7 909.6 59.3 914"/>
        <polygon points="-12.1 930 7.5 925.6 27.1 930"/>
      </g>
    </g>
  </g>
</svg>
*/
              
            
!

JS

              
                (function() {
  var allWaves = $("polygon");

  for (let wave of allWaves) {
    let tl = new TimelineMax({
      repeat: -1,
      yoyo: true,
      yoyoEase: true,
      smoothChildTiming: true,
      repeatDelay: 1
    });
    tl.set(wave, { opacity: 0 , scale: 0.5});
    tl
      .to(wave, randomNumber(0, 25), {
        opacity: randomNumber(0,1),
        ease: Power1.easeInOut
      })
      .to(wave, 10, {
        opacity: 0,
      scale: 1,
        x: -10,
        y: randomNumber(0, 10),
        ease: Power4.easeOut
      });
  }
  
  function randomNumber(min, max) {
    return Math.random() * (max - min) + min;
  }


})();

              
            
!
999px

Console