raVvaO

index.html

<div class="heartbeat">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 100" enable-background="new 0 0 200 100" xml:space="preserve">
    <polyline id="high-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="450 450" stroke-dashoffset="450" data-time="0.25" points="2.4,58.7 70.8,58.7 76.1,37.2 81.1,58.7 89.9,58.7 93.8,70.5 102.8,2.7 110.6,98.7 115.3,58.7 126.4,58.7 134.4,48.7 142.4,58.7 197.8,58.7 "/>
    <polyline id="medium-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="380 380" stroke-dashoffset="380" data-time="0.3" points="2.4,58.7 70.8,58.7 76.1,42.2 81.1,58.7 89.9,58.7 93.8,70.5 102.8,12.7 110.6,88.7 115.3,58.7 
	126.4,58.7 134.4,52.7 142.4,58.7 197.8,58.7 "/>
    <polyline id="low-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="320 320" stroke-dashoffset="320" data-time="0.35" points="2.4,58.7 70.8,58.7 76.1,46.2 81.1,58.7 89.9,58.7 93.8,66.5 102.8,22.7 110.6,78.7 115.3,58.7 
	126.4,58.7 134.4,54.7 142.4,58.7 197.8,58.7 "/>
    <polyline id="lower-pulse" fill="none" stroke="white" stroke-width="4" stroke-miterlimit="0" stroke-dasharray="280 280" stroke-dashoffset="280" data-time="0.4" points="2.4,58.7 70.8,58.7 76.1,51.2 81.1,58.7 89.9,58.7 93.8,64.5 102.8,32.7 110.6,74.7 115.3,58.7 
	126.4,58.7 134.4,55.7 142.4,58.7 197.8,58.7 "/>
    <line opacity="0.2" fill="none" stroke="white" stroke-width="4" x1="2.4" y1="58.7" x2="197.8" y2="58.7"/>
  </svg>
</div>

raVvaO.markdown

raVvaO

A Pen by Matteo Belfiore on CodePen.

License.

script.js

//var beatsOrder = ['lower', 'low', 'medium', 'high'];
var beatsOrder = ['high', 'medium', 'low', 'lower'];
var pressure   = 0;
var current    = undefined;
var offset     = undefined;
var animTime   = undefined;

[].forEach.call(document.querySelectorAll('polyline'), function(poly) {
  poly.style.strokeDasharray = poly.getAttribute('stroke-dasharray');
  poly.style.strokeDashoffset = poly.getAttribute('stroke-dashoffset');
  poly.style.transition = poly.style.WebkitTransition = 'none';
});

var tl = new TimelineMax( { repeat: 2, onComplete: function() {
  if (pressure < beatsOrder.length - 1) {
    TweenMax.killTweensOf(current.style);
    tl.clear();
    setValues(document.querySelector('#' + beatsOrder[++pressure] + '-pulse'));
    pulse(current.style, animTime, offset);
  } else {
    tl.restart();
  }
} } );

setValues(document.querySelector('#' + beatsOrder[pressure] + '-pulse'));
pulse(current.style, animTime, offset);

function setValues(el) {
  current  = el;
  offset   = el.getAttribute('stroke-dashoffset');
  animTime = el.getAttribute('data-time');
};

function pulse(el, time, off) {
  tl.add( TweenMax.to(el, time, { strokeDashoffset: (off*0.84), ease: 'linear' }) )
    .add( TweenMax.to(el, time, { strokeDashoffset: (off*0.14), ease: 'linear' }) )
    .add( TweenMax.to(el, time, { strokeDashoffset: 0, ease: 'linear' }) )
    .add( TweenMax.to(el, time*1.5, { strokeDashoffset: -(off), ease: "linear" } ) )
};

style.css

body {
  background-color: #212121;
}

.heartbeat {
  width: 200px;
  height: 100px;
  transform: scale(0.5);
}