HTML5 SVG Logo

by elcoyote67

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <title>HTML5 Logo</title>
  <div class='angrytext' >
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>Asset 3spinner-light</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M25,14.8h.3L25.7,0H24.3l.4,14.8Z" style="fill:#00b0ff"/><path d="M27.3,15.1,30.6.7,29.3.4,26.7,15A1.27,1.27,0,0,1,27.3,15.1Z" style="fill:#36a8ee"/><path d="M30.9,16.7,39.4,4.6a10.47,10.47,0,0,1-1.1-.8L30.4,16.3A1.76,1.76,0,0,0,30.9,16.7Z" style="fill:#26a1ed"/><path d="M29.2,15.7l6-13.5a5,5,0,0,0-1.3-.5L28.6,15.5A1.42,1.42,0,0,1,29.2,15.7Z" style="fill:#2ea5ee"/><path d="M32.4,18,43.2,7.8a9.43,9.43,0,0,0-1-1L32,17.6Z" style="fill:#1f9eed"/><path d="M33.6,19.6l12.5-7.9a4.44,4.44,0,0,0-.8-1.1L33.2,19.1A1.76,1.76,0,0,1,33.6,19.6Z" style="fill:#179bec"/><path d="M34.5,21.4l13.8-5.3c-.2-.4-.3-.8-.5-1.3l-13.5,6A1.42,1.42,0,0,1,34.5,21.4Z" style="fill:#0f98eb"/><path d="M35,23.3l14.6-2.5c-.1-.5-.2-.9-.3-1.3L34.9,22.8A.75.75,0,0,1,35,23.3Z" style="fill:#0894eb"/><path d="M50,24.3l-14.8.4v.6l14.8.4V24.3Z" style="fill:#0091ea"/><path d="M35,26.7c0,.2-.1.4-.1.6l14.4,3.3c.1-.4.2-.9.3-1.3Z" style="fill:#9be0ff"/><path d="M34.5,28.6c-.1.2-.1.4-.2.5l13.5,6a5,5,0,0,0,.5-1.3Z" style="fill:#97dfff"/><path d="M33.6,30.4c-.1.2-.2.3-.3.5l12.1,8.5a10.47,10.47,0,0,1,.8-1.1Z" style="fill:#93deff"/><path d="M32.4,32l-.4.4L42.2,43.1a9.43,9.43,0,0,0,1-1Z" style="fill:#8fddff"/><path d="M30.9,33.3c-.2.1-.3.2-.5.3l7.9,12.5a4.44,4.44,0,0,0,1.1-.8Z" style="fill:#8bdcff"/><path d="M28.6,34.5l5.3,13.8c.4-.2.8-.3,1.3-.5l-6-13.5A1.42,1.42,0,0,1,28.6,34.5Z" style="fill:#88daff"/><path d="M26.7,35l2.5,14.6c.5-.1.9-.2,1.3-.3L27.2,34.9A.75.75,0,0,1,26.7,35Z" style="fill:#84d9ff"/><path d="M25,35.2h-.3L24.3,50h1.4l-.4-14.8Z" style="fill:#80d8ff"/><path d="M22.7,34.9,19.4,49.3l1.3.3L23.3,35A1.27,1.27,0,0,1,22.7,34.9Z" style="fill:#68d0ff"/><path...

CSS

div.angrytext {


 -webkit-animation: tick-tock 60s steps(60 ,end) infinite;
 animation: rotate 1s linear 0s infinite normal ;
}

@-webkit-keyframes rotate {
  100%{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

@keyframes rotate {
  100%{
	transform: rotate(360deg);
  }
}