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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="wave"><title>Wave</title><defs></defs><path id="feel-the-wave" d=""/></svg>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" class="wave"><title>Wave</title><defs></defs><path id="feel-the-wave-two" d=""/></svg>

<svg xmlns="http://www.w3.org/2000/svg" id="ertrinken" viewBox="0 0 595 886" width="595" height="886">
  <g id="layer1" fill="#fff">
    <path id="mundauf" d="M.498 884.312C3.143 754.194-.812 621.376 47.888 510.1c7.11-34.3 21.886-64.77 37.584-94.78 8.79-16.21 13.895-28.68 17.975-46.57 17.44-79.12 27.38-146.215 55.96-207.126 10.38-19.61 17.82-40.868 8.99-76.395-10.38-19.588-8.35-45.11 34.72-42.49 8.15.495 7.175 4.844 18.072 0 .28-12.27 16.684-14.926 17.934 1.544 16.356 51.223 24.244 21.57 22.74-4.83-.21-17.8 4.3-16.85 15.19-6.51 11.91 3.13 23.2.27 24.38-9.35 1.93-20.48 19.71-37.54 52.414-4.54 19.564 12.88 27.886 27.89 45.35 15.52 19.08-14.82 40.99-4.18 62.093-.81 71.47 8.23 101.03 44.58 118.48 78.44 17.55 23.87 27.474 173.917-27.21 226.99-57.232 55.56-207.412 55.32-238.332 21.4-12.3-5.933-46.71-24.1-22.06 34.318 50.42 63.69 56.51 116.95 71.9 172.4 19.806 118.69 15.508 210.886.82 317.772z"/>
    <path id="mundzu" d="M.498 884.312C3.143 754.194-.812 621.376 47.888 510.1c7.11-34.3 21.886-64.77 37.584-94.78 8.79-16.21 33.392-42.394 34.996-60.674 6.498-80.758 14.443-103.537 34.457-167.774 7.612-20.84 26.142-53.37 11.367-87.364-14.082-17.987-15.676-43.548 31.105-46.82 8.853-.62 8.447 3.82 19.467-2.464-1.516-12.195 15.764-17.06 19.55-.913 25.208 48.52 8.458 28.526 3.37 2.577-2.633-17.605 1.965-17.278 14.162-8.518 12.225 1.477 23.02-2.895 22.88-12.586-.88-20.55 14.41-39.874 51.305-11.638 21.14 10.094 31.43 23.83 47.046 9.196 16.883-17.28 40.038-9.724 61.404-9.26 71.923-1.586 106.16 30.4 128.06 61.565 20.64 21.256 50.913 168.552 3.97 228.58-49.13 62.84-197.94 83.064-233.194 53.673-12.995-4.202-73.688-22.337-41.31 32.178 58.63 56.226 54.573 116.792 69.966 172.242 19.806 118.69 15.508 210.886.82 317.772z"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" id="text" viewBox="0 0 152 73"width="152" height="73">
  <g id="layer1">
    <g id="text3829" fill="#fff" style="text-align:start;line-height:81.00000024000000600%;-inkscape-font-specification:Gill Sans MT" font-size="48" letter-spacing="0" word-spacing="0" font-family="Gill Sans MT">
      <path id="path3978" d="M16.945 30.023c-.734 1.235-1.566 2.164-2.496 2.79-.93.624-1.96.937-3.09.937-1.78 0-3.46-.742-5.04-2.227-1.58-1.484-2.74-3.54-3.47-6.164-.74-2.63-1.1-5.35-1.1-8.16 0-5.2 1.08-9.37 3.24-12.5C7.15 1.56 9.96 0 13.43 0c1.953 0 3.96.672 6.023 2.016v3.937C17.313 3.938 15.28 2.93 13.36 2.93c-2.532 0-4.56 1.304-6.083 3.914-1.523 2.61-2.285 6.148-2.285 10.617 0 3.68.637 6.82 1.91 9.43 1.274 2.61 2.903 3.92 4.887 3.92 1.4 0 2.61-.7 3.63-2.1 1.01-1.4 1.52-3.11 1.52-5.14v-3.89h-6.02v-2.79h9.18v16.36h-2.01z" letter-spacing="4.06"/>
      <path id="path3980" d="M28.974.54h3.21v29.95h12.142v2.742H28.974z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" letter-spacing="4.62" font-family="Abadi MT Condensed Light"/>
      <path id="path3982" d="M61.836 0c3.156 0 5.71 1.523 7.664 4.57 1.953 3.047 2.93 7.328 2.93 12.844 0 4.953-1.008 8.914-3.023 11.883-2.016 2.97-4.58 4.453-7.688 4.453-3.18 0-5.75-1.465-7.74-4.395C51.99 26.425 51 22.367 51 17.18c0-5.282.96-9.465 2.883-12.55C55.813 1.542 58.46 0 61.835 0zm.14 2.906c-2.624 0-4.558 1.332-5.8 3.996-1.242 2.664-1.863 6.153-1.863 10.465 0 4.078.648 7.332 1.945 9.762 1.297 2.43 3.094 3.64 5.39 3.64 2.33 0 4.15-1.25 5.462-3.75 1.312-2.5 1.968-5.9 1.968-10.2 0-4.67-.69-8.16-2.074-10.47-1.384-2.3-3.058-3.46-5.027-3.46z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" letter-spacing="4.62" font-family="Abadi MT Condensed Light"/>
      <path id="path3984" d="M81.456.54h8.672c2.547 0 4.59.628 6.13 1.886 1.538 1.258 2.308 3.152 2.308 5.683 0 1.81-.454 3.36-1.36 4.64-.906 1.28-2.273 2.3-4.1 3.07 2.577.23 4.51 1.01 5.8 2.33s1.933 3.18 1.933 5.59c0 1.84-.39 3.42-1.15 4.74-.77 1.32-1.91 2.44-3.44 3.36-1.53.92-3.37 1.38-5.52 1.38h-9.28zm3.164 2.765v11.46h3.563c2.22 0 3.957-.546 5.215-1.64 1.257-1.094 1.886-2.664 1.886-4.71 0-1.704-.51-2.98-1.535-3.833-1.03-.852-2.56-1.277-4.61-1.277zm0 14.203v12.984h5.274c2.437 0 4.316-.625 5.636-1.875 1.32-1.25 1.98-2.937 1.98-5.062 0-2.125-.71-3.664-2.132-4.617-1.422-.954-3.617-1.43-6.586-1.43z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" letter-spacing="4.62" font-family="Abadi MT Condensed Light"/>
      <path id="path3986" d="M115.56.54h3.14l9.118 32.694h-3.562l-2.766-11.296h-8.695l-2.742 11.296h-3.492zm1.524 3.983L113.45 19.29h7.337z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" letter-spacing="4.62" font-family="Abadi MT Condensed Light"/>
      <path id="path3988" d="M135.485.54h3.21v29.95h12.142v2.742h-15.352z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" letter-spacing="4.62" font-family="Abadi MT Condensed Light"/>
      <path id="path3990" d="M23.367 39.42h3.28L20.72 72.113h-3.095l-3.47-21.773-.796-6.14c-.5 4.047-.93 7.164-1.29 9.352L9.04 72.114H6L0 39.42h3.516L6.54 59.27c.093.594.265 1.938.515 4.032.078.734.242 1.937.492 3.61l.797-5.93c.093-.922.187-1.657.28-2.204l3.048-19.36h3.117l3.35 19.853 1.08 7.64 1.07-7.64z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path3992" d="M35.672 39.42h3.14l9.118 32.694h-3.563l-2.765-11.296h-8.696l-2.742 11.296h-3.492zm1.523 3.983L33.563 58.17h7.335z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path3994" d="M50.977 39.42h7.875c2.843 0 5.128.65 6.855 1.956 1.727 1.305 2.59 3.293 2.59 5.965 0 2.02-.543 3.77-1.63 5.24-1.085 1.48-2.776 2.59-5.073 3.34 1.578.41 2.746 1.11 3.504 2.1.757.99 1.332 2.45 1.722 4.37l1.922 9.73h-3.398l-1.29-7.87c-.42-2.5-1.128-4.3-2.12-5.41-.993-1.11-2.426-1.66-4.3-1.66h-3.54v14.95h-3.117zm3.117 2.858v12.235h3.258c2.312 0 4.18-.613 5.6-1.84 1.423-1.227 2.134-2.887 2.134-4.98 0-1.813-.508-3.168-1.523-4.067-1.016-.898-2.54-1.348-4.57-1.348z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path3996" d="M76.828 39.42l7.055 18 7.008-18h3.82v32.694h-2.88v-20.86l.03-5.366c0-.672-.01-1.672-.02-3-.56 2.14-1.31 4.437-2.25 6.89l-5.7 14.836-4.83-12.468c-.93-2.407-2.05-5.4-3.35-8.977.21 7.04.31 10.96.31 11.74v17.2h-3.03V39.42z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path3998" d="M100.992 39.42h3.188v32.694h-3.188z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path4000" d="M113.555 39.42l9.68 21.773 2.53 5.742c-.17-5.875-.257-8.914-.257-9.118V39.42h2.836v32.694h-3.188l-9.375-20.976c-.26-.594-.76-1.86-1.5-3.797l-1.12-2.88c-.04.66-.07 1.04-.07 1.15l.12 2.53.03 3.64-.07 1.41v18.93h-2.83v-32.7z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
      <path id="path4002" d="M148.008 68.903c-.735 1.235-1.567 2.164-2.496 2.79-.93.624-1.957.937-3.082.937-1.782 0-3.46-.742-5.04-2.227-1.578-1.484-2.734-3.54-3.468-6.164-.735-2.63-1.102-5.35-1.102-8.16 0-5.21 1.078-9.37 3.235-12.51 2.156-3.14 4.968-4.7 8.437-4.7 1.953 0 3.96.67 6.024 2.01v3.932c-2.14-2.015-4.172-3.023-6.094-3.023-2.53 0-4.56 1.304-6.082 3.914-1.524 2.61-2.285 6.15-2.285 10.616 0 3.67.636 6.81 1.91 9.42 1.273 2.61 2.902 3.92 4.887 3.92 1.406 0 2.617-.7 3.632-2.1 1.016-1.4 1.524-3.116 1.524-5.147v-3.89h-6.024v-2.79h9.188V72.1h-2.016z" style="-inkscape-font-specification:'Abadi MT Condensed Light,'" font-family="Abadi MT Condensed Light"/>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                html, body {
  height: 100%;
  width:100%;
  background-color:#5166ba;
  overflow:hidden;
}
.wave {
  position: absolute;
  left:0;
  right:0;
  top:120px;
  bottom:0;
  z-index: 1;
}

