Animated Waves using SVG

Animated Waves using SVG

by Ying Chor Ding

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/jquery.wavify.js"></script>

<body>
<section>

<h2>Wavy Background</h2>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs></defs><path id="myID" d=""/></svg>
</section>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  background: #111;
  justify-content: center;
  align-items: center;
}
section h2 {
  position: relative;
  font-size: 6em;
  color: #fff;
}
section svg {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var myWave = $('#myID').wavify({
  height: 20,
  bones: 3,
  amplitude: 80,
  color: 'rgba(150, 97, 255, .8)',
  speed: .25
});