JSFiddle - React, Tailwind, and code Playground

demo with line

by Travis Almand

HTML

<div id="screen">
  <div id="panel">
    <svg class="left-svg" viewBox="0 0 200 200">
      <circle class="path" cx="100" cy="100" r="90"/>
    </svg>
    <svg class="left-svg left-svg-top" viewBox="0 0 200 200">
      <circle class="path" cx="100" cy="100" r="90"/>
    </svg>
    <svg class="center-svg" viewBox="0 0 140 140">
      <path class="path" d="M 0 70 L 140 70" />
    </svg>
    <svg class="right-svg" viewBox="0 0 200 200">
      <circle class="path" cx="100" cy="100" r="90"/>
    </svg>
    <svg class="right-svg right-svg-top" viewBox="0 0 200 200">
      <circle class="path" cx="100" cy="100" r="90"/>
    </svg>
    <div id="check">
      <div class="first"></div>
      <div class="second"></div>
    </div>
  </div>
</div>

SCSS

// blue : #0097D1
// yellow : #FFC800

#screen {
  background-image: url(https://s3.amazonaws.com/uploads.hipchat.com/11887/3806654/INGtrGBUpmvtYAN/Screen%20Shot%202017-02-06%20at%203.52.38%20PM.png);
  height: 834px;
  margin: 20px auto;
  position: relative;
  width: 472px;
}
#panel {
  background-color: #fff;
  height: 146px;
  left: 4px;
  position: absolute;
  top: 304px;
  width: 461px;
  
  svg {
    fill: #fff;
    height: 148px;
    position: absolute;
    stroke-width: 14px;
    top: 0;
    width: 148px;
    
    &.left-svg {
      left: 25px;
      z-index: 4;
      
      .path {
        stroke: gainsboro;
      }
      &.left-svg-top .path {
        fill: transparent;
        stroke: #0097D1;
        stroke-dasharray: 565;
        stroke-dashoffset: -565;
      }
    }
    &.center-svg {
      left: 160px;
      width: 140px;
      z-index: 3;
      
      .path {
        stroke: #0097D1;
        stroke-dasharray: 140;
        stroke-dashoffset: 140;
      }
    }
    &.right-svg {
      right: 25px;
      z-index: 2;

      .path {
        stroke: gainsboro;
      }
      &.right-svg-top {
        transform: rotate(180deg);
        
        .path {
          fill: transparent;
          stroke: #FFC800;
          stroke-dasharray: 565;
          stroke-dashoffset: 565;
        }
      }
    }
  }
  
  &.animate {
    .left-svg-top .path {
      stroke-dashoffset: 0 !important;
      transition: all 0.5s ease-in;
    }
    .center-svg .path {
      stroke: #FFC800;
      stroke-dashoffset: -140;
      transition: stroke-dashoffset 0.75s 0.55s ease-in, stroke 0.45s 0.75s linear;
    }
    .right-svg-top .path {
      stroke-dashoffset: 0 !important;
      transition: all 0.5s 1.25s ease-in;
    }
    
    .first:before {
      transform: scaleY(1);
      transition: transform 0.25s 2s;
    }
    .second:before {
      transform: scaleY(1);
      transition: transform 0.25s 2.25s;
    }
  }
}

#check {
  display: block;
  height: 55px;
  margin-bottom:...

JavaScript

var $screen = document.querySelector('#screen');
var $panel = document.querySelector('#panel');

$screen.addEventListener('click', function () {
	$panel.classList.remove('animate');
  window.setTimeout(function () {
	  $panel.classList.add('animate');
  }, 100);
});