<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 425 245" class="notification">
  <g class="lines">
    <polyline class="line line--1" points="27.2,174.6 57.7,140.8 93.7,192.6 136.7,89 190.2,214.8 238,59.6 273.2,123.5" />
    <polyline class="line line--2" points="27.2,174.6 57.7,140.8 93.7,192.6 136.7,89 190.2,214.8 238,59.6 273.2,123.5" />
    <polyline class="line line--3" points="27.2,174.6 57.7,140.8 93.7,192.6 136.7,89 190.2,214.8 238,59.6 273.2,123.5" />
    <polyline class="line line--4" points="27.2,174.6 57.7,140.8 93.7,192.6 136.7,89 190.2,214.8 238,59.6 273.2,123.5" />
  </g>
  <g class="bursts">
    <line class="burst burst--1" x1="340.9" y1="160.7" x2="340.9" y2="82.5" />
    <line class="burst burst--2" x1="263.9" y1="96.1" x2="340.9" y2="82.5" />
    <line class="burst burst--3" x1="290.7" y1="142.4" x2="340.9" y2="82.5" />
    <line class="burst burst--4" x1="391.2" y1="142.4" x2="340.9" y2="82.5" />
    <line class="burst burst--5" x1="417.9" y1="96.1" x2="340.9" y2="82.5" />
    <line class="burst burst--6" x1="408.6" y1="43.4" x2="340.9" y2="82.5" />
    <line class="burst burst--7" x1="367.6" y1="9" x2="340.9" y2="82.5" />
    <line class="burst burst--8" x1="273.2" y1="43.4" x2="340.9" y2="82.5" />
    <line class="burst burst--9" x1="314.2" y1="9" x2="340.9" y2="82.5" />
  </g>
  <g class="circles">
    <path class="circle circle--1" d="M340.9,115.9c-18.5,0-33.5-15-33.5-33.5s15-33.5,33.5-33.5s33.5,15,33.5,33.5 c0,14.7-9.5,27.2-22.6,31.7" />
    <path class="circle circle--2" d="M340.9,115.9c-18.5,0-33.5-15-33.5-33.5s15-33.5,33.5-33.5s33.5,15,33.5,33.5 c0,14.7-9.5,27.2-22.6,31.7" />
    <path class="circle circle--3 circle--thick" d="M340.9,115.9c-18.5,0-33.5-15-33.5-33.5s15-33.5,33.5-33.5s33.5,15,33.5,33.5 c0,14.7-9.5,27.2-22.6,31.7" />
    <path class="circle circle--4 circle--filled" d="M340.9,123.9c-22.9,0-41.5-18.6-41.5-41.5s18.6-41.5,41.5-41.5s41.5,18.6,41.5,41.5 S363.7,123.9,340.9,123.9z" />
  </g>
</svg>

$bg: #333333;
$colors: #515151, #00b5ef, #ec4989, #ffffff;
$start: 0;
$end: 100;
$opacityDuration: 1;
$strokeDelay: 10;

html {
  background-color: $bg;
}

/*svg*/.notification {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 100px auto;
}

.line,
.circle,
.burst {
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

/*polyline*/.line {
  fill: none;
  stroke-width: 32;
  stroke-dasharray: 800;
  stroke-dashoffset: 1000;

  @for $i from 1 through 4 {
    &--#{$i} {
      animation-name: lineDraw--#{$i};
      stroke: nth( $colors, $i );
    }
  }
}

/*path*/.circle {
  fill: none;
  stroke: nth( $colors, 1 );
  stroke-width: 4;
  stroke-dasharray: 800;
  stroke-dashoffset: 1000;
  transform-origin: center center;
  
  &:nth-of-type( 2 ) {
    stroke: nth( $colors, 2 );
  }
  
  &--thick {
    stroke-width: 9;
    stroke: nth( $colors, 4 );
  }
  
  &--filled {
    transform: scale( 0 );
    stroke-width: 0;
    fill: nth( $colors, 3 );
  }
  
  @for $i from 1 through 4 {
    &--#{$i} {
      animation-name: circleDraw--#{$i};
    }
  }
}

/*line*/.burst {
  stroke: nth( $colors, 4 );
  stroke-width: 4;
  animation-name: burstDraw;
  stroke-dasharray: 8, 800;
  stroke-dashoffset: -80;
}

/**
 * Keyframe animations for the lines:
 */
@for $i from 0 through 3 {
  $frame1: $start;
  $frame2: $opacityDuration + $i;
  $frame3: $frame2 + $strokeDelay;
  $frame6: $end - $i;
  $frame4: $frame6 - $strokeDelay;
  $frame5: $frame6 - $opacityDuration;
  
  @keyframes lineDraw--#{$i + 1} {
    #{$frame1}% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    
    #{$frame2}% {
      stroke-dashoffset: 1000;
      opacity: 1;
    }
    
    #{$frame3}%,
    #{$frame4}% {
      stroke-dashoffset: 0;
    }
    
    #{$frame5}% {
      opacity: 1;
    }
    
    #{$frame6}% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    
  }
}

/**
 * Keyframe animations for the circles:
 */
@for $i from 0 through 3 {
  $circleDelay: 6;
  $frame1: $start;
  $frame2: $opacityDuration + $i + $circleDelay;
  $frame3: $frame2 + $strokeDelay;
  $frame6: $end - $i - $circleDelay;
  $frame4: $frame6 - $strokeDelay;
  $frame5: $frame6 - $opacityDuration;
  
  @keyframes circleDraw--#{$i + 1} {
    #{$frame1}% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    
    #{$frame2}% {
      stroke-dashoffset: 1000;
      opacity: 1;
    }
    
    #{$frame3}%,
    #{$frame4}% {
      stroke-dashoffset: 0;
    }
    
    #{$frame5}% {
      opacity: 1;
    }
    
    #{$frame6}% {
      stroke-dashoffset: 1000;
      opacity: 0;
    }
    
  }
}

/**
 * Keyframe animations for the solid circle:
 */
@keyframes circleDraw--4 {
  0% {
    transform: scale( 0 );
  }
  
  8% {
    transform: scale( 0 );
  }
  
  10.5% {
    transform: scale( 1 );
  }
  
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75% {
    transform: scale( 1 );
  }
  
  20%,
  30%,
  40%,
  50%,
  60%,
  70% {
    transform: scale( 1.1 );
  }
  
  87.5% {
    transform: scale( 1.1 );
  }
  
  90%,
  100% {
    transform: scale( 0 );
  }
}

/**
 * Keyframe animations for the bursts:
 */
@keyframes burstDraw {
  0%,
  8% {
    stroke-dasharray: 8, 800;
    stroke-dashoffset: -80;
  }
  
  12%,
  100% {
    stroke-dashoffset: 10;
  }
}