HTML
<a class="twitter" href="http://twitter.com/tr13ze" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>
</a>
CSS
html, body {
margin: 0px;
background: #fafafa;
}
svg {
transform: translate3d(-50%, -50%, 0);
position: absolute;
height: 30vh;
width: 30vh;
left: 50%;
top: 50%;
}
svg:hover {
animation: obnoxious 900ms infinite linear;
}
path {
fill: inherit;
}
@keyframes obnoxious {
0% {
fill: #FF0000;
}
15% {
fill: #FF7F00;
}
30% {
fill: #FFFF00;
}
45% {
fill: #00FF00;
}
60% {
fill: #0000FF;
}
75% {
fill: #4B0082;
}
100% {
fill: #8F00FF;
}
}
