<svg viewBox="0 0 20 20" id="surface"> <g id="circle"> <path class="north"> <animate attributeName="d" dur="3" keyTimes="0;0.1;0.4;0.6;0.9;1" repeatCount="indefinite" values=" M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071; M 10 8.75 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929; M 10 8.75 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071 "> </path> <path class="east"> <animate attributeName="d" dur="3" keyTimes="0;0.1;0.4;0.6;0.9;1" repeatCount="indefinite" values=" M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071; M 11.25 10 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071; M 11.25 10 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071; M 10 10 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071 "> </path> <path class="south"> <animate attributeName="d" dur="3" keyTimes="0;0.1;0.4;0.6;0.9;1" repeatCount="indefinite" values=" M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071; M 10 11.25 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929; M 10 11.25 q -0.4 0 -0.7071 0.2929 q 0.3536 0.3536 0.7071 0.7071 q 0.3536 -0.3536 0.7071 -0.7071 q -0.3 -0.2929 -0.7071 -0.2929; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q 0.3 0.2929 0.7071 0.2929 q 0.4 0 0.7071 -0.2929 q -0.3536 -0.3536 -0.7071 -0.7071 "> </path> <path class="west"> <animate attributeName="d" dur="3" keyTimes="0;0.1;0.4;0.6;0.9;1" repeatCount="indefinite" values=" M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071; M 8.75 10 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071; M 8.75 10 q 0 0.4 -0.2929 0.7071 q -0.3536 -0.3536 -0.7071 -0.7071 q 0.3536 -0.3536 0.7071 -0.7071 q 0.2929 0.3 0.2929 0.7071; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071; M 10 10 q -0.3536 0.3536 -0.7071 0.7071 q -0.2929 -0.3 -0.2929 -0.7071 q 0 -0.4 0.2929 -0.7071 q 0.3536 0.3536 0.7071 0.7071 "> </path> </g> </svg> <p>a re-creation of this amazing <a href="http://beesandbombs.tumblr.com/post/101579804084/quarters">Bees and Bombs gif</a></p> <small><p>2 the haters: this is just for fun, won't work in IE because SMIL isn't supported there</p></small>