.wave + .wave {
  z-index: 2;
}

#ertrinken{
  position: absolute;
  top: 15px;
  z-index: 1;
  
}
#mundzu{visibility:hidden;}
#text{
  position: relative;
  top: 90%;
  float: right;
  margin-right: 60px;
  z-index: 10;
}
              
            
!

JS

              
                
/*
*   Wavify - https://codepen.io/peacepostman/pen/jBavvN
*   Jquery Plugin to make some nice waves
*/
(function ( $ ) {

  $.fn.wavify = function( options ) {

    //  Options
    //
    var settings = $.extend({
      container: options.container ? options.container : 'body',
      
      height: 100, // Height of wave
      amplitude: 50, // Amplitude of wave
      speed: .15, // Animation speed
      // Total number of articulation in wave
      bones: 3,
      color: 'rgba(255,255,255, 0.20)'
    }, options );

    var wave = this,
        width = $(settings.container).width(),
        height = $(settings.container).height(),
        points = [],
        lastUpdate,
        totalTime = 0;

    //  Set color
    //
    TweenLite.set(wave, {attr:{fill: settings.color}});


    function drawPoints(factor) {
      var points = [];

      for (var i = 0; i <= settings.bones; i++) {
        var x = i/settings.bones * width;
        var sinSeed = (factor + (i + i % settings.bones)) * settings.speed * 100;
        var sinHeight = Math.sin(sinSeed / 100) * settings.amplitude;
        var yPos = Math.sin(sinSeed / 100) * sinHeight  + settings.height;
        points.push({x: x, y: yPos});
      }

      return points;
    }

    function drawPath(points) {
      var SVGString = 'M ' + points[0].x + ' ' + points[0].y;

      var cp0 = {
        x: (points[1].x - points[0].x) / 2,
        y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
      };

      SVGString += ' C ' + cp0.x + ' ' + cp0.y + ' ' + cp0.x + ' ' + cp0.y + ' ' + points[1].x + ' ' + points[1].y;

      var prevCp = cp0;
      var inverted = -1;

      for (var i = 1; i < points.length-1; i++) {
        var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
        var cp1 = {
          x: (points[i].x - prevCp.x) + points[i].x,
          y: (points[i].y - prevCp.y) + points[i].y
        };

        SVGString += ' C ' + cp1.x + ' ' + cp1.y + ' ' + cp1.x + ' ' + cp1.y + ' ' + points[i+1].x + ' ' + points[i+1].y;
        prevCp = cp1;
        inverted = -inverted;
      }

      SVGString += ' L ' + width + ' ' + height;
      SVGString += ' L 0 ' + height + ' Z';
      return SVGString;
    }

    //  Draw function
    //
    //
    function draw() {
      var now = window.Date.now();

      if (lastUpdate) {
        var elapsed = (now-lastUpdate) / 1000;
        lastUpdate = now;

        totalTime += elapsed;

        var factor = totalTime*Math.PI;
        TweenMax.to(wave, settings.speed, {
          attr:{
            d: drawPath(drawPoints(factor))
          },
          ease: Power1.easeInOut
        });

      } else {
        lastUpdate = now;
      }

      requestAnimationFrame(draw);
    }

    //  Pure js debounce function to optimize resize method
    //
    //
    function debounce(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
      };
    }

    //  Redraw for resize with debounce
    //
    var redraw = debounce(function() {
      wave.attr('d', '');
      points = [];
      totalTime = 0;
      width = $(settings.container).width();
      height = $(settings.container).height();
      lastUpdate = false;
      setTimeout(function(){
        draw();
      }, 50);
    }, 250);
    $(window).on('resize', redraw);


    //  Execute
    //
    return draw();

  };

}(jQuery));


$('#feel-the-wave').wavify({
  height: 10,
  bones: 6,
  amplitude: 10,
  color: 'rgba(12, 12, 44, 0.57)',
  speed: .15
});

$('#feel-the-wave-two').wavify({
  height: 20,
  bones: 5,
  amplitude: 10,
  color: 'rgba(18, 31, 71, 0.69)',
  speed: .3
});

var ertrinken  = new TimelineLite()
.to("#mundauf",1, {morphSVG:"#mundzu", repeat:-1, repeatDelay:0.5, yoyo:true, ease: Power3.easeIn });

TweenMax.to(".wave",20, {y:-45});

var action = new TimelineMax()
.to("#text",10, {y:-300, ease: Power4.easeIn})
.to("#text3829",2, {fill:'red'},8)

              
            
!
999px

Console