#Codevember 11 - Storm Trooper SVG

HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 560"> <path class="helmet__nose" d="M123.7 364.1c20.3 23.2 48 62.7 52.9 62.7 5 0 82.6-73.5 103.4-73.5s98.4 73.5 103.4 73.5 32.7-39.5 52.9-62.7c2.5-2.8 5-5.9 5.5-9.6.5-3.2-.5-6.3-1.5-9.4-3.7-11.3-11-28-11-28-.4-3.9-4.9-5.7-8.7-6.7-34.3-9.7-66.9-24.9-96.3-45-10.1-6.9-31.2-20.2-31.2-20.2s-9.2-6.7-13.2-5.5c-4-1.2-13.2 5.5-13.2 5.5s-21 13.3-31.2 20.2c-29.4 20.1-62.1 35.3-96.3 45-3.8 1.1-8.2 2.8-8.7 6.7 0 0-7.2 16.7-11 28-1 3-2 6.2-1.5 9.4.7 3.8 3.2 6.8 5.7 9.6z"/> <path class="helmet__skull" d="M548.7 354.3c-1.8-9.3-5.3-18.2-8.9-27-4.1-10.2-8.2-20.5-13.8-30-1.4-2.4-2.9-4.8-3.5-7.5-.5-2.3-.3-4.6-.1-6.9.6-7.9 1.2-15.8 1.9-23.7.2-2.1.3-4.2-.3-6.2-.8-2.5-2.9-4.5-4.4-6.7-2.8-4.1-3.6-9.1-4.3-14-2.2-14.3-4.4-28.5-6.6-42.8-.9-5.7-2.5-12.4-7.8-14.6l-.5.4c.1-4.3.1-8.5-.1-12.8C498 123.8 478 87.3 449.5 61c-28.5-26.3-65-42.9-102.8-51.7C316 2.1 288.3 0 279.4 0c-8.9 0-35.4 2.1-66.2 9.2C175.4 18 138.9 34.6 110.5 61 82 87.3 62 123.8 59.8 162.5c-.2 4.3-.3 8.5-.1 12.8l-.5-.4c-5.3 2.3-6.9 8.9-7.8 14.6-2.2 14.3-4.4 28.5-6.6 42.8-.8 4.9-1.6 9.9-4.3 14-1.5 2.2-3.6 4.1-4.4 6.7-.7 2-.5 4.1-.3 6.2.6 7.9 1.2 15.8 1.9 23.7.2 2.3.4 4.7-.1 6.9-.6 2.7-2.1 5.1-3.5 7.5-5.6 9.5-9.7 19.8-13.8 30-3.5 8.8-7.1 17.7-8.9 27-2.4 12.5-1.5 25.3-.6 38 1.5 20.5 3.4 41.7 13.3 59.6 4.8 8.8 11.4 16.4 17.8 24 13 15.2 26.1 30.5 39.1 45.7 8.7 10.2 17.6 20.5 28.6 28 8.8 6 16.9 10.3 29.7 10.3s111.1-34.8 140.7-34.8S409.8 560 420.7 560c10.9 0 20.9-4.3 29.7-10.3 11.1-7.6 19.9-17.9 28.6-28 13-15.2 26.1-30.5 39.1-45.7 6.5-7.6 13-15.3 17.8-24 9.9-18 11.8-39.2 13.3-59.6 1-12.8 1.9-25.6-.5-38.1zM57.4 236.6c2-8.8 4-17.6 6.2-26.4.7 3.8 1.3 7.7 2 11.5l2-1.4c59.1-12.2 119.8-14.8 180.1-17.3 19.9-.8 19.5-1.3 31.6-1.3s21.9.8 32.9 1.3c60.3 2.6 121 5.1 180.1 17.3l2 1.4c.7-3.8 1.4-7.6 2-11.5 2.2 8.8 4.2 17.6 6.2 26.4.5 2.3 1 4.8-.1 6.9-1.9 3.7-7.3 3.5-11.1 2-3.9-1.5-7.8-3.9-11.8-3.1-4.3.9-6.9 5.1-9.1 8.9-5 8.8-9.9 17.7-14.9 26.5-2.3 4.1-4.7 8.6-3.8 13.2 1.1 6.6 8 10.2 13.6 13.8 6.8 4.3 12.9 9.9 17.8 16.3 1.2 1.6 2.4 3.4 2.8 5.4.3 2-.3 4-.9 5.9-6.1 20.1-12.5 40.9-26.3 56.8-5.9 6.8-13 12.5-20 18.1-14 11.3-28.1 22.5-42.1 33.8-4.8 3.8-10.4 6-16.6 6.7-4.8-.2-9-2.9-12.9-5.6-17.2-12-32.5-26.8-50-38.3s-30.1-17.1-37.8-17.1-19 5.5-36.5 17.1-32.8 26.3-50 38.3c-3.9 2.7-8.2 5.4-12.9 5.6-5.4.6-10.9-1.8-16.6-6.7-14-11.3-28.1-22.5-42.1-33.8-7-5.6-14.1-11.3-20-18.1C87.5 373.3 81 352.5 75 332.4c-.6-1.9-1.2-3.9-.9-5.9.3-2 1.5-3.8 2.8-5.4 4.9-6.4 11-12 17.8-16.3 5.6-3.6 12.4-7.2 13.6-13.8.8-4.6-1.6-9.1-3.8-13.2-5-8.8-9.9-17.7-14.9-26.5-2.1-3.8-4.8-8-9.1-8.9-4.1-.9-8 1.6-11.8 3.1-3.9 1.5-9.2 1.7-11.1-2-1.2-2.1-.7-4.6-.2-6.9zM425 437.3c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5L425 437.3zm16.8 21c-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5zm-9.5-26.9c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6zm7.4-5.9c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6zm7.3-5.8c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5L447 419.7zm7.3-5.9c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6zm7.3-5.8c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5L461.6 408zm7.3-5.9c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6zm7.3-5.9c-1.1-.8-1.3-2.4-.5-3.5s2.4-1.3 3.5-.5l20.6 15.6c1.1.8 1.3 2.4.5 3.5-.5.7-1.2 1-2 1-.5 0-1.1-.2-1.5-.5l-20.6-15.6zM68 413.7l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5L71 417.7c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.9-1-.6-2.6.5-3.5zm-4.3-1.8c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.8-1.1-.6-2.7.5-3.5l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5l-20.6 15.6zm11.6 7.7L95.9 404c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5l-20.6 15.6c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.8-1.1-.6-2.7.5-3.5zm7.3 5.8l20.6-15.6c1.1-.8 2.7-.6 3.5.5s.6 2.7-.5 3.5l-20.6 15.6c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.8-1-.6-2.6.5-3.5zm7.3 5.9l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5L93 435.3c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.9-1.1-.7-2.6.4-3.5zm7.3 5.9l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5l-20.6 15.6c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.8-1.1-.6-2.7.5-3.5zm7.4 5.8l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5L107.6 447c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.9-1-.7-2.6.5-3.5zm7.3 5.9l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5l-20.6 15.6c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.9-1.1-.6-2.7.5-3.5zm7.3 5.8l20.6-15.6c1.1-.8 2.7-.6 3.5.5.8 1.1.6 2.7-.5 3.5l-20.6 15.6c-.5.3-1 .5-1.5.5-.8 0-1.5-.3-2-1-.8-1-.6-2.6.5-3.5zm-104.4-84c.4.1.6.5.9.9 4.5 6.8 6 15.6 3.8 23.5-4-6.3-6.6-21.5-6.6-21.5 0-1.5.7-3.4 1.9-2.9zm527.1 56.5c-1.9 4.2-3 8.6-4.8 12.8-2.6 5.9-5.9 11.5-10 16.5-9.2 11.3-21.3 20.5-32.2 30.2-11.5 10.3-22.9 20.9-34.7 30.9-3.2 2.7-7.1 5.1-11.4 3-3.2-1.5-4.9-4.8-6-8.1-1 .8-2 1.7-3 2.5-8.6 6.8-18.7 12-29.9 9.6-9.2-2-17.8-7.8-25.8-12.6-7.8-4.7-15.4-9.6-23-14.6-16-10.4-31.9-21.2-48.4-30.7-6.7-3.9-13.6-7.7-20.8-10.6-4.6-1.9-9.7-3.7-14.7-3.1-6.1.8-12 3.7-17.4 6.4-7.6 3.8-14.9 8.1-22.1 12.6-16.5 10.2-32.5 21.3-48.8 31.8-7.2 4.6-14.4 9.2-21.8 13.3-9.2 5.2-18.8 9.9-29.7 7.2-7.7-1.9-14.3-6.6-20.2-11.9-1.1 3.3-2.8 6.6-6 8.1-4.5 2.1-8.5-.6-11.9-3.5-11.6-9.9-22.8-20.3-34.2-30.5-11-9.8-23.4-19.2-32.7-30.8-3.9-4.9-7-10.2-9.5-15.9-1.8-4.2-2.9-8.6-4.8-12.8-.8-1.8 1.1-4.7 3.2-3.2 23.4 17.8 46.2 36.6 68.1 56.3 10.3 9.3 20.2 19.3 30.6 28.4 5.1 4.4 10.8 8.7 17.3 10.7 7.6 2.3 14.6.3 21.5-3.2 32.4-16.4 60.5-40.3 92.4-57.7 9.4-5.2 21.1-12 32.3-10.1 13.4 2.3 26.2 10.7 37.7 17.6 16.2 9.7 31.8 20.3 47.7 30.6 7.4 4.8 14.8 9.5 22.3 13.9 9.2 5.4 19.3 11.9 30.4 9.2 11.6-2.8 20.5-12.7 28.8-20.6 9.4-8.9 18.9-17.7 28.6-26.2 19.3-17.1 39.3-33.4 59.9-49 1.9-1.2 3.8 1.7 3 3.5zm5.7-53.7S545 388.7 541 395c-2.1-7.9-.7-16.7 3.8-23.5.2-.3.5-.7.9-.9 1.2-.4 1.9 1.5 1.9 2.9z"/> </svg>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #333; } svg { width: 300px; fill: #fff; animation: fillColor 8s linear infinite; } @keyframes fillColor { 0% { fill: #ff8b8b; } 10% { fill: #61bfad; } 20% { fill: #e54b4b; } 30% { fill: #FBFE56; } 40% { fill: #58B89D; } 50% { fill: #17C37B; } 60% { fill: #0BBCD6; } 70% { fill: #FC3C2D; } 80% { fill: #FF8FA4; } 90% { fill: #87DCFA; } 100% { fill: #FF4C06; } }
JAVASCRIPT
Expand for more options Login