Octagram Swirl

HTML
<svg height = "400" width = "400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class = "colorA" d="M200 200 L200 100 L270.71 29.29 270.71 129.29 Z" /> <path class = "colorB" d = "M200 200 L270.71 129.29 L370.71 129.29 L300 200 Z"/> <path class = "colorA" d = "M200 200 L300 200 L370.71 270.71 L270.71 270.71 Z "/> <path class = "colorB" d = "M200 200 L270.71 270.71 L270.71 370.71 L200 300 Z "/> <path class = "colorA" d = "M200 200 L129.29 270.71 L129.29 370.71 L200 300 Z"/> <path class = "colorB" d = "M200 200 L100 200 L29.29 270.71 L129.29 270.71 Z"/> <path class = "colorA" d = "M200 200 L129.29 129.29 L29.29 129.29 L100 200 Z"/> <path class = "colorB" d = "M200 200 L200 100 L129.29 29.29 L129.29 129.29 Z"/> </svg>
SCSS
$colorA: rgb(12,94,138); $colorB: rgb(242,0,86); $colorC: rgb(0,200,200); body { background: #000; } svg { display: block; margin: auto; stroke-width: 3; fill: none; } .colorA { stroke: $colorA; } .colorB { stroke: $colorB; } .colorA, .colorB { animation: rot 5s linear infinite; transform-origin: center center; } @keyframes rot { to { transform: rotate(360deg); stroke: $colorC; } }
JAVASCRIPT
Expand for more options Login