Inspired by https://glass.eleks.com/
A bit off in Safari.
Forked from Sean McCaffery's Pen SVG Animation.
A Pen by James Sterling on CodePen.
<div class="svg-wrapper"> | |
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<svg class='shape' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
viewBox="0 0 313.8 159.5" enable-background="new 0 0 313.8 159.5" xml:space="preserve"> | |
<polygon class='yellow' fill="#FFCF2B" points="205.9,58.2 22.4,135.5 261.5,72.3 "/> | |
<polygon class='green' fill="#00C081" points="162.8,47.3 22.4,135.5 206.1,58.3 "/> | |
<polygon class='shadow' fill="#BBBDBF" points="22.4,135.5 220.7,112.3 293.1,135.6 "/> | |
<polygon class='blue' fill="#0076BF" points="273.7,31.8 151.6,18.5 22.3,135.5 162.9,47.4 206.1,58.3 "/> | |
<path fill="none" stroke="#90C364" stroke-miterlimit="10" d="M275.6,31.1"/> | |
<path fill="none" stroke="#90C364" stroke-miterlimit="10" d="M22.4,135.5"/> | |
</svg> | |
</div> |
html, body { | |
background: #f2f2f2; | |
height: 100%; | |
overflow: hidden; | |
text-align: center; | |
} | |
.svg-wrapper { | |
height: 0px; | |
margin: 0 auto; | |
position: relative; | |
top: 20%; | |
width: 320px; | |
background: #E0E0E0; | |
} | |
.yellow { | |
fill: transparent; | |
stroke-width: 2px; | |
stroke-dashoffset: 0; | |
stroke-dasharray: 10 40; | |
stroke: #FFCF2B; | |
animation: 3s .2s draw-yellow infinite; | |
} | |
.blue { | |
fill: transparent; | |
stroke-width: 2px; | |
stroke-dashoffset: 40; | |
stroke-dasharray: 100 40; | |
stroke: #0076BF; | |
animation: 3s .1s draw-blue infinite; | |
} | |
.green { | |
fill: transparent; | |
stroke-width: 2px; | |
stroke-dashoffset: 0; | |
stroke-dasharray: 10 40; | |
stroke: #00C081; | |
animation: 3s .3s draw-green infinite; | |
} | |
.shadow { | |
/* fill: transparent; | |
stroke-width: 2px; | |
stroke-dashoffset: -110; | |
stroke-dasharray: 10 40; | |
stroke: #BBBDBF;*/ | |
animation: 3s .5s draw-shadow infinite; | |
} | |
@keyframes draw-yellow { | |
0% { | |
stroke-dasharray: 0 540; | |
stroke-dashoffset: -75; | |
} | |
50% { | |
fill: #FFCF2B; | |
stroke-dasharray: 760; | |
stroke-dashoffset: 0; | |
} | |
100% { | |
fill: transparent; | |
stroke-dasharray: 0 540; | |
stroke-dashoffset: 5; | |
} | |
} | |
@keyframes draw-blue { | |
0% { | |
stroke-dasharray: 0 540; | |
stroke-dashoffset: -75; | |
} | |
50% { | |
fill: #0076BF; | |
stroke-dasharray: 760; | |
stroke-dashoffset: 0; | |
} | |
100% { | |
fill: transparent; | |
stroke-dasharray: 0 540; | |
stroke-dashoffset: -45; | |
} | |
} | |
@keyframes draw-green { | |
0% { | |
stroke-dasharray: 140 540; | |
stroke-dashoffset: -75; | |
} | |
50% { | |
fill: #00C081; | |
stroke-dasharray: 760; | |
stroke-dashoffset: 0; | |
} | |
100% { | |
fill: transparent; | |
stroke-dasharray: 0 540; | |
stroke-dashoffset: -175; | |
} | |
} | |
@keyframes draw-shadow { | |
/* 0% { | |
stroke-dasharray: 140 800; | |
stroke-dashoffset: -600; | |
} | |
50% { | |
fill: #BBBDBF; | |
stroke-dasharray: 1060; | |
stroke-dashoffset: 130; | |
} | |
100% { | |
fill: transparent; | |
stroke-dasharray: 0 860; | |
stroke-dashoffset: 300; | |
}*/ | |
0% { | |
fill: transparent; | |
} | |
35% { | |
fill: #BBBDBF; | |
} | |
100% { | |
fill: transparent; | |
} | |
} |
Inspired by https://glass.eleks.com/
A bit off in Safari.
Forked from Sean McCaffery's Pen SVG Animation.
A Pen by James Sterling on CodePen.