Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/index.html

Created August 13, 2017 12:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/e7af83462fabe2ea2666d2b1de43a01c to your computer and use it in GitHub Desktop.
Save stanwmusic/e7af83462fabe2ea2666d2b1de43a01c to your computer and use it in GitHub Desktop.
Download ZIP
SVG Animated Drum Kit (Play Me!) 🥁
Raw
index.html
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="300 300 1400 1400">
<g id="Drums">
<g>
<path id="Drum-Shadow" opacity="0.1" fill="#333333" d="M1626.6,1282.8c0,45.4-280.5,82.1-626.6,82.1
c-346,0-626.6-36.8-626.6-82.1c0-45.4,280.5-82.1,626.6-82.1C1346,1200.6,1626.6,1237.4,1626.6,1282.8z"/>
<g id="Snare">
<g id="Snare-Drum">
<rect x="1219" y="885" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="223" height="110"/>
<line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="1438" y1="914" x2="1223" y2="914"/>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1227,950c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V950z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1450,950c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V950z"/>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1293" y1="971" x2="1293" y2="958"/>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1293" y1="922" x2="1293" y2="909"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1301,950c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V950z"/>
</g>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1368" y1="971" x2="1368" y2="958"/>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1368" y1="922" x2="1368" y2="909"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1376,950c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V950z"/>
</g>
</g>
<rect x="1209" y="885" fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="241" height="21"/>
<rect x="1209" y="974" fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="241" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1213" y1="900" x2="1446" y2="900"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1213" y1="989" x2="1446" y2="989"/>
</g>
<g id="Snare-Stand">
<rect x="1321" y="1087" fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17" height="95"/>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1403.4,1256c-3.4,3.4-8.8,3.3-12.1-0.1l-66.7-66.7c-3.4-3.4-3.5-8.7-0.1-12.1l0,0c3.4-3.4,8.8-3.3,12.1,0.1l66.7,66.7
C1406.6,1247.2,1406.7,1252.6,1403.4,1256L1403.4,1256z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1395.4" y1="1252.8" x2="1328.2" y2="1185.6"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1403.8,1244.4l-12,12c0,0,6.4,10.8,8,12.4c4.7,4.7,11.9,4.3,16.6-0.4c4.7-4.7,5.1-11.9,0.5-16.6
C1415.3,1250.4,1403.8,1244.4,1403.8,1244.4z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1257.5,1255.7c-3.4-3.4-3.3-8.8,0.1-12.1l66.7-66.7c3.4-3.4,8.7-3.5,12.1-0.1l0,0c3.4,3.4,3.3,8.8-0.1,12.1l-66.7,66.7
C1266.2,1259,1260.8,1259.1,1257.5,1255.7L1257.5,1255.7z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1265.7" y1="1252.8" x2="1330.5" y2="1187.9"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1269,1256.1l-12-12c0,0-10.8,6.4-12.4,8c-4.7,4.7-4.3,11.9,0.4,16.6c4.7,4.7,11.9,5.1,16.6,0.5
C1263,1267.7,1269,1256.1,1269,1256.1z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1317.1,1182.8c0-7.5,6-13.5,13.5-13.5s13.5,6,13.5,13.5c0,7.5-6,13.5-13.5,13.5S1317.1,1190.2,1317.1,1182.8z"/>
<path fill="#333333" d="M1333,1179.5c-1.8-1.3-4.3-0.9-5.6,0.9c-1.3,1.8-0.9,4.3,0.9,5.6c1.8,1.3,4.3,0.9,5.6-0.9
C1335.2,1183.3,1334.8,1180.8,1333,1179.5z"/>
</g>
</g>
<g>
<g>
<g>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1210,979.6c0-3.7-2.8-6.6-6.5-6.6c-3.7,0-6.5,3-6.5,6.6V992h13V979.6z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1210,997.3V992h-13v10c0,3.6,2.5,7.1,6.1,7.5l122.3,13.6l1.2-12.9L1210,997.3z"/>
<path fill="#BCECE8" d="M1203.8,1006.6l118.8,13.3l0.2-2l-121.6-13.6C1201.6,1005.5,1202.6,1006.4,1203.8,1006.6z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1462,992h-13v5.3l-114.7,12.8l1.6,12.9l120.5-13.5c3.6-0.4,5.5-4,5.5-7.5l0,0V992z"/>
<path fill="#BCECE8" d="M1338.5,1017.7l0.2,2l117.8-13.1c1.1-0.1,1.9-0.9,2.5-1.9L1338.5,1017.7z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1462,979.6c0-3.7-2.8-6.6-6.5-6.6c-3.7,0-6.5,3-6.5,6.6V992h13V979.6z"/>
</g>
</g>
<g>
<g>
<rect x="1323.6" y="1017" transform="matrix(1 5.709041e-03 -5.709041e-03 1 6.0417 -7.5767)" fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="13" height="75"/>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1330.6" cy="1016.8" r="8.5"/>
<circle fill="#333333" cx="1330.6" cy="1016.8" r="2"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1418.4,1004.6c-2.5-2.6-6.6-2.6-9.2-0.1l-83.8,82.9l9.1,9.2l83.8-82.9C1420.9,1011.2,1420.9,1007.1,1418.4,1004.6z"/>
<line fill="none" stroke="#BCECE8" stroke-width="2" stroke-miterlimit="10" x1="1408.9" y1="1017" x2="1344.2" y2="1081"/>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1414.6" cy="1007.8" r="8.5"/>
<circle fill="#333333" cx="1414.6" cy="1007.8" r="2"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1243.7,1003.6c-2.6,2.5-2.6,6.6-0.1,9.2l82.9,83.8l9.2-9.1l-82.9-83.8C1250.4,1001.1,1246.3,1001.1,1243.7,1003.6z"/>
<line fill="none" stroke="#BCECE8" stroke-width="2" stroke-miterlimit="10" x1="1247.8" y1="1011" x2="1317.1" y2="1081"/>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1248.6" cy="1007.8" r="8.5"/>
<circle fill="#333333" cx="1248.6" cy="1007.8" r="2"/>
</g>
</g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1348,1089.1c0,4.9-4,8.9-8.9,8.9h-18.2c-4.9,0-8.9-4-8.9-8.9v-4.2c0-4.9,4-8.9,8.9-8.9h18.2c4.9,0,8.9,4,8.9,8.9V1089.1z"/>
</g>
</g>
</g>
<g id="Floor-Tom">
<g id="Floor-Tom-Drum">
<rect x="541" y="878" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="287" height="320"/>
<line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="824" y1="907" x2="545" y2="907"/>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M549,940c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V940z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M836,940c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V940z"/>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="637" y1="912" x2="637" y2="899"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M645,940c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V940z"/>
</g>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="732" y1="912" x2="732" y2="899"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M740,940c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V940z"/>
</g>
</g>
<rect x="532" y="878" fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="304" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="536" y1="893" x2="832" y2="893"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M836,1156c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V1156z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M549,1156c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V1156z"/>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="732" y1="1164" x2="732" y2="1177"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M740,1156c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V1156z"/>
</g>
<g>
<line fill="none" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="637" y1="1164" x2="637" y2="1177"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M645,1156c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V1156z"/>
</g>
</g>
<rect x="533" y="1177" fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="304" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="537" y1="1192" x2="833" y2="1192"/>
</g>
</g>
<g id="Floor-Tom-Legs">
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M526.3,1122.8l-11.3,52.7v76.2c0,3.1,2.4,5.7,5.5,5.7s5.5-2.5,5.5-5.7v-75l11.3-52.7l11.2-52.7l3.6-16.6l-10.9-2.2
L526.3,1122.8z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M533.5,1245L533.5,1245l-6.8-11h-11l-6.6,11h0c-1.3,2-2,4.6-2,7.3c0,7.8,6.3,14.2,14.2,14.2s14.2-6.6,14.2-14.4
C535.3,1249.6,534.7,1247,533.5,1245z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M553,1014c0-5.6-4.9-10.2-10.5-10.2s-10.5,4.6-10.5,10.2v58h21V1014z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M681,1251.7c0,3.1,2.4,5.7,5.5,5.7s5.5-2.5,5.5-5.7V1070h-11V1251.7z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M699.5,1245L699.5,1245l-6.8-11h-11l-6.6,11h0c-1.3,2-2,4.6-2,7.3c0,7.8,6.3,14.2,14.2,14.2s14.2-6.6,14.2-14.4
C701.3,1249.6,700.7,1247,699.5,1245z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M697,1014c0-5.6-4.9-10.2-10.5-10.2s-10.5,4.6-10.5,10.2v58h21V1014z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M843.6,1122.8l-14.2-70.5l-10.7,2.2l3.4,16.6l10.5,52.7l10.4,52.7v75c0,3.1,2.4,5.7,5.5,5.7s5.5-2.5,5.5-5.7v-76.2
L843.6,1122.8z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M861.5,1245L861.5,1245l-6.8-11h-11l-6.6,11h0c-1.3,2-2,4.6-2,7.3c0,7.8,6.3,14.2,14.2,14.2s14.2-6.6,14.2-14.4
C863.3,1249.6,862.7,1247,861.5,1245z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M816,1014c0-5.6,4.9-10.2,10.5-10.2s10.5,4.6,10.5,10.2v58h-21V1014z"/>
</g>
</g>
</g>
<g id="Hi-Hat">
<g id="Hi-Hat-Stand-Top">
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1494,849V731.2c0-3.1-2.4-5.7-5.5-5.7c-3.1,0-5.5,2.5-5.5,5.7V849H1494z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1497,998.8c0,4.6-3.7,8.2-8.2,8.2h-0.5c-4.6,0-8.2-3.7-8.2-8.2V761.2c0-4.6,3.7-8.2,8.2-8.2h0.5c4.6,0,8.2,3.7,8.2,8.2V998.8z"
/>
<rect x="1483" y="800" fill="#BCECE8" width="11" height="78"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1502.7,775c0-1-0.7-0.6-0.7-0.7v-0.5c0-4.6-3-7.8-7.6-7.8h-10.5c-4.6,0-8.9,3.2-8.9,7.8v0.5c0,0.1,0.7-0.3,0.7,0.7H1502.7z"/>
<g id="Hi-Hat-Top">
<path fill="#FDE74C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1579.8,789.7l-33-0.8c-23-0.5-32.8-4.5-39.5-9c0,0,0.1,0.2,0.1,0.2c-3.5-2.8-7.9-4.2-12.7-4.2c-1.5,0-5.9,0-5.9,0
s-4.4,0-5.9,0c-4.8,0-9.3,1.4-12.8,4.2c0,0,0-0.1,0-0.1c-6.6,4.5-16.6,8.4-39.6,8.9l-33.5,0.7c-3.7,0-7,2.7-7,6.4v0.1
c0,3.7,3.6,6.7,7.3,6.7h91.4h91.4c3.7,0,5.8-3,5.8-6.7v-0.1C1586,792.5,1583.5,789.7,1579.8,789.7z"/>
<line fill="none" stroke="#FEF5B7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1479" y1="783" x2="1497" y2="783"/>
</g>
</g>
<g id="Hi-Hat-Bottom">
<path fill="#FDE74C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1397,818.3l32.8,0.8c23,0.5,33.2,4.5,39.2,9v0c4,2.8,9,4.9,13.8,4.9c1.5,0,5.9,0,5.9,0s4.4,0,5.9,0c4.8,0,9.3-1.9,12.8-4.7
l0-0.1c6.6-4.5,16.6-8.5,39.6-9.1l32.8-0.8c3.7,0,6.2-2.8,6.2-6.5v-0.1c0-3.7-2.2-5.8-5.8-5.8h-91.4h-91.4
c-3.7,0-7.3,2.1-7.3,5.8v0.1C1390,815.6,1393.3,818.3,1397,818.3z"/>
<line opacity="0.3" fill="none" stroke="#BEAD39" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1479" y1="826" x2="1497" y2="826"/>
</g>
<g id="Hi-Hat-Stand">
<rect x="1480" y="833" fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17" height="367"/>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1561.8,1272c-3.4,3.4-8.8,3.3-12.1-0.1l-66.7-66.7c-3.4-3.4-3.5-8.7-0.1-12.1l0,0c3.4-3.4,8.8-3.3,12.1,0.1l66.7,66.7
C1565.1,1263.2,1565.2,1268.6,1561.8,1272L1561.8,1272z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1553.9" y1="1268.8" x2="1486.7" y2="1201.6"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1562.2,1260.4l-12,12c0,0,6.4,10.8,8,12.4c4.7,4.7,11.9,4.3,16.6-0.4c4.7-4.7,5.1-11.9,0.5-16.6
C1573.8,1266.4,1562.2,1260.4,1562.2,1260.4z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1416,1271.7c-3.4-3.4-3.3-8.8,0.1-12.1l66.7-66.7c3.4-3.4,8.7-3.5,12.1-0.1l0,0c3.4,3.4,3.3,8.8-0.1,12.1l-66.7,66.7
C1424.7,1275,1419.3,1275.1,1416,1271.7L1416,1271.7z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1424.2" y1="1268.8" x2="1489" y2="1203.9"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1427.5,1272.1l-12-12c0,0-10.8,6.4-12.4,8c-4.7,4.7-4.3,11.9,0.4,16.6c4.7,4.7,11.9,5.1,16.6,0.5
C1421.5,1283.7,1427.5,1272.1,1427.5,1272.1z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1475.6,1198.8c0-7.5,6-13.5,13.5-13.5s13.5,6,13.5,13.5c0,7.5-6,13.5-13.5,13.5S1475.6,1206.2,1475.6,1198.8z"/>
<path fill="#333333" d="M1491.5,1195.5c-1.8-1.3-4.3-0.9-5.6,0.9c-1.3,1.8-0.9,4.3,0.9,5.6c1.8,1.3,4.3,0.9,5.6-0.9
C1493.7,1199.3,1493.3,1196.8,1491.5,1195.5z"/>
</g>
</g>
<g>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1504.7" cy="998.5" r="10"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1502,1010.1c0,6-4.9,10.9-10.9,10.9h-5.1c-6,0-10.9-4.9-10.9-10.9v-22.1c0-6,4.9-10.9,10.9-10.9h5.1c6,0,10.9,4.9,10.9,10.9
V1010.1z"/>
</g>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1475.7,833c0,0-0.7-0.3-0.7-0.2v0.5c0,4.6,4.4,8.7,8.9,8.7h10.5c4.6,0,7.6-4.2,7.6-8.7v-0.5c0-0.1,0.7,0.2,0.7,0.2H1475.7z"/>
</g>
</g>
<g id="Main-Kit">
<g id="Toms">
<g id="Tom-Rack">
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1009,760.8c5.6,0,10,4.6,10,10.2v101c0,6-20,6-20,0V771C999,765.4,1003.4,760.8,1009,760.8L1009,760.8z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1052,872V771c0-5.6,4.4-10.2,10-10.2l0,0c5.6,0,10,4.6,10,10.2v101C1072,877.6,1052,877.6,1052,872z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1082.7,872c0,6.1-4.9,11-11,11h-72c-6.1,0-11-4.9-11-11l0,0c0-6.1,4.9-11,11-11h72C1077.8,861,1082.7,865.9,1082.7,872
L1082.7,872z"/>
</g>
<g id="Tom-Left-All">
<g id="Tom-Left-Drum">
<rect x="750" y="679" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="221" height="184"/>
<line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="754" y1="708" x2="967" y2="708"/>
<g>
<g>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M757,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M979,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
<g>
<line fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="823" y1="711" x2="823" y2="698"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M831,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
</g>
<g>
<line fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="897" y1="711" x2="897" y2="698"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M905,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
</g>
</g>
<rect x="741" y="679" fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="238" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="975" y1="694" x2="745" y2="694"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M979,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M757,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
<g>
<line fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="897" y1="831" x2="897" y2="844"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M905,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
</g>
<g>
<line fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="823" y1="831" x2="823" y2="844"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M831,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
</g>
</g>
<rect x="741" y="842" fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="238" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="975" y1="858" x2="745" y2="858"/>
</g>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M959,782.1c0,6-4.9,10.9-10.9,10.9h-5.1c-6,0-10.9-4.9-10.9-10.9v-22.1c0-6,4.9-10.9,10.9-10.9h5.1c6,0,10.9,4.9,10.9,10.9
V782.1z"/>
<path fill="#BCECE8" d="M955.6,786h-18.9c1.4,2.4,3.9,4,6.9,4h5.1C951.7,790,954.3,788.4,955.6,786z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M954.2,781h53.8v0c6,0,10.7-4.4,10.7-10c0-5.6-4.1-10-9.7-10h0.1h-55c-5.6,0-10.2,4.4-10.2,10C944,776.6,948.5,781,954.2,781z
"/>
<path fill="#BCECE8" d="M1015.4,774h-67.8c1.1,2.4,3.6,4,6.5,4h54.4c0,0,0.1,0,0.1,0C1011.8,778,1014.3,776.4,1015.4,774z"/>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1009.1" cy="770.8" r="13.3"/>
<path fill="#333333" d="M1011.5,767.6c-1.8-1.3-4.3-0.9-5.6,0.9c-1.3,1.8-0.9,4.3,0.9,5.6c1.8,1.3,4.3,0.9,5.6-0.9
C1013.7,771.4,1013.3,768.9,1011.5,767.6z"/>
</g>
</g>
<g id="Tom-Right-All">
<g id="Tom-Right-Drum">
<rect x="1101" y="679" fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="221" height="184"/>
<line fill="none" stroke="#0891BA" stroke-width="8" stroke-miterlimit="10" x1="1105" y1="708" x2="1318" y2="708"/>
<g>
<g>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1108,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1330,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
<g>
<line fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1174" y1="711" x2="1174" y2="698"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1182,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
</g>
<g>
<line fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1248" y1="711" x2="1248" y2="698"/>
<path fill="#F8FDFD" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1256,739c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V739z"/>
</g>
</g>
<rect x="1092" y="679" fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="238" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1326" y1="694" x2="1096" y2="694"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1330,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1108,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
<g>
<line fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1248" y1="831" x2="1248" y2="844"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1256,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
</g>
<g>
<line fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1174" y1="831" x2="1174" y2="844"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1182,823c0,4.4-3.6,8-8,8l0,0c-4.4,0-8-3.6-8-8v-20c0-4.4,3.6-8,8-8l0,0c4.4,0,8,3.6,8,8V823z"/>
</g>
</g>
<rect x="1092" y="842" fill="#F8FDFD" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="238" height="21"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1326" y1="858" x2="1096" y2="858"/>
</g>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1139,759.9c0-6-4.9-10.9-10.9-10.9h-5.1c-6,0-10.9,4.9-10.9,10.9v22.1c0,6,4.9,10.9,10.9,10.9h5.1c6,0,10.9-4.9,10.9-10.9
V759.9z"/>
<path fill="#BCECE8" d="M1116.5,786h18.9c-1.4,2.4-3.9,4-6.9,4h-5.1C1120.5,790,1117.9,788.4,1116.5,786z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1118,781h-55v0c-6,0-10.2-4.4-10.2-10c0-5.6,4.6-10,10.3-10h-0.1h55c5.6,0,10.2,4.4,10.2,10
C1128.2,776.6,1123.6,781,1118,781z"/>
<path fill="#BCECE8" d="M1056.7,774h67.8c-1.1,2.4-3.6,4-6.5,4h-54.4c0,0-0.1,0-0.1,0C1060.3,778,1057.9,776.4,1056.7,774z"/>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1063" cy="770.8" r="13.3"/>
<path fill="#333333" d="M1060.7,767.6c1.8-1.3,4.3-0.9,5.6,0.9c1.3,1.8,0.9,4.3-0.9,5.6c-1.8,1.3-4.3,0.9-5.6-0.9
C1058.5,771.4,1058.9,768.9,1060.7,767.6z"/>
</g>
</g>
</g>
<g id="Kick">
<g id="Kick-Stand">
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M815.3,1050.3c0.3-5.6,5.3-10,11-9.7c5.6,0.3,10.3,5,10,10.7l-2.7,58l-21-1L815.3,1050.3z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M828.6,1109.1l-7.7,167.4c-0.1,3.1-2.6,5.5-5.8,5.4c-3.1-0.1-5.4-2.8-5.2-5.9l7.7-167.4L828.6,1109.1z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M803.4,1269L803.4,1269l7.3-10.6l11,0.4l6.1,11.2h0c1.2,3,1.8,4.8,1.7,7.5c-0.4,7.8-7,13.9-14.8,13.5
c-7.8-0.4-13.8-7.2-13.5-15C801.4,1273.5,802.1,1271,803.4,1269z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1256.2,1050.3c-0.3-5.6-5.3-10-11-9.7c-5.6,0.3-10.3,5-10,10.7l2.7,58l21-1L1256.2,1050.3z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1242.9,1109.1l7.7,167.4c0.1,3.1,2.6,5.5,5.8,5.4c3.1-0.1,5.4-2.8,5.2-5.9l-7.7-167.4L1242.9,1109.1z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1268.1,1269L1268.1,1269l-7.3-10.6l-11,0.4l-6.1,11.2h0c-1.2,3-1.8,4.8-1.7,7.5c0.4,7.8,7,13.9,14.8,13.5
c7.8-0.4,13.8-7.2,13.5-15C1270.1,1273.5,1269.3,1271,1268.1,1269z"/>
</g>
</g>
<g id="Kick-Drum">
<circle fill="#0BC1F8" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1035.7" cy="1085" r="210"/>
<circle id="Inner-Drum-Wobble" fill="none" cx="1035.7" cy="1085" r="201.2"/>
<circle id="Inner-Drum" fill="#FDFFFC" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1035.7" cy="1085" r="192.6"/>
<g id="Drum-Logo-Wobble">
<g>
<path fill="none" d="M980.6,942.2l-4.3,19.9h0.8c7.1,0,12.2-8.3,12.2-15c0-4.8-2.7-9-9.4-9c-13.9,0-23.1,7.8-23.1,20.8
c0,4.4,1.1,5.1,1.2,5.8c-5.9,0-9.2-2.1-9.2-8.3c0-11.4,15.8-22.3,30.1-22.3c13.5,0,19.4,6.7,19.4,13.7
c0,5.2-3.3,11.2-9.2,14.6c4.5,1.3,5.9,4.5,5.9,8.6c0,7-4.2,16.4-4.2,21.7c0,2.6,1.3,4.9,3.3,5.7c-3.6,1-6.4,1.5-8.5,1.5
c-5.6,0-6.7-2.9-6.7-5.7c0-5.7,4.5-16,4.5-22.5c0-3.4-1.3-5.8-5.1-5.8c-0.8,0-1.7,0.1-2.7,0.3l-6.9,32.3h-12.3l11.7-54.5
L980.6,942.2z"/>
<path fill="none" d="M1068.7,955.4c-2.8,0-5.4,1-7.4,2.5l4.1-19.4l-12.7,1.7l-9.5,44.5c-0.3,1.5-0.5,2.8-0.5,4
c-1.6,1.1-3.2,1.9-4.5,1.9c-3.4,0-4.3-1.4-4.3-3.3c0-0.8,0.2-2,0.3-2.9l6.2-29.4h-12.3l-6.2,29.4c-0.3,1-0.4,2.1-0.5,3
c-2.1,1.7-4.3,3.2-6.1,3.2c-3.4,0-4.3-1.3-4.3-3.2c0-0.8,0.2-2,0.3-2.9l6.2-29.4h-12.3l-6.2,29.4c-0.3,1.6-0.5,3.2-0.5,4.5
c0,6.4,4.1,9.4,10.7,9.4c3.7,0,8.3-3.4,12.3-7.2c0.8,5,4.7,7.2,10.5,7.2c3.3,0,7.4-2.8,11.1-6.1c1.5,4.7,6.6,6.4,13.6,6.4
c15.3,0,22.7-18.9,22.7-32.4C1079.5,961.2,1076.9,955.4,1068.7,955.4z M1058.6,992.5c-2.6,0-3.8-0.6-3.8-3.2
c0-1.1,0.3-2.7,0.7-4.7l4.9-23c0.8-0.6,3.8-1.2,4.6-1.2c2.1,0,4.9,1.2,4.9,6.3C1069.9,973,1065.7,992.5,1058.6,992.5z"/>
<path fill="none" d="M1099.1,955.5l-6.3,29.1c-0.3,0.9-0.4,1.9-0.4,2.7c0,1.9,0.9,3.2,4.3,3.2c2,0,4.3-1.5,6.5-3.4l6.7-31.6
h12.4l-10.5,49.7c-2.6,12.2-9.9,14.6-15.6,14.6c-5.2,0-10.1-3.7-10.1-9.3c0-8,6.7-10.5,14.8-12.8l1.3-5.9
c-3.9,3.5-8.2,6.6-11.6,6.6c-6.7,0-10.6-2.9-10.6-9.3c0-1.4,0.2-2.7,0.5-4.4l6-29.1H1099.1z M1094.3,1012.2
c1.7,0,4-1.6,5.1-6.7l1-5.1c-5.4,1.8-9.5,4.3-9.5,8.9C1090.8,1010.5,1092.4,1012.2,1094.3,1012.2z"/>
</g>
<line fill="none" x1="955" y1="1009" x2="1078" y2="1009"/>
</g>
<g id="Drum-Logo">
<g>
<path fill="#333333" d="M982.8,943.6l-4.1,19.1h0.7c6.8,0,11.7-8,11.7-14.4c0-4.6-2.6-8.6-9-8.6c-13.3,0-22.2,7.5-22.2,20
c0,4.2,1.1,4.8,1.2,5.6c-5.7,0-8.8-2.1-8.8-8c0-10.9,15.1-21.4,28.9-21.4c13,0,18.7,6.4,18.7,13.2c0,5-3.2,10.8-8.9,14.1
c4.3,1.2,5.7,4.4,5.7,8.2c0,6.7-4,15.7-4,20.8c0,2.5,1.2,4.7,3.2,5.4c-3.5,1-6.2,1.4-8.1,1.4c-5.3,0-6.4-2.8-6.4-5.5
c0-5.4,4.3-15.4,4.3-21.6c0-3.3-1.2-5.6-4.9-5.6c-0.7,0-1.6,0.1-2.6,0.3l-6.6,31h-11.8l11.2-52.3L982.8,943.6z"/>
<path fill="#333333" d="M1067.3,956.2c-2.7,0-5.2,1-7.1,2.4l3.9-18.7l-12.2,1.6l-9.1,42.7c-0.3,1.4-0.5,2.7-0.5,3.8
c-1.5,1.1-3,1.8-4.4,1.8c-3.3,0-4.1-1.3-4.1-3.1c0-0.7,0.2-1.8,0.3-2.7l5.9-28.1h-11.8l-5.9,28.1c-0.2,1-0.4,2-0.5,2.8
c-2.1,1.6-4.1,3-5.8,3c-3.3,0-4.1-1.3-4.1-3.1c0-0.7,0.2-1.8,0.3-2.7l5.9-28.1h-11.8l-5.9,28.1c-0.3,1.6-0.5,3.1-0.5,4.3
c0,6.2,3.9,9,10.3,9c3.5,0,8-3.3,11.8-6.9c0.7,4.8,4.5,6.9,10.1,6.9c3.2,0,7.1-2.7,10.7-5.9c1.5,4.6,6.3,6.1,13.1,6.1
c14.7,0,21.8-18.2,21.8-31.1C1077.8,961.8,1075.2,956.2,1067.3,956.2z M1057.7,991.9c-2.5,0-3.6-0.6-3.6-3
c0-1.1,0.2-2.5,0.7-4.5l4.7-22c0.7-0.6,3.6-1.2,4.4-1.2c2.1,0,4.7,1.2,4.7,6.1C1068.6,973.2,1064.4,991.9,1057.7,991.9z"/>
<path fill="#333333" d="M1096.5,956.4l-6,27.9c-0.2,0.9-0.4,1.8-0.4,2.6c0,1.8,0.9,3,4.1,3c1.9,0,4.1-1.5,6.2-3.3l6.4-30.3
h11.9l-10,47.7c-2.5,11.8-9.5,14-15,14c-5,0-9.7-3.5-9.7-8.9c0-7.6,6.4-10,14.2-12.3l1.2-5.7c-3.7,3.4-7.9,6.3-11.2,6.3
c-6.4,0-10.2-2.8-10.2-9c0-1.3,0.2-2.6,0.5-4.2l5.8-27.9H1096.5z M1091.9,1010.7c1.6,0,3.9-1.6,4.9-6.4l1-4.8
c-5.2,1.7-9.1,4.1-9.1,8.5C1088.6,1009.2,1090.1,1010.7,1091.9,1010.7z"/>
</g>
<line fill="none" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="959" y1="1008" x2="1076" y2="1008"/>
</g>
<g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M821,1074.7c-6,0-10.5,4.7-10.5,10.5c0,5.8,4.5,10.5,10.5,10.5v9.3h20v-40h-20V1074.7z"/>
<path fill="#333333" d="M819.9,1085.3c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2
C820.8,1083.3,819.9,1084.2,819.9,1085.3z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="835" y1="1101" x2="835" y2="1069"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M919.8,1265.1c-3,5.2-1.2,11.4,3.8,14.3s11.3,1.4,14.3-3.8l8.1,4.7l10-17.3l-34.6-20l-10,17.3L919.8,1265.1z"/>
<path fill="#333333" d="M928.1,1272c1,0.5,2.2,0.2,2.7-0.7c0.6-1,0.2-2.2-0.7-2.7c-1-0.6-2.2-0.2-2.7,0.7
C926.8,1270.3,927.1,1271.5,928.1,1272z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="949.7" y1="1266.2" x2="922" y2="1250.2"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1133.8,1275.5c3,5.2,9.3,6.7,14.3,3.8c5-2.9,6.8-9.1,3.8-14.3l8-4.6l-10-17.3l-34.6,20l10,17.3L1133.8,1275.5z"/>
<path fill="#333333" d="M1143.9,1271.7c1-0.6,1.3-1.8,0.7-2.7c-0.6-1-1.8-1.3-2.7-0.7c-1,0.6-1.3,1.8-0.7,2.7
C1141.8,1271.9,1143,1272.3,1143.9,1271.7z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1149.6" y1="1250.2" x2="1121.8" y2="1266.2"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1249,1095.3c6,0,10.5-4.7,10.5-10.5c0-5.8-4.5-10.5-10.5-10.5v-9.3h-20v40h20V1095.3z"/>
<path fill="#333333" d="M1251.6,1084.6c0-1.1-0.9-2-2-2c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2
C1250.7,1086.6,1251.6,1085.7,1251.6,1084.6z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1235" y1="1069" x2="1235" y2="1101"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1151.7,904.7c3-5.2,1.2-11.4-3.8-14.3c-5-2.9-11.3-1.4-14.3,3.8l-8-4.6l-10,17.3l34.6,20l10-17.3L1151.7,904.7z"/>
<path fill="#333333" d="M1143.4,897.9c-1-0.5-2.2-0.2-2.7,0.7c-0.6,1-0.2,2.2,0.7,2.7c1,0.6,2.2,0.2,2.7-0.7
C1144.7,899.7,1144.3,898.4,1143.4,897.9z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="1122" y1="903.8" x2="1149.7" y2="919.8"/>
</g>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M937.7,894.5c-3-5.2-9.3-6.7-14.3-3.8s-6.8,9.1-3.8,14.3l-8.1,4.7l10,17.3l34.6-20l-10-17.3L937.7,894.5z"/>
<path fill="#333333" d="M927.5,898.2c-0.9,0.6-1.3,1.8-0.7,2.7c0.6,1,1.8,1.3,2.7,0.7c1-0.6,1.3-1.8,0.7-2.7
C929.7,898,928.5,897.6,927.5,898.2z"/>
</g>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="921.8" y1="919.8" x2="949.6" y2="903.8"/>
</g>
</g>
</g>
</g>
</g>
<g id="Crash">
<g id="Crash-Stand-Top">
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M558,649.3l20.3-55.8c1.1-2.9-0.3-6.1-3.2-7.2c-2.9-1.1-6,0.5-7.1,3.4l-20.3,55.8L558,649.3z"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M575.4,610.2c1.6-4.3-0.6-9-4.9-10.6l-0.5-0.2c-4.3-1.6-9,0.6-10.6,4.9l-65.2,179.3l16,5.8L575.4,610.2z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M539.1,645.7c0,0.1-0.1,0.2-0.1,0.2l-0.2,0.5c-1.6,4.3,0.7,9,4.9,10.6l9.9,3.6c4.3,1.6,9-0.7,10.6-4.9l0.2-0.5
c0-0.1,0-0.2,0.1-0.2L539.1,645.7z"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M575.7,623.9c0-0.1,0.1-0.2,0.1-0.2l0.2-0.5c1.6-4.3-0.6-9-4.9-10.6l-9.9-3.6c-4.3-1.6-9,0.6-10.6,4.9l-0.2,0.5
c0,0.1,0,0.2-0.1,0.2L575.7,623.9z"/>
<g id="Crash-Cymbol">
<path fill="#FDE74C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M691.9,684.6l-48.7-18.7c-33.9-13-46.9-22.8-54.8-31.5c-3.3-3.4-9.8-9.5-16.9-12.1c-2.2-0.8-8.7-3.2-8.7-3.2s0,0-0.1,0
c-0.1,0-0.1,0-0.1,0s-6.6-2.4-8.7-3.2c-7.1-2.6-16.1-2.1-20.7-1.6c-11.7,1.5-28,0.7-62.3-11.1l-49.3-17
c-5.4-2-10.6-0.3-12.1,3.9l-0.1,0.1c-1.5,4.2,1.1,8.6,6.6,10.6l135.4,49.3l0.1,0l0.1,0l135.4,49.3c5.4,2,10.3,0.3,11.9-3.9
l0.1-0.1C700.2,691.2,697.3,686.6,691.9,684.6z"/>
<line fill="none" stroke="#FEF5B7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="572.3" y1="630.1" x2="546.6" y2="620.8"/>
</g>
</g>
<g id="Crash-Stand">
<rect x="493" y="787" fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17" height="409"/>
<g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M574.8,1269c-3.4,3.4-8.8,3.3-12.1-0.1l-66.7-66.7c-3.4-3.4-3.5-8.7-0.1-12.1l0,0c3.4-3.4,8.8-3.3,12.1,0.1l66.7,66.7
C578.1,1260.2,578.2,1265.6,574.8,1269L574.8,1269z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="566.9" y1="1265.8" x2="499.7" y2="1198.6"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M575.2,1257.4l-12,12c0,0,6.4,10.8,8,12.4c4.7,4.7,11.9,4.3,16.6-0.4c4.7-4.7,5.1-11.9,0.5-16.6
C586.8,1263.4,575.2,1257.4,575.2,1257.4z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M429,1268.7c-3.4-3.4-3.3-8.8,0.1-12.1l66.7-66.7c3.4-3.4,8.7-3.5,12.1-0.1l0,0c3.4,3.4,3.3,8.8-0.1,12.1l-66.7,66.7
C437.7,1272,432.3,1272.1,429,1268.7L429,1268.7z"/>
<line fill="none" stroke="#BCECE8" stroke-width="4" stroke-miterlimit="10" x1="437.2" y1="1265.8" x2="502" y2="1200.9"/>
<path fill="#5C5C5C" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M440.5,1269.1l-12-12c0,0-10.8,6.4-12.4,8c-4.7,4.7-4.3,11.9,0.4,16.6c4.7,4.7,11.9,5.1,16.6,0.5
C434.5,1280.7,440.5,1269.1,440.5,1269.1z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M488.6,1195.8c0-7.5,6-13.5,13.5-13.5s13.5,6,13.5,13.5c0,7.5-6,13.5-13.5,13.5S488.6,1203.2,488.6,1195.8z"/>
<path fill="#333333" d="M504.5,1192.5c-1.8-1.3-4.3-0.9-5.6,0.9c-1.3,1.8-0.9,4.3,0.9,5.6c1.8,1.3,4.3,0.9,5.6-0.9
C506.7,1196.3,506.3,1193.8,504.5,1192.5z"/>
</g>
</g>
<g>
<circle fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="517.7" cy="994.5" r="10"/>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M515,1006.1c0,6-4.9,10.9-10.9,10.9h-5.1c-6,0-10.9-4.9-10.9-10.9v-22.1c0-6,4.9-10.9,10.9-10.9h5.1c6,0,10.9,4.9,10.9,10.9
V1006.1z"/>
</g>
<g>
<path fill="#EEFAF9" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M488.4,786.8c0-7.5,6-13.5,13.5-13.5s13.5,6,13.5,13.5c0,7.5-6,13.5-13.5,13.5S488.4,794.2,488.4,786.8z"/>
<path fill="#333333" d="M504.3,783.5c-1.8-1.3-4.3-0.9-5.6,0.9c-1.3,1.8-0.9,4.3,0.9,5.6c1.8,1.3,4.3,0.9,5.6-0.9
C506.5,787.3,506.1,784.8,504.3,783.5z"/>
</g>
</g>
</g>
</g>
<g id="All-Keys" class="hidden" opacity="0.9">
<g id="Key-66">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M1103.5,1442.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V1442.5z"/>
<text transform="matrix(1 0 0 1 1011.9473 1411.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">B</text>
</g>
<g id="Key-74">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M1551.5,1442.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V1442.5z"/>
<text transform="matrix(1 0 0 1 1466.3574 1411.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">J</text>
</g>
<g id="Key-72">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M1393.5,1442.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V1442.5z"/>
<text transform="matrix(1 0 0 1 1300.0742 1411.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">H</text>
</g>
<g id="Key-71">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M751.5,1442.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V1442.5z"/>
<text transform="matrix(1 0 0 1 658.1689 1411.5645)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">G</text>
</g>
<g id="Key-70">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M564.5,1442.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V1442.5z"/>
<text transform="matrix(1 0 0 1 477.3369 1411.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">F</text>
</g>
<g id="Key-89">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M1278.5,638.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V638.5z"/>
<text transform="matrix(1 0 0 1 1190.5742 607.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">Y</text>
</g>
<g id="Key-84">
<path fill="none" stroke="#FDFFFC" stroke-width="9" stroke-miterlimit="10" d="M928.5,638.5c0,6.6-5.4,12-12,12h-107
c-6.6,0-12-5.4-12-12v-107c0-6.6,5.4-12,12-12h107c6.6,0,12,5.4,12,12V638.5z"/>
<text transform="matrix(1 0 0 1 841.3369 607.7119)" fill="#FDFFFC" font-family="'Montserrat'" font-size="76.2579">T</text>
</g>
</g>
</g>
</svg>
<!-- Audio stuff -->
<audio id="Big-Rack-Tom-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Big-Rack-Tom.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Crash-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Crash.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Floor-Tom-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Floor-Tom.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Hi-Hat-Closed-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Hi-Hat-Closed.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Hi-Hat-Open-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/High-Hat-Open.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Kick-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Kick.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Small-Rack-Tom-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Small-Rack-Tom.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="Snare-Audio">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/pens-of-rock/drums/Snare.mp3" preload="auto" type="audio/mp3" />
</audio>
<!-- Check out my other pens or hit me up on Twitter -->
<div id="footer" class="footer hidden">
<a target="blank" href="https://codepen.io/iamjoshellis/"><i class="fa fa-codepen"></i></a>
<p>Click, Touch or Keys to Play!</p>
<a target="blank" href="https://twitter.com/iamjoshellis/"><i class="fa fa-twitter"></i></a>
</div>
Raw
script.js
// Click, touch or keys to play!
// crash varibles
crashCymbolAll = document.getElementById('Crash');
crashCymbol = document.getElementById('Crash-Cymbol');
crashAudio = document.getElementById('Crash-Audio');
// right tom drum varibles
rightTomDrumAll = document.getElementById('Tom-Right-All');
rightTomDrum = document.getElementById('Tom-Right-Drum');
smallTomAudio = document.getElementById('Small-Rack-Tom-Audio');
// left tom drum varibles
leftTomDrumAll = document.getElementById('Tom-Left-All');
leftTomDrum = document.getElementById('Tom-Left-Drum');
bigTomAudio = document.getElementById('Big-Rack-Tom-Audio');
// hi-hat varibles
hiHatAll = document.getElementById('Hi-Hat');
hiHatTop = document.getElementById('Hi-Hat-Top');
hiHatBottom = document.getElementById('Hi-Hat-Bottom');
hiHatStandTop = document.getElementById('Hi-Hat-Stand-Top');
hiHatOpenAudio = document.getElementById('Hi-Hat-Open-Audio');
hiHatClosedAudio = document.getElementById('Hi-Hat-Closed-Audio');
// floor tom drum varibles
floorTomDrumAll = document.getElementById('Floor-Tom');
floorTomAudio = document.getElementById('Floor-Tom-Audio');
// snare drum varibles
snareDrumAll = document.getElementById('Snare');
snareDrum = document.getElementById('Snare-Drum');
snareAudio = document.getElementById('Snare-Audio');
// kick drum varibles
kickDrumAll = document.getElementById('Kick');
kickAudio = document.getElementById('Kick-Audio');
// Autoplay button
autoButton = document.getElementById('auto-button');
// crash wobble
var crashtl = new TimelineMax({
paused: true
});
crashtl.to(crashCymbol, 0.1, {rotation: 8, transformOrigin: "50% 50%"})
.to(crashCymbol,1.5, {rotation: 0, transformOrigin: "50% 50%", ease: Elastic.easeOut.config(2.5, 0.3)});
// crash audio
function playCrashAudio() {
crashAudio.currentTime = 0;
crashAudio.play();
}
// crash stuff
function crash(){
crashtl.restart();
crashtl.play();
playCrashAudio();
}
// Do the crash stuff when clicked
crashCymbolAll.addEventListener("click", crash);
// right tom drum wobble
var rightTomtl = new TimelineMax({
paused: true
});
rightTomtl.to(rightTomDrum, 0.1, {scaleX: 1.04, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(rightTomDrum, 0.1, {scaleY: 0.95, transformOrigin: "50% 50%", ease: Expo.easeOut}, '0')
.to(rightTomDrumAll, 0.1, {rotation: 2.5, transformOrigin: "0 50%", ease: Elastic.easeOut}, '0')
.to(rightTomDrum, 0.4, {scale: 1, transformOrigin: "50% 50%", ease: Elastic.easeOut})
.to(rightTomDrumAll, 0.6, {rotation: 0, transformOrigin: "0 50%", ease: Elastic.easeOut}, '-=0.4');
// right tom audio
function playSmallTomAudio() {
smallTomAudio.currentTime = 0;
smallTomAudio.play();
}
// right tom stuff
function rightTom(){
rightTomtl.restart();
rightTomtl.play();
playSmallTomAudio();
}
// Do the right tom stuff when clicked
rightTomDrumAll.addEventListener("click", rightTom);
// left tom drum wobble
var leftTomtl = new TimelineMax({
paused: true
});
leftTomtl.to(leftTomDrum, 0.1, {scaleX: 1.04, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(leftTomDrum, 0.1, {scaleY: 0.95, transformOrigin: "50% 50%", ease: Expo.easeOut}, '0')
.to(leftTomDrumAll, 0.1, {rotation: -2.5, transformOrigin: "100% 50%", ease: Elastic.easeOut}, '0')
.to(leftTomDrum, 0.4, {scale: 1, transformOrigin: "50% 50%", ease: Elastic.easeOut})
.to(leftTomDrumAll, 0.6, {rotation: 0, transformOrigin: "100% 50%", ease: Elastic.easeOut}, '-=0.4');
// left tom audio
function playBigTomAudio() {
bigTomAudio.currentTime = 0;
bigTomAudio.play();
}
// left tom tl stuff
function leftTom(){
leftTomtl.restart();
leftTomtl.play();
playBigTomAudio();
}
// Do the left tom stuff when clicked
leftTomDrumAll.addEventListener("click", leftTom);
// floor tom drum wobble
var floorTomtl = new TimelineMax({
paused: true
});
floorTomtl.to(floorTomDrumAll, 0.1, {scaleX: 1.02, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(floorTomDrumAll, 0.1, {scaleY: 0.95, transformOrigin: "50% 100%", ease: Expo.easeOut}, '0')
.to(floorTomDrumAll, 0.4, {scale: 1, transformOrigin: "50% 100%", ease: Elastic.easeOut});
// floor tom audio
function playFloorTomAudio() {
floorTomAudio.currentTime = 0;
floorTomAudio.play();
}
// floor tom tl stuff
function floorTom(){
floorTomtl.restart();
floorTomtl.play();
playFloorTomAudio();
}
// Do the floor tom stuff when clicked
floorTomDrumAll.addEventListener("click", floorTom);
// snare drum wobble
var snaretl = new TimelineMax({
paused: true
});
snaretl.to(snareDrum, 0.1, {scaleX: 1.04, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(snareDrum, 0.1, {scaleY: 0.9, transformOrigin: "50% 100%", ease: Expo.easeOut}, '0')
.to(snareDrum, 0.4, {scale: 1, transformOrigin: "50% 100%", ease: Elastic.easeOut});
// snare audio
function playSnareAudio() {
snareAudio.currentTime = 0;
snareAudio.play();
}
// snare tl stuff
function snare(){
snaretl.restart();
snaretl.play();
playSnareAudio();
}
// Do the snare stuff when clicked
snareDrumAll.addEventListener("click", snare);
// kick drum wobble
var kicktl = new TimelineMax({
paused: true
});
kicktl.to(kickDrumAll, 0.1, {scale: 1.02, transformOrigin: "50% 100%", ease: Expo.easeOut})
.to(kickDrumAll, 0.4, {scale: 1, transformOrigin: "50% 100%", ease: Elastic.easeOut});
// kick audio
function playKickAudio() {
kickAudio.currentTime = 0;
kickAudio.play();
}
// kick tl stuff
function kick(){
kicktl.restart();
kicktl.play();
playKickAudio();
}
// Do the kick stuff when clicked
kickDrumAll.addEventListener("click", kick);
// hi-hat stand up/down
var hiHatUptl = new TimelineMax({
paused: true
});
hiHatUptl.to(hiHatStandTop, 0.3, {y:"-5%", ease: Bounce.easeOut});
// hi-hat wobble
var hiHattl = new TimelineMax({
paused: true
});
hiHattl.to([hiHatTop, hiHatBottom], 0.1, {rotation: -4, transformOrigin: "50% 50%"})
.to([hiHatTop, hiHatBottom], 0.6, {rotation: 0, transformOrigin: "50% 50%", ease: Elastic.easeOut.config(1.5, 0.2)});
// high hat audio
function playHiHatClosedAudio() {
hiHatClosedAudio.currentTime = 0;
hiHatClosedAudio.play();
}
function playHiHatOpenAudio() {
hiHatOpenAudio.currentTime = 0;
hiHatOpenAudio.play();
}
// hi-hat counter and tl stuff
hiHati = 0;
function hiHat() {
++hiHati;
hiHattl.restart();
hiHattl.play();
if (hiHati < 8) {
hiHatUptl.reverse();
playHiHatClosedAudio();
} else {
hiHatUptl.play();
playHiHatOpenAudio();
hiHati = 0;
}
}
// Do the hi-hat stuff when clicked
hiHatAll.addEventListener("click", hiHat);
// key guide
allKeys = document.getElementById('All-Keys');
key66 = document.getElementById('Key-66');
key72 = document.getElementById('Key-72');
// key wobble
function animateKey(key) {
keytl = new TimelineMax({
paused: true
});
keytl.to(key, 0.1, {scale: 1.1, transformOrigin: "50% 50%", ease: Expo.easeOut})
.to(key, 0.4, {scale: 1, transformOrigin: "50% 50%", ease: Elastic.easeOut});
keytl.restart();
keytl.play();
}
// key triggers
document.onkeydown = function(e) {
allKeys.classList.remove("hidden");
thisKeyID = 'Key-' + e.keyCode;
thisKey = document.getElementById(thisKeyID);
animateKey(thisKey);
switch (e.keyCode) {
case 74:
hiHat();
break;
case 72:
snare();
break;
case 66:
kick();
break;
case 71:
floorTom();
break;
case 70:
crash();
break;
case 84:
leftTom();
break;
case 89:
rightTom();
break;
}
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
Raw
style.scss
html, body {
overflow: hidden;
}
body{
background: #141414; /*was EC4A5E */
}
svg {
height: 100vh;
width: 100vw;
display: block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
i {
color: $white;
}
i:hover {
color: $gray-light;
}
#Drums:hover {
cursor: pointer;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://codepen.io/iamjoshellis/pen/LVvbzy" rel="stylesheet" />
Raw
svg-animated-drum-kit-play-me.markdown

SVG Animated Drum Kit (Play Me!) 🥁

Rock out with this interactive svg animation, click, tap, or keys to play! Part of my Pen's of Rock! collection. Drawn in adobe illustrator, animated with greensock. Turn your speakers up for html audio elements in your ears! Weird bounding box appears when tapped on mobile, any ideas?

A Pen by Stan Williams on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment