HTML
<svg id="triangle" width="300px" height="300px" viewBox="-3 -4 39 39">
<polygon fill="rgba(52, 152, 219, .3)" stroke="#2980b9" stroke-width="1" points="16,0 32,32 0,32"></polygon>
</svg>
CSS
html, body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/dark_wall.png');
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
svg {
transform-origin: 50% 50%;
animation: rotate 10s linear infinite;
}
svg polygon {
stroke-dasharray: 17;
animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}
@keyframes dash {
to { stroke-dashoffset: 136; }
}
@keyframes rotate {
0% { transform: scale(1); }
50% { transform: scale(2); }
100% { transform: scale(1); }
}
