以下是 HTML5 SVG制作电子鼓打击音乐特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 SVG制作电子鼓打击音乐特效 </title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="content">
<div id="container-sequencer" class="container-sequencer collapse">
<div id="sequencer" class="sequencer">
<div class="row" data-target-drum="crash">
<img src="img/crash.png" alt="Crash">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="hiHat">
<img src="img/hi-hat.png" alt="Hi hat">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="snare">
<img src="img/snare.png" alt="Snare">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="rightTom">
<img src="img/right-tom.png" alt="Right tom">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="leftTom">
<img src="img/left-tom.png" alt="Left tom">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="floorTom">
<img src="img/floor-tom.png" alt="Floor tom">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="row" data-target-drum="kick">
<img src="img/kick.png" alt="Kick">
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
<label><input type="checkbox"><span></span></label>
</div>
<div class="sequencer-controls">
<button id="sequencer-active-btn" class="btn" aria-label="Play"><i class="fa fa-play"></i></button>
<div class="sequencer-controls-tempo">
<button id="bpm-decrease-btn" class="btn" aria-label="Decrease bpm"><i class="fa fa-minus"></i></button>
<input id="bpm-indicator" type="number" min="100" max="300" size="3" value="150" readonly>
<button id="bpm-increase-btn" class="btn" aria-label="Iecrease bpm"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
<div id="container-drums" class="container-drums">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 790" preserveAspectRatio="xMidYMid meet">
<g id="Drums">
<path id="Drum-Shadow" d="M999.77,656.9c0,36.16-223.73,65.48-499.77,65.48S0.23,693.06.23,656.9,224,591.42,500,591.42,999.77,620.65,999.77,656.9Z" transform="translate(-0.23)" fill="#b0bcc5"/>
<g id="Snare">
<g id="Snare-Drum">
<path d="M655.47,320.79H843.88v92.94H655.47V320.79Z" transform="translate(-0.23)" fill="#eb495d" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M840.5,345.29H658.84" transform="translate(-0.23)" fill="none" stroke="#e61c35" stroke-miterlimit="10" stroke-width="8"/>
<g>
<path d="M662.22,375.71a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Zm188.42,0a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M718,393.45v-11m0-30.42v-11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M724.75,375.71a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M781.36,393.45v-11m0-30.42v-11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M788.12,375.71a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M647,320.79H850.64v17.74H647V320.79Zm0,75.2H850.64v17.74H647V396Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M650.4,333.46H847.26M650.4,408.66H847.26" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
<g id="Snare-Stand">
<path d="M741.65,491.46H756v80.27H741.65V491.46Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M811.18,634.25a7.14,7.14,0,0,1-10.22-.08L744.6,577.81a7.17,7.17,0,1,1,10.14-10.14L811.1,624A7.29,7.29,0,0,1,811.18,634.25Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M804.42,631.55l-56.78-56.78" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M811.52,624.45l-10.14,10.14s5.41,9.13,6.76,10.48c4,4,10.05,3.63,14-.34s4.31-10.05.42-14C821.24,629.52,811.52,624.45,811.52,624.45Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M687.91,634a7.14,7.14,0,0,1,.08-10.22l56.36-56.36a7.17,7.17,0,1,1,10.14,10.14l-56.36,56.36A7.14,7.14,0,0,1,687.91,634Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M694.84,631.55l54.75-54.84" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M697.63,634.34L687.49,624.2S678.36,629.61,677,631c-4,4-3.63,10.05.34,14s10.05,4.31,14,.42C692.56,644.14,697.63,634.34,697.63,634.34Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<path d="M738.27,572.41a11.41,11.41,0,1,1,11.41,11.41A11.36,11.36,0,0,1,738.27,572.41Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M751.7,569.62a3.39,3.39,0,1,0,.76,4.73A3.38,3.38,0,0,0,751.7,569.62Z" transform="translate(-0.23)" fill="#333"/>
<g>
<path d="M647.86,400.72a5.49,5.49,0,1,0-11,0V411.2h11V400.72Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M647.86,415.67V411.2h-11v8.45c0,3,2.11,6,5.15,6.34l103.33,11.49,1-10.9-98.52-10.9h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M642.54,423.53l100.38,11.24,0.17-1.69L640.34,421.59a2.86,2.86,0,0,0,2.2,1.94h0Z" transform="translate(-0.23)" fill="#bcece8"/>
<g>
<path d="M860.78,411.2h-11v4.48l-96.91,10.81,1.35,10.9L856.13,426c3-.34,4.73-3.38,4.73-6.34V411.2h-0.08Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M756.35,432.91l0.17,1.69L856,423.53a2.88,2.88,0,0,0,2.11-1.61Z" transform="translate(-0.23)" fill="#bcece8"/>
<path d="M860.78,400.72a5.49,5.49,0,1,0-11,0V411.2h11V400.72Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M744,432.3l11,0.06-0.36,63.37-11-.06Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<circle cx="749.44" cy="432.15" r="7.18" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<circle cx="749.44" cy="432.15" r="1.69" fill="#333"/>
<g>
<path d="M823.86,421.84a5.48,5.48,0,0,0-7.77-.08l-70.8,70,7.69,7.77,70.8-70A5.38,5.38,0,0,0,823.86,421.84Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M815.83,432.32l-54.67,54.07" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="820.42" cy="424.55" r="7.18" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<circle cx="820.42" cy="424.55" r="1.69" fill="#333"/>
</g>
<g>
<path d="M676.25,421a5.48,5.48,0,0,0-.08,7.77l70,70.8,7.77-7.69-70-70.8a5.38,5.38,0,0,0-7.69-.08h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M679.71,427.25l58.55,59.14" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="680.16" cy="424.55" r="7.18" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<circle cx="680.16" cy="424.55" r="1.69" fill="#333"/>
</g>
</g>
<path d="M764.46,493.24a7.54,7.54,0,0,1-7.52,7.52H741.56a7.54,7.54,0,0,1-7.52-7.52v-3.55a7.54,7.54,0,0,1,7.52-7.52h15.38a7.54,7.54,0,0,1,7.52,7.52v3.55Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
</g>
<g id="Floor-Tom">
<g id="Floor-Tom-Drum">
<path d="M160.34,314.87H402.83V585.25H160.34V314.87Z" transform="translate(-0.23)" fill="#eb495d" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M399.45,339.38H163.72" transform="translate(-0.23)" fill="none" stroke="#e61c35" stroke-miterlimit="10" stroke-width="8"/>
<g>
<path d="M167.1,367.26a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Zm242.49,0a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M241.45,343.6v-11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M248.21,367.26a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M321.72,343.6v-11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M328.48,367.26a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M152.74,314.87H409.59v17.74H152.74V314.87Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M156.12,327.55h250.1" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<g>
<g>
<path d="M409.59,549.76a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Zm-242.49,0a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M321.72,556.52v11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M328.48,549.76a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M241.45,556.52v11" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M248.21,549.76a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M153.58,567.51H410.44v17.74H153.58V567.51Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M157,580.18h250.1" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
<g id="Floor-Tom-Legs">
<path d="M147.92,521.71l-9.55,44.53v64.38a4.73,4.73,0,0,0,4.65,4.82,4.67,4.67,0,0,0,4.65-4.82V567.25l9.55-44.53,9.38-44.53,3-14-9.21-1.86-12.42,59.4h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M153.92,625l-5.75-9.29h-9.29L133.3,625a11.43,11.43,0,0,0-1.69,6.17,12,12,0,0,0,12,12,12.13,12.13,0,0,0,12-12.17,14.12,14.12,0,0,0-1.69-6h0Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M170.48,429.78a8.88,8.88,0,0,0-17.74,0v49h17.74v-49Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M278.63,630.62a4.73,4.73,0,0,0,4.65,4.82,4.67,4.67,0,0,0,4.65-4.82V477.1h-9.29V630.62Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M294.18,625l-5.75-9.29h-9.29L273.56,625a11.43,11.43,0,0,0-1.69,6.17,12,12,0,0,0,12,12,12.13,12.13,0,0,0,12-12.17,14.12,14.12,0,0,0-1.69-6h0Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M292.15,429.78a8.88,8.88,0,0,0-17.74,0v49h17.74v-49Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M416,521.71l-12-59.57L395,464l2.87,14,9,44.53,8.79,44.53v63.37a4.73,4.73,0,0,0,4.65,4.82,4.67,4.67,0,0,0,4.65-4.82V566.07L416,521.71h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M431.05,625l-5.75-9.29H416L410.44,625a11.43,11.43,0,0,0-1.69,6.17,12,12,0,0,0,12,12,12.13,12.13,0,0,0,12-12.17,14.12,14.12,0,0,0-1.69-6h0Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M392.7,429.78a8.88,8.88,0,0,1,17.74,0v49H392.7v-49Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
</g>
<g id="Hi-Hat">
<g id="Hi-Hat-Stand-Top">
<path d="M887.82,290.37V190.84a4.73,4.73,0,0,0-4.65-4.82,4.67,4.67,0,0,0-4.65,4.82v99.53h9.29Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M890.35,416.94a6.91,6.91,0,0,1-6.93,6.93H883a6.91,6.91,0,0,1-6.93-6.93V216.19a6.91,6.91,0,0,1,6.93-6.93h0.42a6.91,6.91,0,0,1,6.93,6.93V416.94h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M878.52,249h9.29v65.9h-9.29V249Z" transform="translate(-0.23)" fill="#bcece8"/>
<path d="M895.08,227.85c0-.84-0.51-0.51-0.51-0.59v-0.42a6.23,6.23,0,0,0-6.51-6.59H879.2c-3.89,0-7.44,2.7-7.44,6.59v0.42c0,0.08.51-.25,0.51,0.59h22.81Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g id="Hi-Hat-Top">
<path d="M960.23,240.27l-27.88-.68c-19.43-.42-27.8-3.8-33.37-7.6v0.17a16.91,16.91,0,0,0-10.73-3.55h-10a17.15,17.15,0,0,0-10.82,3.55v-0.08c-5.58,3.8-14,7.1-33.46,7.52l-28.3.59a5.6,5.6,0,0,0-5.83,5.41v0.08c0,3.13,3,5.66,6.08,5.66H960.4c3.13,0,5-2.53,5-5.66v-0.08a5,5,0,0,0-5.15-5.32h0Z" transform="translate(-0.23)" fill="#fde74c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M875.14,234.61h15.21" transform="translate(-0.23)" fill="none" stroke="#fef5b7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
</g>
<g id="Hi-Hat-Bottom">
<path d="M805.78,264.43l27.8,0.68c19.43,0.42,28.05,3.8,33.12,7.6,3.38,2.37,7.52,4.14,11.58,4.14h10a17.51,17.51,0,0,0,10.82-4V272.8c5.58-3.8,14-7.18,33.46-7.69l27.8-.68a5.24,5.24,0,0,0,5.32-5.49v-0.08c0-3.13-1.94-4.9-5-4.9H806.2c-3.13,0-6.08,1.77-6.08,4.9v0.08c-0.17,3.21,2.53,5.49,5.66,5.49h0Z" transform="translate(-0.23)" fill="#fde74c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M875.14,270.94h15.21" transform="translate(-0.23)" fill="none" stroke="#bead39" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" opacity="0.3"/>
</g>
<g id="Hi-Hat-Stand">
<path d="M876,276.85h14.36V586.94H876V276.85Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M945,647.77a7.14,7.14,0,0,1-10.22-.08l-56.36-56.36a7.17,7.17,0,1,1,10.14-10.14l56.36,56.36A7.14,7.14,0,0,1,945,647.77Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M938.34,645.07l-56.78-56.78" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M945.36,638l-10.14,10.14s5.41,9.13,6.76,10.48c4,4,10.05,3.63,14-.34s4.31-10.05.42-14C955.16,643,945.36,638,945.36,638Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M821.83,647.52a7.14,7.14,0,0,1,.08-10.22l56.36-56.36a7.17,7.17,0,1,1,10.14,10.14l-56.36,56.36A7.14,7.14,0,0,1,821.83,647.52Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M828.76,645.07l54.75-54.84" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M831.55,647.86l-10.14-10.14s-9.13,5.41-10.48,6.76c-4,4-3.63,10.05.34,14s10.05,4.31,14,.42C826.48,657.66,831.55,647.86,831.55,647.86Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<path d="M872.19,585.92a11.41,11.41,0,1,1,11.41,11.41A11.36,11.36,0,0,1,872.19,585.92Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M885.62,583.14a3.39,3.39,0,1,0,.76,4.73A3.38,3.38,0,0,0,885.62,583.14Z" transform="translate(-0.23)" fill="#333"/>
<g>
<circle cx="896.54" cy="416.69" r="8.45" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M894.58,426.49a9.23,9.23,0,0,1-9.21,9.21h-4.31a9.23,9.23,0,0,1-9.21-9.21V407.82a9.23,9.23,0,0,1,9.21-9.21h4.31a9.23,9.23,0,0,1,9.21,9.21v18.67Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<path d="M872.27,276.85a1.2,1.2,0,0,0-.51-0.17v0.42a7.72,7.72,0,0,0,7.44,7.35h8.87c3.89,0,6.51-3.55,6.51-7.35v-0.42a1.2,1.2,0,0,1,.51.17H872.27Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<g id="Main-Kit">
<g id="Toms">
<g id="Tom-Rack">
<path d="M478,215.85a8.51,8.51,0,0,1,8.45,8.62v85.34c0,5.07-16.9,5.07-16.9,0V224.47A8.51,8.51,0,0,1,478,215.85Zm36.33,94V224.47a8.45,8.45,0,1,1,16.9,0v85.34C531.26,314.54,514.36,314.54,514.36,309.81Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M540.22,309.81a9.27,9.27,0,0,1-9.29,9.29H470.09a9.29,9.29,0,0,1,0-18.59h60.83A9.27,9.27,0,0,1,540.22,309.81Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g id="Tom-Left-All">
<g id="Tom-Left-Drum">
<path d="M259.2,146.74H445.93V302.2H259.2V146.74Z" transform="translate(-0.23)" fill="#eb495d" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M262.58,171.24h180" transform="translate(-0.23)" fill="none" stroke="#e61c35" stroke-miterlimit="10" stroke-width="8"/>
<g>
<path d="M265.11,197.43a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Zm187.57,0a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M320.88,173.77v-11" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M327.64,197.43a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M383.4,173.77v-11" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M390.16,197.43a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M251.59,146.74H452.68v17.74H251.59V146.74Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M449.3,159.41H255" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<g>
<g>
<path d="M452.68,268.4a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Zm-187.57,0a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M383.4,275.16v11" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M390.16,268.4a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M320.88,275.16v11" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M327.64,268.4a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M251.59,284.46H452.68V302.2H251.59V284.46Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M449.3,298H255" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
<path d="M435.79,233.85a9.23,9.23,0,0,1-9.21,9.21h-4.31a9.23,9.23,0,0,1-9.21-9.21V215.17a9.23,9.23,0,0,1,9.21-9.21h4.31a9.23,9.23,0,0,1,9.21,9.21v18.67Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M432.83,237.14h-16a6.68,6.68,0,0,0,5.83,3.38H427A6.58,6.58,0,0,0,432.83,237.14Z" transform="translate(-0.23)" fill="#bcece8"/>
<path d="M431.65,232.92h45.54c5.07,0,9-3.72,9-8.45A8.16,8.16,0,0,0,478,216H431.65A8.45,8.45,0,1,0,431.65,232.92Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M483.36,227H426.07a6,6,0,0,0,5.49,3.38h46A6.08,6.08,0,0,0,483.36,227Z" transform="translate(-0.23)" fill="#bcece8"/>
<circle cx="477.8" cy="224.3" r="11.24" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M480.06,221.6a3.39,3.39,0,1,0,.76,4.73A3.38,3.38,0,0,0,480.06,221.6Z" transform="translate(-0.23)" fill="#333"/>
</g>
<g id="Tom-Right-All">
<g id="Tom-Right-Drum">
<path d="M555.76,146.74H742.49V302.2H555.76V146.74Z" transform="translate(-0.23)" fill="#eb495d" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M559.14,171.24h180" transform="translate(-0.23)" fill="none" stroke="#e61c35" stroke-miterlimit="10" stroke-width="8"/>
<g>
<path d="M561.68,197.43a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Zm187.57,0a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M617.44,173.77v-11" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M624.2,197.43a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M680,173.77v-11" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M686.73,197.43a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M548.16,146.74H749.25v17.74H548.16V146.74Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M745.87,159.41H551.54" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<g>
<g>
<path d="M749.25,268.4a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Zm-187.57,0a6.76,6.76,0,0,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M680,275.16v11" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M686.73,268.4a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,1,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M617.44,275.16v11" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M624.2,268.4a6.76,6.76,0,1,1-13.52,0v-16.9a6.76,6.76,0,0,1,13.52,0v16.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<path d="M548.16,284.46H749.25V302.2H548.16V284.46Z" transform="translate(-0.23)" fill="#f8fdfd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M745.87,298H551.54" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
<path d="M587.87,215.09a9.23,9.23,0,0,0-9.21-9.21h-4.31a9.23,9.23,0,0,0-9.21,9.21v18.67a9.23,9.23,0,0,0,9.21,9.21h4.31a9.23,9.23,0,0,0,9.21-9.21V215.09Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M568.78,237.14h16a6.68,6.68,0,0,1-5.83,3.38h-4.31A6.78,6.78,0,0,1,568.78,237.14Z" transform="translate(-0.23)" fill="#bcece8"/>
<path d="M570,232.92H523.66a8.31,8.31,0,0,1-8.62-8.45,8.51,8.51,0,0,1,8.62-8.45H570A8.45,8.45,0,1,1,570,232.92Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M518.25,227h57.29a6,6,0,0,1-5.49,3.38H524a6.16,6.16,0,0,1-5.75-3.38h0Z" transform="translate(-0.23)" fill="#bcece8"/>
<circle cx="523.34" cy="224.3" r="11.24" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M521.63,221.6a3.39,3.39,0,1,1-.76,4.73A3.38,3.38,0,0,1,521.63,221.6Z" transform="translate(-0.23)" fill="#333"/>
</g>
</g>
<g id="Kick">
<g id="Kick-Stand">
<path d="M314.29,460.45a8.89,8.89,0,0,1,17.74.84l-2.28,49L312,509.46Zm11.24,49.68L319,651.58a4.68,4.68,0,0,1-4.9,4.56,4.61,4.61,0,0,1-4.39-5l6.51-141.44Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M304.23,645.24l6.17-9,9.29,0.34,5.15,9.46c1,2.53,1.52,4.06,1.44,6.34a12,12,0,0,1-12.5,11.41,12.19,12.19,0,0,1-11.41-12.67A12.83,12.83,0,0,1,304.23,645.24Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M686.81,460.45a8.89,8.89,0,0,0-17.74.84l2.28,49,17.74-.84Zm-11.24,49.68,6.51,141.44a4.68,4.68,0,0,0,4.9,4.56,4.61,4.61,0,0,0,4.39-5l-6.51-141.44Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M696.87,645.24l-6.17-9-9.29.34-5.15,9.46c-1,2.53-1.52,4.06-1.44,6.34a12,12,0,0,0,12.5,11.41,12.19,12.19,0,0,0,11.41-12.67,13.91,13.91,0,0,0-1.86-5.91h0Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
</g>
<g id="Kick-Drum">
<circle cx="500.28" cy="489.77" r="177.43" fill="#eb495d" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<circle id="Inner-Drum-Wobble" cx="500.28" cy="489.77" r="170" fill="none"/>
<circle id="Inner-Drum" cx="500.28" cy="489.77" r="162.73" fill="#fdfffc" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<g id="Drum-Logo-Wobble">
<path d="M454,369.12l-3.63,16.81H451c6,0,10.31-7,10.31-12.67,0-4.06-2.28-7.6-7.94-7.6-11.74,0-19.52,6.59-19.52,17.57a9.43,9.43,0,0,0,1,4.9c-5,0-7.77-1.77-7.77-7,0-9.63,13.35-18.84,25.43-18.84,11.41,0,16.39,5.66,16.39,11.58,0,4.39-2.79,9.46-7.77,12.34,3.8,1.1,5,3.8,5,7.27,0,5.91-3.55,13.86-3.55,18.33a5,5,0,0,0,2.79,4.82,28.5,28.5,0,0,1-7.18,1.27c-4.73,0-5.66-2.45-5.66-4.82,0-4.82,3.8-13.52,3.8-19,0-2.87-1.1-4.9-4.31-4.9a11.75,11.75,0,0,0-2.28.25l-5.83,27.29H433.5l9.89-46Zm74.44,11.15a10.5,10.5,0,0,0-6.25,2.11L525.6,366l-10.73,1.44-8,37.6a17.54,17.54,0,0,0-.42,3.38,7.55,7.55,0,0,1-3.8,1.61c-2.87,0-3.63-1.18-3.63-2.79,0-.68.17-1.69,0.25-2.45l5.24-24.84H494.09l-5.24,24.84a14.42,14.42,0,0,0-.42,2.53c-1.77,1.44-3.63,2.7-5.15,2.7-2.87,0-3.63-1.1-3.63-2.7,0-.68.17-1.69,0.25-2.45L485.13,380H474.74l-5.24,24.84a21.76,21.76,0,0,0-.42,3.8c0,5.41,3.46,7.94,9,7.94,3.13,0,7-2.87,10.39-6.08,0.68,4.22,4,6.08,8.87,6.08,2.79,0,6.25-2.37,9.38-5.15,1.27,4,5.58,5.41,11.49,5.41,12.93,0,19.18-16,19.18-27.38C537.51,385.17,535.32,380.27,528.39,380.27Zm-8.53,31.35c-2.2,0-3.21-.51-3.21-2.7a23.67,23.67,0,0,1,.59-4l4.14-19.43a11.05,11.05,0,0,1,3.89-1c1.77,0,4.14,1,4.14,5.32,0,5.32-3.55,21.8-9.55,21.8h0Zm34.22-31.26-5.32,24.59a7.47,7.47,0,0,0-.34,2.28c0,1.61.76,2.7,3.63,2.7,1.69,0,3.63-1.27,5.49-2.87l5.66-26.7h10.48l-8.87,42c-2.2,10.31-8.36,12.34-13.18,12.34-4.39,0-8.53-3.13-8.53-7.86,0-6.76,5.66-8.87,12.5-10.81l1.1-5c-3.3,3-6.93,5.58-9.8,5.58-5.66,0-9-2.45-9-7.86a20.88,20.88,0,0,1,.42-3.72l5.07-24.59h10.65v-0.08ZM550,428.26c1.44,0,3.38-1.35,4.31-5.66l0.84-4.31c-4.56,1.52-8,3.63-8,7.52C547.06,426.83,548.41,428.26,550,428.26Zm-117.61-2.7H536.33" transform="translate(-0.23)" fill="none"/>
</g>
<g id="Codrops">
<path d="M584.07,408.24a16.5,16.5,0,0,0-.17-1.94,20.94,20.94,0,0,1-.17-2.45c-0.08-.93-0.17-2.11-0.25-3.38s-0.17-3-.25-4.73-0.17-4-.34-6.51l-8.53,1.1c-0.93,2.87-1.86,5.66-3,8.45a70.62,70.62,0,0,1-4.06,8.53,3,3,0,0,0-.84.59,32.87,32.87,0,0,0,.76-4,37.66,37.66,0,0,0,.25-4.22,15.86,15.86,0,0,0-.51-4.31,6.31,6.31,0,0,0-1.52-2.79,5.72,5.72,0,0,0-2.2-1.52,7.43,7.43,0,0,0-2.79-.42,10.53,10.53,0,0,0-3.8.68,14.26,14.26,0,0,0-2.87,1.94l0.93-4.14h-8.28l-2.11,9.63-0.08-.08a11.83,11.83,0,0,1-2.37.51,9.75,9.75,0,0,1-2.2.08h-0.34l-0.51.34v-0.08c0-6.08-2.37-9.21-7.27-9.21a12.47,12.47,0,0,0-5.15,1,14.36,14.36,0,0,0-4,2.7c0-.17-0.08-0.34-0.08-0.51a3.52,3.52,0,0,0-.76-1.35,4.92,4.92,0,0,0-1.27-.93,3.78,3.78,0,0,0-1.69-.34,5,5,0,0,0-1.94.34,16,16,0,0,0-1.77.76,10.76,10.76,0,0,0-1.61,1.1l-1.52,1.27,0.76-3.55h-8.28l-3.89,18.5-0.76,2a13.29,13.29,0,0,1-1,1.61,6.66,6.66,0,0,1-1.27,1,3.16,3.16,0,0,1-1.52.42A3,3,0,0,1,494,414a2,2,0,0,1-.59-1.69,3.47,3.47,0,0,1,.08-0.93,3.59,3.59,0,0,1,.17-0.93l6.59-31-8.36,1.18-2.7,13.18v-0.25a2.73,2.73,0,0,0-1.27-2.11,5.91,5.91,0,0,0-3.63-.84,11.28,11.28,0,0,0-4.56.93A12.12,12.12,0,0,0,476,394a20.15,20.15,0,0,0-2.87,3.63,3.42,3.42,0,0,0-.42.76c-0.08,0-.17.08-0.25,0.08a12.12,12.12,0,0,1-2.37.59,9.75,9.75,0,0,1-2.2.08h-0.34l-0.42.34v-0.08c0-6.08-2.37-9.21-7.35-9.21a12.88,12.88,0,0,0-5.24,1,13.37,13.37,0,0,0-4.06,2.79,18.9,18.9,0,0,0-3,3.89,26.24,26.24,0,0,0-3.13,8.87,28.06,28.06,0,0,0-.34,3.46,13.83,13.83,0,0,1-4,3,13.4,13.4,0,0,1-6.25,1.52,8.15,8.15,0,0,1-3.46-.68,4.54,4.54,0,0,1-2.11-1.86,8.36,8.36,0,0,1-1.1-2.79,16.36,16.36,0,0,1-.25-3.63,51.42,51.42,0,0,1,.42-6.08,45.59,45.59,0,0,1,1.27-6.08,55.52,55.52,0,0,1,1.86-5.66,26.57,26.57,0,0,1,2.45-4.65,15.46,15.46,0,0,1,2.87-3.21,5.16,5.16,0,0,1,3.13-1.18,4.26,4.26,0,0,1,1.61.25,2.57,2.57,0,0,1,1.1.76,2.78,2.78,0,0,1,.59,1.1,6.57,6.57,0,0,1,.17,1.35,5.85,5.85,0,0,1-.25,1.69,6.35,6.35,0,0,1-.59,1.52,4.74,4.74,0,0,1-.84,1.27,4,4,0,0,1-1,.76,3.32,3.32,0,0,0,1.69,1.27,5.68,5.68,0,0,0,1.52.25,4,4,0,0,0,1.86-.42,3.16,3.16,0,0,0,1.27-1.1,3.76,3.76,0,0,0,.68-1.69,16.46,16.46,0,0,0,.17-2.11,7.84,7.84,0,0,0-.76-3.55,6.18,6.18,0,0,0-2-2.37,8.35,8.35,0,0,0-3-1.35,17.9,17.9,0,0,0-3.72-.42,14.35,14.35,0,0,0-5.15.84,15.21,15.21,0,0,0-4.31,2.37,19.71,19.71,0,0,0-3.46,3.55,28.38,28.38,0,0,0-2.7,4.31,41.16,41.16,0,0,0-2,4.82,36.39,36.39,0,0,0-1.35,5,47.5,47.5,0,0,0-.76,4.82,39.11,39.11,0,0,0-.25,4.31,24.79,24.79,0,0,0,.76,6.59,10,10,0,0,0,2.37,4.39,9.83,9.83,0,0,0,3.89,2.45,18.16,18.16,0,0,0,5.58.76,17,17,0,0,0,4.39-.59,19.79,19.79,0,0,0,4.65-1.86,17.32,17.32,0,0,0,4.22-3.3,14.68,14.68,0,0,0,1.1-1.27,7.14,7.14,0,0,0,.42,1.44,6.16,6.16,0,0,0,1.94,2.79,8.31,8.31,0,0,0,3,1.61,12.76,12.76,0,0,0,3.72.51,11.11,11.11,0,0,0,5-1.18,12.45,12.45,0,0,0,4.14-3.46,22,22,0,0,0,3-5.41,30,30,0,0,0,1.52-7.18,21.26,21.26,0,0,0,4.14-1.1,4.12,4.12,0,0,0-.25.59,29.23,29.23,0,0,0-1.18,4.48,25.54,25.54,0,0,0-.42,4.22,12.81,12.81,0,0,0,.68,4.31,8.62,8.62,0,0,0,1.69,2.87,5.9,5.9,0,0,0,2.45,1.61,8.23,8.23,0,0,0,2.87.51,9.65,9.65,0,0,0,2.79-.42,12.38,12.38,0,0,0,2.37-1.18,9.06,9.06,0,0,0,1.86-1.69,10.49,10.49,0,0,0,1.44-1.94,6.18,6.18,0,0,0,1.77,3.72,5.74,5.74,0,0,0,3.8,1.27,11.9,11.9,0,0,0,1.69-.08,9.46,9.46,0,0,0,1.94-.51,15.79,15.79,0,0,0,2.11-1,11.57,11.57,0,0,0,1.94-1.69l-0.68,3.3h8.28l4.56-21.8a14.91,14.91,0,0,1,1.94-1.61,3.72,3.72,0,0,1,2.2-.59,0.66,0.66,0,0,1,.59.25,1.61,1.61,0,0,1,.25.68,3,3,0,0,1,.17.93,4.12,4.12,0,0,0,.34.93,1.73,1.73,0,0,0,.68.68,2.37,2.37,0,0,0,1.27.25h0.34c-0.51,1-.93,2.11-1.35,3.21a22.28,22.28,0,0,0-1.1,4.39,21.76,21.76,0,0,0-.34,3.8,12.65,12.65,0,0,0,.68,4.22,6.16,6.16,0,0,0,1.94,2.79,8.31,8.31,0,0,0,3,1.61,12.76,12.76,0,0,0,3.72.51,11.11,11.11,0,0,0,5-1.18,12.45,12.45,0,0,0,4.14-3.46,22,22,0,0,0,3-5.41,30,30,0,0,0,1.52-7.18,21.24,21.24,0,0,0,4.82-1.35l-6.93,32.78,8.7-2.11,3-14a4.65,4.65,0,0,0,.59.76,3.75,3.75,0,0,0,.93.68,6.33,6.33,0,0,0,1.35.42,11.87,11.87,0,0,0,1.94.17,12.67,12.67,0,0,0,4.9-.93,11.6,11.6,0,0,0,3.72-2.53,11.9,11.9,0,0,0,2.28-3.13,16,16,0,0,0,.42,1.94,7.09,7.09,0,0,0,1.52,2.37,8.24,8.24,0,0,0,2.62,1.69,9.74,9.74,0,0,0,3.72.68c0.76,0,1.61-.08,2.53-0.17a14.94,14.94,0,0,0,2.62-.68,13.46,13.46,0,0,0,2.45-1.27,8.43,8.43,0,0,0,2-1.86,12.32,12.32,0,0,0,1.44-2.53,10.52,10.52,0,0,0,.51-3.38,8.93,8.93,0,0,0,.17-2h0Zm-122.94-9.8a3.5,3.5,0,0,0-.51,1.94,2.89,2.89,0,0,0,.34,1.52,1.58,1.58,0,0,0,1.18.84,35.75,35.75,0,0,1-1,4.73,19.79,19.79,0,0,1-1.61,3.8,9.07,9.07,0,0,1-1.94,2.53,3.36,3.36,0,0,1-2.11.93,5.88,5.88,0,0,1-1.35-.17,2.4,2.4,0,0,1-.93-0.68,3.19,3.19,0,0,1-.51-1.44,16.14,16.14,0,0,1-.17-2.37,22.27,22.27,0,0,1,.25-3.21,26.6,26.6,0,0,1,.76-3.55c0.34-1.18.76-2.37,1.18-3.46a25.68,25.68,0,0,1,1.61-3,11.65,11.65,0,0,1,1.77-2.11,3.19,3.19,0,0,1,2-.76,2.61,2.61,0,0,1,.93.17,1.33,1.33,0,0,1,.59.59,2.82,2.82,0,0,1,.42,1,7.58,7.58,0,0,1,.17,1.52,5,5,0,0,0-1.1,1.18h0Zm24.5,11v0.34a4.39,4.39,0,0,1-.93,2.11,7.57,7.57,0,0,1-1.27,1.52,3.59,3.59,0,0,1-1.44.84,4.2,4.2,0,0,1-1.35.25,3.79,3.79,0,0,1-.93-0.08,2,2,0,0,1-.93-0.51,4.78,4.78,0,0,1-.76-1.35,9.16,9.16,0,0,1-.34-2.53,20.1,20.1,0,0,1,.25-3,28.54,28.54,0,0,1,.76-3.46c0.34-1.18.76-2.28,1.18-3.38a19.34,19.34,0,0,1,1.61-3,9.47,9.47,0,0,1,1.94-2.11,4.09,4.09,0,0,1,2.28-.76,3.75,3.75,0,0,1,1.1.17,4.69,4.69,0,0,1,.68.51,1.7,1.7,0,0,1,.34.68,3.06,3.06,0,0,1,.25.59l-2.45,13.18h0Zm47.4-11a3.5,3.5,0,0,0-.51,1.94,2.89,2.89,0,0,0,.34,1.52,1.58,1.58,0,0,0,1.18.84,35.75,35.75,0,0,1-1,4.73,19.78,19.78,0,0,1-1.61,3.8,9.06,9.06,0,0,1-1.94,2.53,3.36,3.36,0,0,1-2.11.93,5.88,5.88,0,0,1-1.35-.17,2.4,2.4,0,0,1-.93-0.68,3.19,3.19,0,0,1-.51-1.44,16.14,16.14,0,0,1-.17-2.37,22.26,22.26,0,0,1,.25-3.21,26.59,26.59,0,0,1,.76-3.55c0.34-1.18.76-2.37,1.18-3.46a25.67,25.67,0,0,1,1.61-3,11.65,11.65,0,0,1,1.77-2.11,3.19,3.19,0,0,1,2-.76,2.61,2.61,0,0,1,.93.17,1.33,1.33,0,0,1,.59.59,2.82,2.82,0,0,1,.42,1,7.58,7.58,0,0,1,.17,1.52,5,5,0,0,0-1.1,1.18h0Zm26.36,4.14a23.61,23.61,0,0,1-.59,3.38,22.33,22.33,0,0,1-1,3.38,13.18,13.18,0,0,1-1.52,2.87,6.89,6.89,0,0,1-2.11,2,4.82,4.82,0,0,1-2.7.76,2.51,2.51,0,0,1-1.52-.42,1.77,1.77,0,0,1-.68-0.93l3.38-16.05a6.56,6.56,0,0,1,1.86-2.11,3.6,3.6,0,0,1,2-.68,3.79,3.79,0,0,1,.93.08,1.61,1.61,0,0,1,.93.59,5.49,5.49,0,0,1,.76,1.44,10.4,10.4,0,0,1,.34,2.62,12.44,12.44,0,0,1-.08,3h0Zm16,10.14a4.51,4.51,0,0,1-1.1,1.61,4.43,4.43,0,0,1-1.61.93,6.59,6.59,0,0,1-1.86.25,3.22,3.22,0,0,1-2.7-1,5,5,0,0,1-.76-3,1,1,0,0,0,.68.59,3.59,3.59,0,0,0,.93.17,1.8,1.8,0,0,0,1-.25,1.49,1.49,0,0,0,.76-0.68,2,2,0,0,0,.51-0.93,4.24,4.24,0,0,0,.17-1,1.65,1.65,0,0,0-.34-1.18,2.64,2.64,0,0,0-.93-0.76c0.93-1.86,1.86-3.63,2.62-5.41s1.44-3.55,2-5.41c0.08,1.44.25,2.79,0.34,3.89s0.17,2.11.25,3,0.17,1.61.25,2.2,0.08,1.18.17,1.69,0.08,1,.08,1.44v1.44a9.58,9.58,0,0,1-.51,2.53h0Z" transform="translate(-0.23)" fill="#333"/>
<path d="M533,428.52H417.2m167.29,0h-33" transform="translate(-0.23)" fill="none" stroke="#333" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5"/>
</g>
<path d="M319.19,481.07a8.87,8.87,0,1,0,0,17.74v7.86h16.9v-33.8h-16.9v8.2Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M318.17,490a1.69,1.69,0,1,0,1.69-1.69A1.69,1.69,0,0,0,318.17,490Z" transform="translate(-0.23)" fill="#333"/>
<path d="M331,503.29v-27" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M402.58,641.94a8.84,8.84,0,1,0,15.29,8.87l6.84,4,8.45-14.62-29.23-16.9-8.45,14.62Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M409.59,647.77a1.71,1.71,0,0,0,2.28-.59,1.67,1.67,0,0,0-2.87-1.69A1.57,1.57,0,0,0,409.59,647.77Z" transform="translate(-0.23)" fill="#333"/>
<path d="M427.84,642.87l-23.4-13.52" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<g>
<path d="M583.39,650.73a8.84,8.84,0,0,0,15.29-8.87l6.76-3.89L597,623.35l-29.23,16.9,8.45,14.62,7.18-4.14h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M591.93,647.52a1.67,1.67,0,1,0-2.28-.59A1.68,1.68,0,0,0,591.93,647.52Z" transform="translate(-0.23)" fill="#333"/>
<path d="M596.74,629.35l-23.49,13.52" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
<g>
<path d="M680.81,498.48a8.87,8.87,0,1,0,0-17.74v-7.86h-16.9v33.8h16.9v-8.2Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M682.93,489.44a1.69,1.69,0,1,0-1.69,1.69A1.69,1.69,0,0,0,682.93,489.44Z" transform="translate(-0.23)" fill="#333"/>
<path d="M669,476.25v27" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
<g>
<path d="M598.52,337.43a8.84,8.84,0,0,0-15.29-8.87l-6.76-3.89L568,339.29l29.23,16.9,8.45-14.62-7.18-4.14h0Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M591.5,331.69a1.71,1.71,0,0,0-2.28.59A1.67,1.67,0,1,0,592.1,334,1.66,1.66,0,0,0,591.5,331.69Z" transform="translate(-0.23)" fill="#333"/>
<path d="M573.42,336.67l23.4,13.52" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
<g>
<path d="M417.7,328.82a8.84,8.84,0,1,0-15.29,8.87l-6.84,4L404,356.28l29.23-16.9-8.45-14.62Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<path d="M409.09,331.94a1.68,1.68,0,0,0-.59,2.28,1.67,1.67,0,0,0,2.87-1.69A1.64,1.64,0,0,0,409.09,331.94Z" transform="translate(-0.23)" fill="#333"/>
<path d="M404.27,350.19l23.49-13.52" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
</g>
</g>
<g id="Crash">
<g id="Crash-Stand-Top">
<path d="M173.78,121.64l17.15-47.15a4.64,4.64,0,1,0-8.7-3.21l-17.15,47.15Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M188.48,88.61a7,7,0,0,0-4.14-9l-0.42-.17a7,7,0,0,0-9,4.14L119.87,235.11l13.52,4.9Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M157.81,118.6a0.3,0.3,0,0,1-.08.17l-0.17.42a7,7,0,0,0,4.14,9l8.36,3a7,7,0,0,0,9-4.14l0.17-.42c0-.08,0-0.17.08-0.17l-21.46-7.86h0Zm30.92-18.42a0.3,0.3,0,0,1,.08-0.17l0.17-.42a7,7,0,0,0-4.14-9l-8.36-3a7,7,0,0,0-9,4.14l-0.17.42c0,0.08,0,.17-0.08.17l21.46,7.86h0Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g id="Crash-Cymbol">
<path d="M286.91,151.47l-41.15-15.8c-28.64-11-39.63-19.26-46.3-26.61-2.79-2.87-8.28-8-14.28-10.22l-7.35-2.7h-0.17s-5.58-2-7.35-2.7c-6-2.2-13.6-1.77-17.49-1.35-9.89,1.27-23.66.59-52.64-9.38L58.53,68.33c-4.56-1.69-9-.25-10.22,3.3l-0.08.08c-1.27,3.55.93,7.27,5.58,9l114.4,41.65h0.17L282.77,164c4.56,1.69,8.7.25,10.05-3.3l0.08-.08c1-3.55-1.44-7.44-6-9.13h0Z" transform="translate(-0.23)" fill="#fde74c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M185.86,105.42l-21.71-7.86" transform="translate(-0.23)" fill="none" stroke="#fef5b7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
</g>
<g id="Crash-Stand">
<path d="M118.94,238H133.3V583.56H118.94V238Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<g>
<path d="M188,645.24a7.14,7.14,0,0,1-10.22-.08L121.39,588.8a7.17,7.17,0,1,1,10.14-10.14L187.89,635A7.14,7.14,0,0,1,188,645.24Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M181.3,642.53l-56.78-56.78" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M188.31,635.44l-10.14,10.14s5.41,9.13,6.76,10.48c4,4,10.05,3.63,14-.34s4.31-10.05.42-14C198.11,640.51,188.31,635.44,188.31,635.44Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M64.78,645a7.14,7.14,0,0,1,.08-10.22l56.36-56.36a7.17,7.17,0,1,1,10.14,10.14L75,644.9A7.14,7.14,0,0,1,64.78,645Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M71.71,642.53l54.75-54.84" transform="translate(-0.23)" fill="none" stroke="#bcece8" stroke-miterlimit="10" stroke-width="4"/>
<path d="M74.5,645.32L64.36,635.18s-9.13,5.41-10.48,6.76c-4,4-3.63,10.05.34,14s10.05,4.31,14,.42C69.43,655.12,74.5,645.32,74.5,645.32Z" transform="translate(-0.23)" fill="#5c5c5c" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<path d="M115.14,583.39a11.41,11.41,0,1,1,11.41,11.41A11.36,11.36,0,0,1,115.14,583.39Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M128.57,580.6a3.39,3.39,0,1,0,.76,4.73A3.38,3.38,0,0,0,128.57,580.6Z" transform="translate(-0.23)" fill="#333"/>
<g>
<circle cx="139.5" cy="413.31" r="8.45" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M137.53,423.11a9.23,9.23,0,0,1-9.21,9.21H124a9.23,9.23,0,0,1-9.21-9.21V404.44a9.23,9.23,0,0,1,9.21-9.21h4.31a9.23,9.23,0,0,1,9.21,9.21v18.67Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
</g>
<g>
<path d="M115,237.82a11.41,11.41,0,1,1,11.41,11.41A11.36,11.36,0,0,1,115,237.82Z" transform="translate(-0.23)" fill="#eefaf9" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
<path d="M128.4,235a3.39,3.39,0,1,0,.76,4.73A3.38,3.38,0,0,0,128.4,235Z" transform="translate(-0.23)" fill="#333"/>
</g>
</g>
</g>
</g>
<g id="All-Keys" opacity="0.9">
<g id="Key-66" class="key-wrap">
<path d="M554.5,779.86A10.17,10.17,0,0,1,544.36,790H454a10.17,10.17,0,0,1-10.14-10.14V689.45A10.17,10.17,0,0,1,454,679.32h90.41a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(476.83 753.85)" class="key-text">B</text>
</g>
<g id="Key-74" class="key-wrap">
<path d="M933,779.86A10.17,10.17,0,0,1,922.88,790H832.48a10.17,10.17,0,0,1-10.14-10.14V689.45a10.17,10.17,0,0,1,10.14-10.14h90.41A10.17,10.17,0,0,1,933,689.45v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(860.77 753.85)" class="key-text">J</text>
</g>
<g id="Key-72" class="key-wrap">
<path d="M799.52,779.86A10.17,10.17,0,0,1,789.39,790H699a10.17,10.17,0,0,1-10.14-10.14V689.45A10.17,10.17,0,0,1,699,679.32h90.41a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(720.27 753.85)" class="key-text">H</text>
</g>
<g id="Key-71" class="key-wrap">
<path d="M311.16,779.86A10.17,10.17,0,0,1,301,790H210.61a10.17,10.17,0,0,1-10.14-10.14V689.45a10.17,10.17,0,0,1,10.14-10.14H301a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(231.99 753.72)" class="key-text">G</text>
</g>
<g id="Key-70" class="key-wrap">
<path d="M177.66,779.86A10.17,10.17,0,0,1,167.52,790H77.12A10.17,10.17,0,0,1,67,779.86V689.45a10.17,10.17,0,0,1,10.14-10.14h90.41a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(103.7 753.85)" class="key-text">F</text>
</g>
<g id="Key-89" class="key-wrap">
<path d="M702.36,100.55a10.17,10.17,0,0,1-10.14,10.14H601.81a10.17,10.17,0,0,1-10.14-10.14V10.14A10.17,10.17,0,0,1,601.81,0h90.41a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(627.75 74.53)" class="key-text">Y</text>
</g>
<g id="Key-84" class="key-wrap">
<path d="M406.64,100.55a10.17,10.17,0,0,1-10.14,10.14H306.09A10.17,10.17,0,0,1,296,100.55V10.14A10.17,10.17,0,0,1,306.09,0H396.5a10.17,10.17,0,0,1,10.14,10.14v90.41Z" transform="translate(-0.23)"/>
<text transform="translate(332.68 74.53)" class="key-text">T</text>
</g>
</g>
</svg>
</div>
</div>
<footer class="demo-footer">
<div class="container-btns">
<button class="btn btn-tooltip btn-sequencer" id="sequencer-visible-btn" aria-label="Toggle sequencer"><i class="fa fa-th"></i></button>
<button class="btn btn-tooltip btn-keys" id="keys-btn" aria-label="Toggle keyboard legend"><i class="fa fa-keyboard-o"></i></button>
</div>
</footer>
</div>
<!-- /container -->
<!-- Audio stuff -->
<audio id="Big-Rack-Tom-Audio" preload="auto">
<source src="mp3/Big-Rack-Tom.mp3" type="audio/mp3">
</audio>
<audio id="Crash-Audio" preload="auto">
<source src="mp3/Crash.mp3" type="audio/mp3">
</audio>
<audio id="Floor-Tom-Audio" preload="auto">
<source src="mp3/Floor-Tom.mp3" type="audio/mp3">
</audio>
<audio id="Hi-Hat-Closed-Audio" preload="auto">
<source src="mp3/Hi-Hat-Closed.mp3" type="audio/mp3">
</audio>
<audio id="Kick-Audio" preload="auto">
<source src="mp3/Kick.mp3" type="audio/mp3">
</audio>
<audio id="Small-Rack-Tom-Audio" preload="auto">
<source src="mp3/Small-Rack-Tom.mp3" type="audio/mp3">
</audio>
<audio id="Snare-Audio" preload="auto">
<source src="mp3/Snare.mp3" type="audio/mp3">
</audio>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>JS代码(script.js):
$(function(){
// Crash variblescrashCymbolAll = $('#Crash');
crashCymbol = $('#Crash-Cymbol');
crashAudio = $('#Crash-Audio');
// Crash timelinevar 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 playwindow.crash = function(){
crashtl.restart();
crashtl.play();
var crashAudioEl = crashAudio.get(0);
crashAudioEl.currentTime = 0;
crashAudioEl.play();
}
// Do the crash stuff when clicked/touchedvar clickTouchCrashDone = false;
crashCymbolAll.on("touchstart click",function(){
if(!clickTouchCrashDone){
clickTouchCrashDone = true;
setTimeout(function(){
clickTouchCrashDone = false;
}
,100);
crash();
return false;
}
}
);
// Right tom drum variblesrightTomDrumAll = $('#Tom-Right-All');
rightTomDrum = $('#Tom-Right-Drum');
smallTomAudio = $('#Small-Rack-Tom-Audio');
// Right tom drum timelinevar 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 playwindow.rightTom = function(){
rightTomtl.restart();
rightTomtl.play();
var smallTomAudioEl = smallTomAudio.get(0);
smallTomAudioEl.currentTime = 0;
smallTomAudioEl.play();
}
// Do the right tom stuff when clicked/touchedvar clickTouchRTDrumDone = false;
rightTomDrumAll.on("touchstart click",function(){
if(!clickTouchRTDrumDone){
clickTouchRTDrumDone = true;
setTimeout(function(){
clickTouchRTDrumDone = false;
}
,100);
rightTom();
return false;
}
}
);
// Left tom drum variblesleftTomDrumAll = $('#Tom-Left-All');
leftTomDrum = $('#Tom-Left-Drum');
bigTomAudio = $('#Big-Rack-Tom-Audio');
// Left tom drum timelinevar 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 playwindow.leftTom = function(){
leftTomtl.restart();
leftTomtl.play();
var bigTomAudioEl = bigTomAudio.get(0);
bigTomAudioEl.currentTime = 0;
bigTomAudioEl.play();
}
// Do the left tom stuff when clicked/touchedvar clickTouchLTDrumDone = false;
leftTomDrumAll.on("touchstart click",function(){
if(!clickTouchLTDrumDone){
clickTouchLTDrumDone = true;
setTimeout(function(){
clickTouchLTDrumDone = false;
}
,100);
leftTom();
return false;
}
}
);
// Floor tom drum variblesfloorTomDrumAll = $('#Floor-Tom');
floorTomAudio = $('#Floor-Tom-Audio');
// Floor tom drum timelinevar 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 playwindow.floorTom = function(){
floorTomtl.restart();
floorTomtl.play();
var floorTomAudioEl = floorTomAudio.get(0);
floorTomAudioEl.currentTime = 0;
floorTomAudioEl.play();
}
// Do the floor tom stuff when clicked/touchedvar clickTouchTDrumDone = false;
floorTomDrumAll.on("touchstart click",function(){
if(!clickTouchTDrumDone){
clickTouchTDrumDone = true;
setTimeout(function(){
clickTouchTDrumDone = false;
}
,100);
floorTom();
return false;
}
}
);
// Snare drum variblessnareDrumAll = $('#Snare');
snareDrum = $('#Snare-Drum');
snareAudio = $('#Snare-Audio');
// Snare drum timelinevar 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 playwindow.snare = function(){
snaretl.restart();
snaretl.play();
var snareAudioEl = snareAudio.get(0);
snareAudioEl.currentTime = 0;
snareAudioEl.play();
}
// Do the snare stuff when clicked/touchedvar clickTouchSnareDone = false;
snareDrumAll.on("touchstart click",function(){
if(!clickTouchSnareDone){
clickTouchSnareDone = true;
setTimeout(function(){
clickTouchSnareDone = false;
}
,100);
snare();
return false;
}
}
);
// Kick drum varibleskickDrumAll = $('#Kick');
kickAudio = $('#Kick-Audio');
// Kick drum timelinevar 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 playwindow.kick = function(){
kicktl.restart();
kicktl.play();
var kickAudioEl = kickAudio.get(0);
kickAudioEl.currentTime = 0;
kickAudioEl.play();
}
// Do the kick stuff when clicked/touchedvar clickTouchKickDone = false;
kickDrumAll.on("touchstart click",function(){
if(!clickTouchKickDone){
clickTouchKickDone = true;
setTimeout(function(){
clickTouchKickDone = false;
}
,100);
kick();
return false;
}
}
);
// Hi-hat varibleshiHatAll = $('#Hi-Hat');
hiHatTop = $('#Hi-Hat-Top');
hiHatBottom = $('#Hi-Hat-Bottom');
hiHatClosedAudio = $('#Hi-Hat-Closed-Audio');
// Hi-hat timelinevar 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)}
);
// Hi-hat playwindow.hiHat = function(){
hiHattl.restart();
hiHattl.play();
var hiHatClosedAudioEl = hiHatClosedAudio.get(0);
hiHatClosedAudioEl.currentTime = 0;
hiHatClosedAudioEl.play();
}
// Do the hi-hat stuff when clicked/touchedvar clickTouchHitHatDone = false;
hiHatAll.on("touchstart click",function(){
if(!clickTouchHitHatDone){
clickTouchHitHatDone = true;
setTimeout(function(){
clickTouchHitHatDone = false;
}
,100);
hiHat();
return false;
}
}
);
// Key guideallKeys = $('#All-Keys');
// Key timelinefunction 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();
}
// Show/hide keys$('#keys-btn').click(function(){
allKeys.fadeToggle();
}
);
// Key triggersdocument.onkeydown = function(e){
thisKeyID = 'Key-' + e.keyCode;
thisKey = $('#' + thisKeyID);
switch (e.keyCode){
case 74:hiHat();
animateKey(thisKey);
break;
case 72:snare();
animateKey(thisKey);
break;
case 66:kick();
animateKey(thisKey);
break;
case 71:floorTom();
animateKey(thisKey);
break;
case 70:crash();
animateKey(thisKey);
break;
case 84:leftTom();
animateKey(thisKey);
break;
case 89:rightTom();
animateKey(thisKey);
break;
}
}
;
// Show/hide sequencer variablessequencerVisible = false;
// Show/hide sequencer$('#sequencer-visible-btn').click(function (){
// Changes the flex-grow value$("#container-sequencer").toggleClass("collapse");
if (sequencerVisible === false){
sequencerVisible = true;
}
else{
sequencerVisible = false;
}
// This class hides the drums on smaller screens$("#container-drums").toggleClass("screen-sm-hidden");
}
);
// Sequencer variblesrows = $('.row');
rowLength = rows.first().children().length;
labels = $('label');
// Beat starts at 1 because 0 is the img for each rowbeat = 1;
// Sequencerfunction sequencer (){
labels.removeClass('active');
// Do this function for each .row $(rows).each(function(){
// Select the child element at the "beat" index current = $(this).children().eq(beat);
current.addClass('active');
// If the current input is checked do some stuff! if (current.find('input').is(":checked")){
targetDrum = (current.parent().attr('data-target-drum'));
// If there a function that shares the same name as the data attribue,do it!fn = window[targetDrum];
if (typeof fn === "function"){
fn();
}
}
}
);
// If we get to the last child,start over if ( beat < (rowLength - 1) ){
++beat;
}
else{
beat = 1;
}
}
// Start/Stop Sequencer variblessequencerOn = false;
// Start/Stop Sequencer$('#sequencer-active-btn').click(function (){
$(this).find('i').toggleClass('fa-pause');
if (sequencerOn === false){
intervalId = window.setInterval(sequencer,interval);
sequencerOn = true;
}
else{
window.clearInterval(intervalId);
sequencerOn = false;
}
}
);
// Tempo variblesbpm = 150;
interval = 60000 / bpm;
// Set tempofunction setTempo(){
window.clearInterval(intervalId);
intervalId = window.setInterval(sequencer,interval);
}
// Increase tempo$('#bpm-increase-btn').click(function(){
if ( bpm < 300 ){
bpm = parseInt($('#bpm-indicator').val());
bpm += 10;
interval = 60000 / bpm;
$('#bpm-indicator').val(bpm);
if(sequencerOn === true){
setTempo();
}
}
}
);
//Decrease tempo$('#bpm-decrease-btn').click(function(){
if ( bpm > 100 ){
bpm = parseInt($('#bpm-indicator').val());
bpm -= 10;
interval = 60000 / bpm;
$('#bpm-indicator').val(bpm);
if(sequencerOn === true){
setTempo();
}
}
}
);
// Trigger drum on input check$('input').click(function(){
if (sequencerOn === false){
if ($(this).is(":checked")){
targetDrum = $(this).parents(".row").attr('data-target-drum');
fn = window[targetDrum];
if (typeof fn === "function"){
fn();
}
}
}
}
);
// Load audio on iOS devices on the first user interaction,because...$('#sequencer-visible-btn').one('click',function(){
$("audio").each(function(i){
this.play();
this.pause();
}
);
}
);
}
);
CSS代码(styles.css):
*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box;}
/* * === General Demo Styles === */
body{font-family:'Avenir Next','Avenir','Helvetica Neue','Lato','Segoe UI',Helvetica,Arial,sans-serif;color:#2d2e36;background:#c2ccd4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:#8e8f9a;outline:none;}
a:hover,a:focus{color:#2d2e36;outline:none;}
audio{display:none;}
/* * --- Containers & Layout --- */
.container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100vw;height:100vh;}
.content{overflow:hidden;height:100vh;}
.container-drums{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%;padding:2em 0 0 0;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1);transition-timing-function:cubic-bezier(0.2,1,0.3,1);}
.screen-sm-hidden{-webkit-transform:translateX(0);transform:translateX(0);}
.container-drums svg{width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.container-drums svg g{cursor:pointer;}
.demo-footer{position:absolute;z-index:1000;top:0;right:0;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2em;}
.container-sequencer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.container-sequencer.collapse{-webkit-transform:translateY(-100%);transform:translateY(-100%);}
/* * --- Buttons --- */
.btn{font-size:1.65em;font-weight:bold;line-height:1;width:auto;margin:0 0.125em;padding:0.5rem;vertical-align:middle;text-decoration:none;color:#89939B;border:0;border-radius:2px;background:#B0B9C0;}
.btn:focus,.btn:hover{color:#2d2e36;border-color:#2d2e36;outline:none;}
.btn:focus{color:#89939B;}
.btn .fa{vertical-align:middle;}
/* * --- Sequencer --- */
.sequencer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;}
.row{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
.row:hover{z-index:100;}
.sequencer-controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;padding:10px 0 0 10px;}
.sequencer label span{position:relative;display:block;width:5vh;height:5vh;margin:0.5vh;border:2px solid #89939B;border-radius:2px;cursor:pointer;}
.sequencer label input[type=checkbox]:checked ~ span{background:#89939B;}
.sequencer label.active input[type=checkbox]:checked ~ span{background:#EB495D;}
.sequencer label input{display:none;}
.sequencer .active span{border-color:#EB495D;}
.sequencer-controls .btn,input[type=number]{font-size:1.2rem;line-height:1;margin:5px;padding:0;text-align:center;border:none;background:none;-webkit-transition:all 0.5s;transition:all 0.5s;}
input[type=number]{border:none;-moz-appearance:textfield;color:#89939B;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
.sequencer img{position:relative;z-index:10;width:5vh;height:5vh;margin:0.5vh;border-radius:3px;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;}
.sequencer img:hover{-webkit-transform:scale(2.5);transform:scale(2.5);}
/* * --- Keys --- */
#All-Keys{display:none;}
.key-wrap{fill:#F3F8FC;}
.key-text{font-size:62px;font-weight:bold;fill:#B0B9C0;}
@media (min-width:700px){.content{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.container-sequencer{-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1);transition-timing-function:cubic-bezier(0.2,1,0.3,1);}
.container-sequencer.collapse{-webkit-transform:translateX(-100%);transform:translateX(-100%);}
.container-drums{width:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
.container-drums svg{max-height:65%;-webkit-transform:scale(1.25);transform:scale(1.25);-webkit-transition:-webkit-transform 0.6s;transition:transform 0.6s;-webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1);transition-timing-function:cubic-bezier(0.2,1,0.3,1);}
.screen-sm-hidden{-webkit-transform:translateX(0);transform:translateX(0);}
.screen-sm-hidden svg{-webkit-transform:scale(0.85);transform:scale(0.85);}
.btn-tooltip{position:relative;}
.btn-tooltip::before,.btn-tooltip::after{position:absolute;left:50%;pointer-events:none;opacity:0;}
.btn-tooltip:hover::before,.btn-tooltip:hover::after{opacity:1;-webkit-transition:opacity 0.3s ease,-webkit-transform 0.3s ease;transition:opacity 0.3s ease,transform 0.3s ease;-webkit-transition-delay:0.1s;transition-delay:0.1s;}
.btn-tooltip::before{content:'';z-index:1001;top:100%;width:0;height:0;margin:0 0 0 -6px;pointer-events:none;border:solid transparent;border-width:6px;border-color:transparent;border-bottom-color:#2d2e36;-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);}
.btn-tooltip:hover::before{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.btn-tooltip::after{content:attr(aria-label);font-size:0.41em;font-weight:bold;line-height:1.2;z-index:1000;top:100%;margin:12px 0 0 0;padding:8px 10px;letter-spacing:1px;text-transform:uppercase;color:#fff;border-radius:3px;background:#2d2e36;-webkit-transform:translate3d(-50%,-5px,0);transform:translate3d(-50%,-5px,0);}
.btn-tooltip:hover::after{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);}
}
@media (max-width:500px){.container-sequencer,.container-drums{-webkit-align-items:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding-top:6em;}
.sequencer img{pointer-events:none;}
.btn-keys{display:none;}
.demo-footer{top:auto;bottom:0;padding:1em;}
.codrops-header{padding:0.5em;font-size:90%;}
}
分享到QQ
分享到微博
微信扫一扫
