SVG Triangle Animation

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); } }
JAVASCRIPT
Expand for more options Login