JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="pulse">

</div>

SCSS

body {
  background: blue;
}

$w : 180px;
$h : 98px;
$strokeWidth : 3px;
$strokeColor : #ea2f25;
$svg: "%3Csvg width='100%25' height='100%25' viewBox='0 0 235 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMin slice'%3E%3Cpolyline fill='none' stroke-width='" + $strokeWidth + "' stroke='" + $strokeColor + "' 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 '/%3E%3C/svg%3E";

.pulse {
    width: $w;
    height: $h;
    margin: 95px auto 0;
    overflow: hidden;
    position: relative;
    
}
.pulse::after {
        background: rgba(0,0,0,0) url("data:image/svg+xml;utf8,%3Csvg width='100%25' height='100%25' viewBox='0 0 235 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMin slice'%3E%3Cpolyline fill='none' stroke-width='3px' stroke='#ea2f25' 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 '/%3E%3C/svg%3E") no-repeat 0 0;
        background-size: 100% 100%;
        clip: rect(auto, auto, auto, auto);
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    
    @-webkit-keyframes pulse{
  0%   { clip: rect(0, 0,      $h, 0); }
  10%  { clip: rect(0, $w/3,   $h, 0); }
  38%  { clip: rect(0, $w/1.5, $h, 0); }
  48%  { clip: rect(0, $w,     $h, 0); }
  
  52%  { clip: rect(0, $w, $h, 0); }
  62%  { clip: rect(0, $w, $h, $w/3); }
  90%  { clip: rect(0, $w, $h, $w/1.5); }
  100% { clip: rect(0, $w, $h, $w); }
}
@keyframes pulse{
  0%   { clip: rect(0, 0,      $h, 0); }
  10%  { clip: rect(0, $w/3,   $h, 0); }
  38%  { clip: rect(0, $w/1.5, $h, 0); }
  48%  { clip: rect(0, $w,     $h, 0); }
  
  52%  { clip: rect(0, $w, $h, 0); }
  62%  { clip: rect(0, $w, $h, $w/3); }
  90%  { clip: rect(0, $w, $h, $w/1.5); }
  100% { clip: rect(0, $w, $h, $w); }
}