HTML
<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>
SCSS
$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;
}
}
