SVG Colorful logo animation

HTML
<svg id="spinner" viewbox="0 0 80 80" x="0px" xmlns= "http://www.w3.org/2000/svg" y="0px"> <path d= "M4.678,40.749v-0.335C4.678,20.937,20.524,5.092,40,5.092h0.336v3.365H40 c-17.621,0-31.958,14.334-31.958,31.957v0.335H4.678z" fill="#28A8E0"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="-360 40 40" type= "rotate"></animatetransform> </path> <path d= "M40,70.688c-16.695,0-30.275-13.582-30.275-30.275v-0.336h3.363v0.336c0,14.838,12.073,26.913,26.912,26.913 h0.336v3.362H40z" fill="#00A79C"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M66.912,40.749v-0.335c0-14.84-12.071-26.912-26.912-26.912h-0.336v-3.364H40 c16.695,0,30.276,13.581,30.276,30.276v0.335H66.912z" fill="#F15B2A"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M39.664,65.644v-3.365H40c12.058,0,21.866-9.809,21.866-21.865v-0.336h3.364v0.336 c0,13.912-11.318,25.23-25.23,25.23H39.664z" fill="#F69321"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M14.771,40.749v-0.335c0-13.912,11.318-25.229,25.229-25.229h0.336v3.364H40 c-12.057,0-21.866,9.809-21.866,21.866v0.335H14.771z" fill="#EB2227"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M56.82,40.749v-0.335c0-9.274-7.545-16.819-16.82-16.819h-0.336v-3.365H40 c11.13,0,20.184,9.054,20.184,20.184v0.335H56.82z" fill="#3BB34A"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M40,60.598c-11.129,0-20.184-9.055-20.184-20.184v-0.336h3.364v0.336c0,9.275,7.544,16.821,16.819,16.821 h0.336v3.363H40z" fill="#8CC541"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M24.863,40.749v-0.335c0-8.348,6.792-15.138,15.137-15.138h0.336v3.364H40 c-6.492,0-11.773,5.281-11.773,11.774v0.335H24.863z" fill="#90298D"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="360 40 40" type= "rotate"></animatetransform> </path> <path d= "M39.664,55.551v-3.363H40c6.491,0,11.773-5.281,11.773-11.774v-0.336h3.365v0.336 c0,8.347-6.793,15.137-15.139,15.137H39.664z" fill="#D91F5D"> <animatetransform attributename="transform" attributetype="xml" dur="2.8s" from="0 40 40" repeatcount="indefinite" to="-360 40 40" type= "rotate"></animatetransform> </path></svg>
CSS
body { background-color: #353535; } svg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 150px; }
JAVASCRIPT
Expand for more options Login