<a href="#" class="replay">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.166,49.438C0.166,75.152,20.744,96,46.125,96  c12.096,0,23.1-4.731,31.306-12.469c2.144-2.021-8.776-12.227-10.269-10.84c-5.54,5.146-12.926,8.286-21.037,8.286  c-17.193,0-31.133-14.122-31.133-31.544s13.939-31.545,31.133-31.545c17.197,0,31.135,11.108,31.135,28.53  c0,0.007,0.021,0.062,0.049,0.069L75.778,48c-3.484,0-5.931,0-5.931,0l14.826,18.023L99.5,48c0,0-2.447,0-5.931,0l-1.531-1.514  c0.017-0.006,0.05-0.015,0.05-0.021c0-25.716-20.578-43.574-45.963-43.574C20.744,2.891,0.166,23.723,0.166,49.438z M78.743,44.933  l0.115,0.023l-0.089,0.086C78.754,44.977,78.743,44.933,78.743,44.933z"></path></svg>
</a>
<svg id="Automate-SVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 414.7 279.5" xml:space="preserve">
  <defs>
    <linearGradient id="Automate-centerDropletGradient" gradientUnits="userSpaceOnUse" x1="212.0934" y1="163.8976" x2="241.0881" y2="134.9028">
      <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
      <stop offset="1" style="stop-color:#FFFFFF"/>
    </linearGradient>
    <linearGradient id="Automate-boxGradient" gradientUnits="userSpaceOnUse" x1="288.6301" y1="84.5736" x2="156.7062" y2="216.4975">
      <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
      <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
    </linearGradient>
  </defs>
  <style type="text/css">
    .Automate-line {
      fill: none;
      stroke: #FFFFFF;
      stroke-miterlimit: 10;
    }
    .Automate-greenLine {
      fill: none;
      stroke: #00D688;
      stroke-width: 2;
      stroke-miterlimit: 10;
    }
    .Automate-box {
      fill: url(#Automate-boxGradient);
    }
    .Automate-lineBackground {
      opacity: 0.4;
    }
    .Automate-centerDroplet {
      fill: url(#Automate-centerDropletGradient);
    }
    .Automate-boxBorder {
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-miterlimit: 10;
    }
    .Automate-point {
      fill: #FFFFFF;
    }
    .Automate-innerBoxBorder {
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-miterlimit: 10;
      stroke-dasharray: 0,3.912;
    }
    .Automate-terminalRadarCircle {
      opacity: 0.3;
      fill: #FFFFFF;
    }
    .Automate-terminalRadarBorder {
      fill: none;
      stroke: #00D688;
      stroke-miterlimit: 10;
    }
    .Automate-droplet {
      fill: none;
      stroke: #FFFFFF;
      stroke-width: 1.5;
      stroke-miterlimit: 10;
    }
  </style>
  <g id="Automate-terminal">
    <rect x="0.5" y="6.8" transform="matrix(-1 8.699828e-11 -8.699828e-11 -1 81.5599 71.0249)" class="Automate-line" width="80.6" height="57.5"/>
    <line class="Automate-greenLine" x1="13.1" y1="19.4" x2="25.2" y2="19.4"/>
    <line class="Automate-greenLine" x1="31.7" y1="19.4" x2="53.2" y2="19.4"/>
    <line class="Automate-greenLine" x1="13.1" y1="24.7" x2="44.9" y2="24.7"/>
    <line class="Automate-greenLine" x1="13.1" y1="30.5" x2="38.3" y2="30.5"/>
    <line class="Automate-greenLine" x1="44.9" y1="30.5" x2="53.2" y2="30.5"/>
    <line class="Automate-greenLine" x1="13.1" y1="40.5" x2="31.8" y2="40.5"/>
    <line class="Automate-greenLine" x1="13.1" y1="46.3" x2="25.2" y2="46.3"/>
    <line class="Automate-greenLine" x1="31.7" y1="46.3" x2="46.1" y2="46.3"/>
    <line class="Automate-greenLine" x1="13.1" y1="52.1" x2="38.3" y2="52.1"/>
    <line class="Automate-greenLine" x1="44.9" y1="52.1" x2="53.2" y2="52.1"/>
    <line class="Automate-boxBorder" x1="0.6" y1="1" x2="3.6" y2="1"/>
    <line class="Automate-boxBorder" x1="6.6" y1="1" x2="9.6" y2="1"/>
    <line class="Automate-boxBorder" x1="12.6" y1="1" x2="15.6" y2="1"/>
  </g>
  <path class="Automate-box" d="M226.6,40.6l-91,53v106.1l91,53l91-53V93.6L226.6,40.6z M226.6,175.1c-14.6,0-26.4-11.8-26.4-26.4
    c0-16.3,26.4-34.6,26.4-34.6s26.4,18.2,26.4,34.6C253,163.3,241.2,175.1,226.6,175.1z"/>
  <line id="Automate-lineToBox" class="Automate-greenLine" x1="81.5" y1="64.2" x2="117.9" y2="84.8"/>
  <g class="Automate-lineBackground">
    <polyline class="Automate-line" points="332.3,206.9 226.1,146.4 226.1,24 		"/>
    <line class="Automate-line" x1="119.6" y1="207.4" x2="225.9" y2="146.4"/>
  </g>
  <path class="Automate-centerDroplet" d="M205.9,149.1c0,11.4,9.3,20.7,20.7,20.7c11.4,0,20.7-9.3,20.7-20.7c0-12.8-20.7-27.1-20.7-27.1
  S205.9,136.3,205.9,149.1z"/>
  <polyline class="Automate-boxBorder" points="264.1,246.5 225.3,268.5 118.6,207.5 118.6,85.8 225.3,25 276.4,54.35 	"/>
  <polyline class="Automate-boxBorder" points="331.6,130 331.6,207.5 263,247 	"/>
  <polyline class="Automate-boxBorder" points="276.8,54.6 331.6,85.8 331.6,130 	"/>
  <ellipse id="Automate-boxPointTL" transform="matrix(0.4927 -0.8702 0.8702 0.4927 -13.5216 147.7751)" class="Automate-point" cx="120" cy="85.5" rx="6.2" ry="6.2"/>
  <circle id="Automate-terminalPoint" class="Automate-point" cx="81.4" cy="63.7" r="4"/>
  <g id="Automate-dashedBoxBorder">
    <line class="Automate-boxBorder" x1="225.3" y1="76.1" x2="225.3" y2="76.1"/>
    <line class="Automate-innerBoxBorder" x1="228.7" y1="78.1" x2="284.6" y2="110.4"/>
    <line class="Automate-boxBorder" x1="286.3" y1="111.3" x2="286.3" y2="111.3"/>
    <line class="Automate-innerBoxBorder" x1="286.3" y1="115.3" x2="286.3" y2="179.8"/>
    <line class="Automate-boxBorder" x1="286.3" y1="181.8" x2="286.3" y2="181.8"/>
    <line class="Automate-innerBoxBorder" x1="282.9" y1="183.7" x2="227" y2="216"/>
    <line class="Automate-boxBorder" x1="225.3" y1="217" x2="225.3" y2="217"/>
    <line class="Automate-innerBoxBorder" x1="221.9" y1="215" x2="166" y2="182.7"/>
    <line class="Automate-boxBorder" x1="164.3" y1="181.8" x2="164.3" y2="181.8"/>
    <line class="Automate-innerBoxBorder" x1="164.3" y1="177.9" x2="164.3" y2="113.3"/>
    <line class="Automate-boxBorder" x1="164.3" y1="111.3" x2="164.3" y2="111.3"/>
    <line class="Automate-innerBoxBorder" x1="167.7" y1="109.4" x2="223.6" y2="77.1"/>
  </g>
  <line class="Automate-boxBorder" x1="331.1" y1="85.8" x2="225.9" y2="146.8"/>
  <polyline class="Automate-boxBorder" points="119.3,86.2 225.6,147.3 225.6,267 	"/>
  <g id="Automate-radarCircle">
    <circle class="Automate-terminalRadarCircle" cx="81.2" cy="63.3" r="26.1"/>
    <circle class="Automate-terminalRadarBorder" cx="81.2" cy="63.3" r="26.1"/>
  </g>
  <g class="Automate-dropletGroup Automate-dropletGroup--segment">
    <path class="Automate-droplet" d="M356.8,273.0c0,3-2.5,5.5-5.5,5.5s-5.5-2.5-5.5-5.5c0-3.4,5.5-10,5.5-10S356.8,269.9,356.8,273.3z"/>
    <polyline class="Automate-line" points="286.7,251.5 302.3,242.8 348.1,268.4 	"/>
  </g>
  <g class="Automate-dropletGroup">
    <path class="Automate-droplet" d="M319,269.8c0,2-1.6,3.7-3.7,3.7c-2,0-3.7-1.6-3.7-3.7c0-2.3,3.7-6.6,3.7-6.6S319,267.5,319,269.8z"/>
    <line class="Automate-line" x1="231" y1="219.5" x2="312.8" y2="267"/>
  </g>
  <g class="Automate-dropletGroup Automate-dropletGroup--segment">
    <path class="Automate-droplet" d="M376,180.6c0,2.3-1.9,4.2-4.2,4.2s-4.2-1.9-4.2-4.2c0-2.6,4.2-7.5,4.2-7.5S376,178,376,180.6z"/>
    <polyline class="Automate-line" points="348.1,147 348.1,166 368.9,177.2 	"/>
  </g>
  <g class="Automate-dropletGroup">
    <path class="Automate-droplet" d="M414,182.7c0,2.6-2.1,4.8-4.8,4.8s-4.8-2.1-4.8-4.8c0-3,4.8-8.7,4.8-8.7S414,179.7,414,182.7z"/>
    <line class="Automate-line" x1="290.7" y1="114.1" x2="405.6" y2="179.1"/>
  </g>
  <g class="Automate-dropletGroup">
    <path class="Automate-droplet" d="M317.5,26.8c0,3.1-2.5,5.6-5.6,5.6s-5.6-2.5-5.6-5.6c0-3.5,5.6-10.2,5.6-10.2S317.5,23.3,317.5,26.8z"/>
    <line class="Automate-line" x1="228.7" y1="73.9" x2="307.2" y2="29.9"/>
  </g>
</svg>
//
// Variables
//
$global-margin: 15px;
$global-muted: #a8a8a8;
$global-color: darken($global-muted, 25);
$global-background: #fff;
$global-primary: #0177FA;

html {
  height: 100%;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue",sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  color: $global-color;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  background: linear-gradient(90deg,#0a2688,#0072ff);
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
}

.replay {
  display: inline-block;
  visibility: hidden;
  margin-bottom: ($global-margin * 2);
  
  svg {
    width: 50px;
    fill: $global-background;
    height: 50px;
  }
}
#Automate-SVG {
  max-width: 400px;
  visibility: hidden;
}
View Compiled
TweenMax.set('svg', {
  visibility: 'visible'
});

const tl = new TimelineMax();

tl
// Bounding box w/ Droplet
.from('#Automate-SVG', 1, {
  y: 25,
  opacity: 0
})
// Terminal box
.from('#Automate-terminal rect', 1, {
  drawSVG: '0'
})
// Terminal window management dots
.staggerFrom('#Automate-terminal .Automate-boxBorder', 0.25, {
  opacity: 0,
  y: 5
}, 0.05)
// Terminal lines
.staggerFrom('#Automate-terminal .Automate-greenLine', 0.5, {
  opacity: 0,
  y: 5
}, 0.1)
// Bottom right circle on terminal
.from('#Automate-terminalPoint', 0.25, {
  scale: 0,
  transformOrigin: 'center center'
})
// Line from terminal to box
.from('#Automate-lineToBox', 1, {
  drawSVG: '0'
})
// Top left point on box
.from('#Automate-boxPointTL', 0.25, {
  scale: 0,
  transformOrigin: 'center center'
})
// Lines
.from('.Automate-dropletGroup:not(.Automate-dropletGroup--segment) .Automate-line', 2, {
  drawSVG: '0'
}, 'line-segment')
// Lines (segments)
.from('.Automate-dropletGroup.Automate-dropletGroup--segment .Automate-line', 1, {
  delay: 1,
  drawSVG: '0'
}, 'line-segment')
.from('.Automate-droplet', 0.75, {
  scale: 0,
  transformOrigin: 'center center',
  ease: Elastic.easeOut.config(1, 1)
})
// Replay button
.from('.replay', 0.25, {
  scale: 0
})
// Radar circle on terminal (pulse)
.fromTo('#Automate-radarCircle', 2, {
  scale: 0,
  transformOrigin: 'center center'
}, {
  scale: 1.5,
  opacity: 0,
  transformOrigin: 'center center',
  repeat: -1
});

document.querySelector('.replay').addEventListener('click', (e) => {
  e.preventDefault();
  
  tl.restart();
})
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12