Skip to content

Instantly share code, notes, and snippets.

@f0rr0

f0rr0/SVG Drumroll.markdown

Created March 16, 2016 15:24
Show Gist options
  • Save f0rr0/488c220b32c7bc4c6639 to your computer and use it in GitHub Desktop.
Save f0rr0/488c220b32c7bc4c6639 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Drumroll
Raw
index.html
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65px" height="65px" viewBox="-20 -20 660 660" enable-background="new -2 19.812 616.001 610.267" xml:space="preserve">
<g>
<path fill="#DD1750" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M580.079,520.084
c0,0-49.498,88.496-284.987,88.496c-190.49,0-263.987-88.496-263.987-88.496V158.603h548.974V520.084z" />
<path id="Body" fill="#F4EB4E" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M546.684,526.547l-70.163-111.23
V216.225c0-9.665-34.999-9.665-34.999,0v199.742L377.02,572.728l-63.253-156.723V233.387c0-9.665-35.012-9.665-35.012,0v182.58
l-62.208,151.228l-62.246-151.228V216.225c0-9.665-34.999-9.665-34.999,0v199.079L64.006,526.547V162.242
c0-9.665-35.011-9.665-35.011,0c0,0,0,274.711,0,366.282c0,56.058,160.321,99.556,277.006,99.556
c110.585,0,275.656-38.636,275.656-99.543V162.242c0.025-9.665-34.974-9.665-34.974,0V526.547z M521.582,547.083
c-22.044,8.021-67.922,23.223-107.894,28.476l46.831-113.794L521.582,547.083z M135.305,461.739l45.9,111.575
c-40.163-6.286-70.023-15.084-89.594-23.639L135.305,461.739z M248.907,580.505L296.12,465.78l46.666,115.579
c-12.036,0.484-24.392,0.816-37.435,0.816C285.308,582.188,266.489,581.576,248.907,580.505z" />
<ellipse id="Face" fill="#EABF8F" stroke="#000000" stroke-width="4" stroke-miterlimit="10" cx="305.168" cy="163.367" rx="277.333" ry="88.465" />
<path id="Stick2" fill="#443A1D" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M299.69,156.619L18.974,23.101
c-6.617-3.136-14.535-0.357-17.685,6.286c-3.149,6.617-0.332,14.535,6.273,17.684l280.742,133.518
c1.849,0.867,3.787,1.288,5.7,1.288c4.947,0,9.703-2.792,11.985-7.574C309.126,167.673,306.32,159.768,299.69,156.619z" />
<path id="Stick1" fill="#443A1D" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M610.714,29.425
c-3.123-6.63-11.028-9.435-17.671-6.324l-252.539,119.48c-6.631,3.137-9.448,11.054-6.312,17.671
c2.27,4.794,7.025,7.599,11.984,7.599c1.913,0,3.838-0.408,5.674-1.275l252.54-119.48C611.033,43.96,613.863,36.042,610.714,29.425
z" />
</g>
</svg>
</body>
Raw
style.css
#Stick1 {
transform: translateZ(0);
-webkit-animation-name: rotate1;
transform-origin: center;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
filter: blur(50px);
}
#Stick2 {
transform: translateZ(0);
-webkit-animation-name: rotate2;
transform-origin: center;
-webkit-animation-duration: .15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes rotate1 {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(15deg);
}
}
@-webkit-keyframes rotate2 {
from {
-webkit-transform: rotate(-9deg);
}
to {
-webkit-transform: rotate(1deg);
}
}
svg {
position: relative;
display: block;
margin: auto;
transform-origin: center;
top: 50%;
transform: translateY(-50%);
}
body,
html {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0;
background: radial-gradient(circle, #3d72b4 30%, #525252 100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment