Skip to content

Instantly share code, notes, and snippets.

@vackup

vackup/SVG Animated Guitar (Play Me!).markdown

Forked from anonymous/SVG Animated Guitar (Play Me!).markdown
Created January 21, 2016 15:45
Show Gist options
  • Save vackup/26d17cbcb878d10c87c5 to your computer and use it in GitHub Desktop.
Save vackup/26d17cbcb878d10c87c5 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Animated Guitar (Play Me!)
Raw
index.html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="470 300 1200 1400">
<g id="Layer_1">
<rect display="none" fill="#58D0C5" width="2000" height="2000" />
<g id="amp">
<ellipse id="shadow_1_" opacity="0.3" cx="833.5" cy="1408.3" rx="250.9" ry="25.8" />
<g id="cab">
<path fill="#0891BA" stroke="#333333" stroke-width="9" stroke-miterlimit="10" d="M1085.3,1398c0,6.6-5.4,12-12,12H593.7
c-6.6,0-12-5.4-12-12V918.4c0-6.6,5.4-12,12-12h479.6c6.6,0,12,5.4,12,12V1398z" />
<path opacity="0.9" fill="#39A7C8" d="M1073.3,910.8H593.7c-3.4,0-6.3,2.3-7.2,5.5h494C1079.6,913.1,1076.7,910.8,1073.3,910.8z" />
<path fill="#FFD192" stroke="#333333" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1064.8,1378.5c0,6.1-4.9,11-11,11H613.3c-6.1,0-11-4.9-11-11V938c0-6.1,4.9-11,11-11h440.5c6.1,0,11,4.9,11,11V1378.5z" />
<g id="speaker">
<circle fill="#2EC4B6" stroke="#333333" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="833.5" cy="1158.2" r="189.3" />
<circle fill="#0891BA" stroke="#333333" stroke-width="9" stroke-miterlimit="10" cx="833.5" cy="1158.2" r="169.2" />
<circle id="speaker-2" fill="#FDFFFC" stroke="#333333" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="833.5" cy="1158.2" r="118.1" />
<circle id="speaker-1" fill="#E71D36" stroke="#333333" stroke-width="9" stroke-miterlimit="10" cx="833.5" cy="1158.2" r="58" />
<g id="speaker-wobble">
<circle id="speaker-wobble-2" fill="none" cx="833.5" cy="1158.2" r="124" />
<circle id="speaker-wobble-1" fill="none" cx="833.5" cy="1158.2" r="62" />
</g>
<g id="Screws">
<path fill="#333333" d="M962.9,1028.9c-1.3-1.3-3.6-1.3-4.9,0c-1.4,1.4-1.4,3.6,0,4.9c0.7,0.7,1.5,1,2.5,1s1.8-0.4,2.5-1
C964.2,1032.5,964.2,1030.2,962.9,1028.9z" />
<path fill="#333333" d="M709.1,1282.6c-1.3-1.3-3.6-1.3-4.9,0c-1.4,1.4-1.4,3.6,0,4.9c0.7,0.7,1.5,1,2.5,1s1.8-0.4,2.5-1
C710.5,1286.2,710.5,1284,709.1,1282.6z" />
<path fill="#333333" d="M962.9,1282.6c-1.3-1.3-3.6-1.3-4.9,0c-1.4,1.4-1.4,3.6,0,4.9c0.7,0.7,1.5,1,2.5,1s1.8-0.4,2.5-1
C964.2,1286.2,964.2,1284,962.9,1282.6z" />
<path fill="#333333" d="M709.1,1028.9c-1.3-1.3-3.6-1.3-4.9,0c-1.4,1.4-1.4,3.6,0,4.9c0.7,0.7,1.5,1,2.5,1s1.8-0.4,2.5-1
C710.5,1032.5,710.5,1030.2,709.1,1028.9z" />
</g>
</g>
</g>
<g id="head">
<path fill="#0891BA" stroke="#333333" stroke-width="9" stroke-miterlimit="10" d="M1085.3,894.6c0,6.6-5.4,12-12,12H593.7
c-6.6,0-12-5.4-12-12V718.8c0-6.6,5.4-12,12-12h479.6c6.6,0,12,5.4,12,12V894.6z" />
<path opacity="0.9" fill="#39A7C8" d="M1073.3,711.3H593.7c-3.4,0-6.3,2.3-7.2,5.5h494C1079.6,713.6,1076.7,711.3,1073.3,711.3z" />
<path fill="#FFD192" stroke="#333333" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1064.8,877.9c0,5.4-4.9,9.7-11,9.7H613.3c-6.1,0-11-4.4-11-9.7V735.5c0-5.4,4.9-9.7,11-9.7h440.5c6.1,0,11,4.4,11,9.7V877.9z" />
<path fill="#FDFFFC" stroke="#333333" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1013.3,831.5c0-4.2-3.8-7.6-8.6-7.6H662.3c-4.7,0-8.6,3.4-8.6,7.6v56.1h359.6V831.5z" />
<g>
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="976.6" cy="855.7" r="11.6" />
<path fill="#333333" d="M980.8,850.3c-0.8-0.8-2.1-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6
C981.6,852.3,981.6,851,980.8,850.3z" />
</g>
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="905.1" cy="855.7" r="11.6" />
<path fill="#333333" d="M909.2,850.3c-0.8-0.8-2.1-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6
C910,852.3,910,851,909.2,850.3z" />
</g>
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="833.5" cy="855.7" r="11.6" />
<path fill="#333333" d="M833.8,850.8c-0.2-1-1-1.7-2-1.7l-0.3,0c-0.5,0.1-1,0.4-1.3,0.8c-0.3,0.4-0.4,1-0.3,1.5
c0.2,1,1,1.7,2,1.7l0.3,0C833.2,852.9,833.9,851.9,833.8,850.8z" />
</g>
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="761.9" cy="855.7" r="11.6" />
<path fill="#333333" d="M768,852.5c-0.4-1-1.6-1.6-2.6-1.2c-0.5,0.2-0.9,0.5-1.1,1c-0.2,0.5-0.3,1-0.1,1.5
c0.3,0.8,1,1.3,1.9,1.3c0.2,0,0.5,0,0.7-0.1c0.5-0.2,0.9-0.5,1.1-1C768.2,853.6,768.2,853,768,852.5z" />
</g>
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="690.4" cy="855.7" r="11.6" />
<path fill="#333333" d="M687.7,851.6c-0.8-0.8-2.1-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6
C688.5,853.6,688.5,852.4,687.7,851.6z" />
</g>
</g>
<g id="Ampall">
<path fill="#333333" d="M935,743c-1.1-1.2-2.7-1.9-4.4-1.9c-0.3,0-0.5,0-0.8,0.1l-10,1.4c-0.8,0.1-1.5,0.4-2.2,0.8
c-0.1-0.1-0.1-0.2-0.2-0.2c-1.1-1.2-2.7-1.9-4.4-1.9c-0.3,0-0.5,0-0.8,0.1l-10,1.4c-2.5,0.3-4.5,2.2-5.1,4.7l-1.7,8.1
c-0.8-0.4-1.8-0.7-2.7-0.7H883c-0.7,0-1.5,0.1-2.1,0.4c-0.9-0.2-1.9-0.3-2.8-0.3c-6,0-11.1,2.2-15.1,6.1
c-2.3-3.5-6.5-6.1-13.9-6.1c-0.9,0-1.7,0.1-2.6,0.2c-0.6-0.2-1.2-0.3-1.9-0.3h-9.7c-2.8,0-5.3,2-5.9,4.8l0,0.2
c-2.6-3-6.2-5-10.1-5c-2.8,0-5.8,0.9-9,2.6c-2.3-1.7-4.9-2.6-7.6-2.6c-1.6,0-3.2,0.3-4.9,0.8c-0.9-0.5-1.9-0.8-3-0.8h0H786
l1.9-8.7c0.6-2.8-0.9-5.7-3.6-6.8c-2.2-0.9-5.1-1.5-7.7-1.5c-6.2,0-15.7,3.6-26.7,20c-0.3,0-0.6,0-0.8,0
c-10.6,0-19.2,6.2-19.2,13.8c0,5.8,3.7,9.2,7.8,10.1c-1.8,5.1-2.8,9.6-2.8,13c0,6.7,3.1,9.9,5.6,11.5c2.9,1.7,6.1,1.9,8.9,2.1
l0.2,0c0.1,0,0.2,0,0.3,0c1.6,0,3.2-0.7,4.4-1.9c1.2-1.3,1.8-3,1.6-4.8c-0.1-1.1-0.5-2-0.9-2.7c0-0.1,0-0.3,0-0.5
c0-3.1,0.9-7.9,2.5-13.1l-1.7,8c-0.4,1.8,0.1,3.6,1.2,5c1.1,1.4,2.9,2.2,4.7,2.2h9.7c1.1,0,2.1-0.3,3-0.8c0.9,0.5,2,0.8,3,0.8
h9.7c1.5,0,2.9-0.6,4-1.5c1.1,1,2.5,1.5,4,1.5h9.8c2.7,0,5-1.8,5.8-4.4c2.2,2.5,5.5,4,9.6,4.3l-2.1,9.7c-0.4,2,0.2,4.1,1.7,5.5
c1.1,1.1,2.6,1.7,4.2,1.7c0.5,0,0.9-0.1,1.4-0.2l10.2-2.4c2.3-0.5,4-2.3,4.5-4.6l2.1-9.9c0.6,0.1,1.3,0.1,1.9,0.1
c4.9,0,9.3-1.8,12.7-5.3c2.5,3.6,6.6,5.7,11.8,5.7c2.4,0,5.4-0.6,8.6-2.7c2.1,1.3,4.9,2.3,8.8,2.3c2.8,0,5.4-1,8-2.7
c2.4,1.7,5.6,2.7,9.3,2.7c2.7,0,5.4-1,8-2.7c2.2,1.7,4.9,2.7,8.2,2.7c6.2,0,10.4-3.3,12.7-10.1c0.2-0.6,0.4-1.4,0.4-2.1
c0-2.4-1.5-4.5-3.5-5.5l7.3-34.4C936.9,746.4,936.4,744.4,935,743z" />
<path fill="#FDFFFC" d="M776.6,743.6c-8,0-16.8,9.3-23.6,20.2c-1.5-0.1-2.8-0.2-4-0.2c-7,0-13.2,3.6-13.2,7.8
c0,3,1.9,4.3,3.9,4.3c2.9,0,4.1-1.2,4.1-2.6c0-0.9-0.5-2.1-0.9-2.1c0.9-2.4,3.9-3.2,7.9-3.5c-5.9,10.3-9.9,21.3-9.9,27
c0,7.2,4.4,7.3,9.1,7.6c-0.1-0.6-0.9-0.3-0.9-3.8c0-7,3.6-19.9,8.7-30.8c2.9,0.2,5.7,0.9,9.1,2.4l-5.2,24.5h9.7l10.6-49.7
C780.4,744,778.2,743.6,776.6,743.6z M767.5,766.9c-2.6-1-5.5-1.8-8.4-2.3c3.8-7.6,8.2-13.9,12.3-16.1L767.5,766.9z" />
<path fill="#FDFFFC" d="M849.1,760.7c-1.7,0-3.3,0.5-4.7,1.2l0.3-1.3h-9.7l-5.7,26.8c-1,0.9-2,1.4-3,1.4c-2.2,0-2.8-1.2-2.8-2.8
c0-0.8,0.1-1.7,0.3-2.5l2.8-12.9c0.1-0.5,0.1-1,0.1-1.6c0-4.6-4.1-8.5-7.8-8.5c-3.3,0-6.9,2.1-9.9,4.5c-1.5-2.6-4.2-4.5-6.7-4.5
c-2.9,0-6,1.6-8.7,3.6l0.7-3.6h-9.7l-7.2,33.8h9.7l5.8-27.3c1.4-0.9,2.5-1.4,4.1-1.4c1.8,0,3.1,1.6,3.1,4c0,0.5-0.1,1.1-0.2,1.8
l-4.9,23h9.8l5-23.7c0.1-0.5,0.1-0.9,0.1-1.4c0-0.8-0.1-1.6-0.3-2.4c1.3-0.8,2.4-1.2,3.9-1.2c1.8,0,3.1,1.6,3.1,4
c0,0.5-0.1,1.1-0.2,1.8l-2.6,12.2c-0.3,1.3-0.4,2.4-0.4,3.4c0,5.1,3.1,7.4,8.4,7.4c2.1,0,4.3-1.4,6.4-3.3l-4.3,20.2l10.2-2.4
l3.5-16.6c2,1.3,4.1,2,6.4,2c6.9,0,12.7-4.9,14.8-19.5c0.3-1.8,0.4-3.3,0.4-4.7C859.4,763.2,856.1,760.7,849.1,760.7z
M850.4,775.7c-2.2,10.7-3.9,13.7-7.2,13.7c-1.1,0-2.8,0-4.4-1.2l4.9-22.7c1.3-0.9,2.6-1.4,3.9-1.4c2.2,0,3.8,0.8,3.8,4.9
C851.2,770.5,851,772.7,850.4,775.7z" />
<path fill="#FDFFFC" d="M922.5,785.9c0-0.7,0.1-1.5,0.3-2.3l7.8-36.5l-10,1.4l-7.4,35.1c-0.2,0.8-0.3,1.7-0.3,2.5
c-1.6,1.2-3.1,2.2-4.5,2.2c-2.6,0-3.4-1-3.4-2.5c0-0.5,0.1-1.1,0.3-2.2l7.8-36.5l-10,1.4l-7.5,35.1c-0.2,1-0.3,1.9-0.4,2.7
c-1.5,1.1-2.9,2-4.2,2c-2.7,0-3.4-1.1-3.4-2.6c0-0.6,0.1-1.4,0.3-2.1l4.9-23H883l-0.4,1.8c-1.2-1-2.9-1.7-4.5-1.7
c-13.5,0-17.7,13.9-17.7,25.5c0,4,1.9,8.6,8.4,8.6c4.1,0,7.2-2.8,9.2-5.5c0.9,3.5,3.9,5.1,8.2,5.1c2.8,0,6.2-2.5,9.2-5.2
c0.8,3.6,3.7,5.2,8.2,5.2c2.8,0,6.3-2.6,9.4-5.4c0.6,3.2,2.7,5.4,6.7,5.4c2.3,0,5.1-0.4,7-6.2c-0.5,0.2-1.3,0.2-1.8,0.2
C923.1,788.4,922.5,787.3,922.5,785.9z M878.1,783.6c-0.2,0.8-0.3,1.6-0.4,2.2c-1.3,1.9-2.8,3.4-4.3,3.4c-1.7,0-3.9-0.7-3.9-4.8
c0-9.2,4.1-19.9,9.1-19.9c0.9,0,2.2,0.3,3.3,1.2L878.1,783.6z" />
</g>
</g>
<g id="sparks">
<g class="sparks" id="spark-4">
<path fill="#FDE74C" d="M907.8,1098.8c-1,0-2-0.5-2.6-1.4c-0.8-1.3-0.5-2.9,0.6-3.9l29.5-25l-7.4-3.9c-0.9-0.5-1.5-1.4-1.6-2.4
c-0.1-1,0.4-2,1.2-2.6l45-32.4c0.5-0.4,1.1-0.6,1.8-0.6c0.5,0,1,0.1,1.4,0.4l21,11.2c0.9,0.5,1.5,1.4,1.6,2.4
c0.1,1-0.4,2-1.2,2.6l-26.3,19l5.6,3c1,0.5,1.6,1.6,1.6,2.8c-0.1,1.2-0.8,2.2-1.8,2.6l-67.3,28.1
C908.6,1098.7,908.2,1098.8,907.8,1098.8z" />
<path d="M974.4,1029.4l21,11.2l-30.2,21.8l9.9,5.3l-67.3,28.1l32.8-27.9l-11.3-6L974.4,1029.4 M974.4,1023.4
c-1.2,0-2.5,0.4-3.5,1.1l-45,32.4c-1.7,1.2-2.6,3.2-2.5,5.3c0.1,2.1,1.3,3.9,3.2,4.9l3.5,1.8l-26.1,22.2
c-2.3,1.9-2.8,5.2-1.2,7.7c1.1,1.8,3.1,2.9,5.1,2.9c0.8,0,1.6-0.2,2.3-0.5l67.3-28.1c2.1-0.9,3.6-2.9,3.7-5.3s-1.1-4.5-3.2-5.6
l-1.4-0.7l22.4-16.1c1.7-1.2,2.6-3.2,2.5-5.3c-0.1-2.1-1.3-3.9-3.2-4.9l-21-11.2C976.3,1023.7,975.3,1023.4,974.4,1023.4
L974.4,1023.4z" />
</g>
<g class="sparks" id="spark-3">
<path fill="#FDE74C" d="M774,1085c-0.6,0-1.1-0.2-1.6-0.5l-61.1-39.7c-1-0.6-1.5-1.8-1.3-2.9s1-2.1,2.1-2.5l6.1-1.9l-22.5-23.4
c-0.7-0.7-1-1.8-0.7-2.8c0.3-1,1-1.8,2-2.1l22.7-7.2c0.3-0.1,0.6-0.1,0.9-0.1c0.8,0,1.6,0.3,2.2,0.9l38.4,40
c0.7,0.7,1,1.8,0.7,2.8c-0.3,1-1,1.8-2,2.1l-8,2.5l24.5,29.9c0.9,1.1,0.9,2.8-0.1,3.9C775.6,1084.7,774.8,1085,774,1085z" />
<path d="M720.4,1004.8l38.4,40l-12.2,3.9L774,1082l-61.1-39.7l10.7-3.4l-25.8-26.8L720.4,1004.8 M720.4,998.8
c-0.6,0-1.2,0.1-1.8,0.3l-22.7,7.2c-2,0.6-3.5,2.2-4,4.2s0.1,4.1,1.5,5.6l19.1,19.9l-1.5,0.5c-2.2,0.7-3.8,2.6-4.1,4.9
s0.7,4.6,2.7,5.8l61.1,39.7c1,0.7,2.1,1,3.3,1c1.7,0,3.3-0.7,4.5-2c2-2.2,2-5.5,0.2-7.8l-21.7-26.5l3.7-1.2c2-0.6,3.5-2.2,4-4.2
s-0.1-4.1-1.5-5.6l-38.4-40C723.6,999.5,722,998.8,720.4,998.8L720.4,998.8z" />
</g>
<g class="sparks" id="spark-1">
<path fill="#FDE74C" d="M670.6,1261.3c-0.7,0-1.4-0.3-2-0.8l-17.7-15.9c-0.8-0.7-1.1-1.7-1-2.8c0.2-1,0.9-1.9,1.8-2.3l30.1-12.1
l-4.8-4.3c-0.9-0.8-1.2-2-0.9-3.1c0.3-1.1,1.3-1.9,2.4-2.1l72-11.2c0.2,0,0.3,0,0.5,0c1.3,0,2.5,0.8,2.9,2.1
c0.4,1.4-0.2,2.9-1.5,3.6l-34.6,17.3l6.2,5.6c0.8,0.7,1.1,1.7,1,2.8c-0.2,1-0.9,1.9-1.8,2.3l-51.4,20.7
C671.4,1261.3,671,1261.3,670.6,1261.3z" />
<path d="M751.1,1209.9L751.1,1209.9 M751.1,1209.9l-38.6,19.2l9.5,8.5l-51.4,20.7l-17.7-15.9l34.5-13.9l-8.3-7.5L751.1,1209.9
M751.1,1203.9c-0.1,0-0.3,0-0.4,0c-0.2,0-0.4,0-0.6,0.1l-71.9,11.2c-2.3,0.4-4.2,2-4.8,4.2c-0.7,2.2,0,4.6,1.7,6.2l1.2,1
l-25.6,10.3c-1.9,0.8-3.3,2.5-3.7,4.5c-0.4,2,0.4,4.1,1.9,5.5l17.7,15.9c1.1,1,2.6,1.5,4,1.5c0.8,0,1.5-0.1,2.2-0.4l51.4-20.7
c1.9-0.8,3.3-2.5,3.7-4.5s-0.4-4.1-1.9-5.5l-2.9-2.6l30.5-15.2c0.5-0.2,0.9-0.5,1.3-0.8c0.1-0.1,0.2-0.2,0.4-0.3
c1.1-1.1,1.8-2.6,1.8-4.3c0-3.1-2.4-5.7-5.5-6C751.5,1203.9,751.3,1203.9,751.1,1203.9L751.1,1203.9z" />
</g>
</g>
</g>
<ellipse id="shadow" opacity="0.3" cx="1088.3" cy="1527.6" rx="227.9" ry="12" />
<g id="guitar_2_">
<g id="body_4_">
<g id="body_7_">
<path fill="#E71D36" d="M1097.3,1481.4c-39.4-0.5-78.4-21-108-38.8c-59.6-35.9-83.8-61.4-98.3-79.6c-7.1-9-13.1-18.4-17.7-28
c-13.7-28.4-13.4-57.8,1.1-87.3c15.3-31.3,42.3-54.9,62.3-69.3c35.2-25.2,61-48.4,74.5-67c0.2-0.3,0.3-0.5,0.4-0.6
c9.4-12.3,18.2-49.5,23.9-78.6c10.4-53,24.5-74.6,35.6-87.6c7.3-8.5,23.2-22.9,36.4-22.9c4,0,7.4,1.4,10.3,4.3
c6.4,6.4,0.2,19.8-4.8,30.6c-1.5,3.2-2.9,6.3-3.9,9c-9.3,25.2-1.3,48.4,10,59.3c9.1,8.8,18.6,12.7,30.8,12.7
c4.9,0,10.2-0.6,16.8-1.9l28.4,47.3c-3.2,7.4-5.2,17.6-5.5,24.5c-0.2,5.4,1,10.4,3.7,15.5c7.6,14.3,23.8,23.2,42.2,23.2
c2.8,0,5.6-0.2,8.3-0.6c14.6-2.3,23.8-10.7,32.7-18.8c5.1-4.6,9.9-9,15.6-12.3c2-1.2,4-1.8,6-1.8c5.8,0,11.3,5.5,13,13
c1.5,6.7-0.4,14.5-2.6,21.3c-4.4,13.8-12.9,25.6-20.6,35.2c-5.5,6.9-13,12.1-21,17.7c-4,2.8-8.2,5.8-12.1,8.9
c-28,22.8-41.8,46.2-44.7,76.1c-0.9,8.9-1.2,17.9-1.5,26.6c-0.2,7.3-0.5,14.9-1.1,22.3c-1.7,20.7-4.8,38.9-9.7,55.7
c-9.4,32.6-36.9,72.7-71.2,86.4c-8.8,3.5-19.5,5.6-28.7,5.6L1097.3,1481.4z" />
<path fill="#EC4A5E" d="M1107.5,927.7c2.4,0,4.2,0.8,6.1,2.6c3.4,3.4-3,17.2-6,23.8c-1.6,3.3-3,6.5-4.1,9.4
c-7.2,19.4-6.6,48.3,11.4,65.7c10.2,9.8,21.3,14.3,35,14.3c4.2,0,8.6-0.4,13.8-1.3l24.7,41.2c-3.1,8.4-4.6,18.1-4.8,23.7
c-0.3,6.4,1.2,12.6,4.4,18.6c8.7,16.3,26.9,26.4,47.5,26.4c3.1,0,6.2-0.2,9.2-0.7c16.3-2.6,26.7-12,35.8-20.3
c4.8-4.4,9.4-8.6,14.6-11.6c1.1-0.6,2.1-1,3-1c2.9,0,6.1,3.8,7.2,8.4c1.2,5.3-0.7,12.5-2.5,18.2c-4.1,12.9-12.2,24.1-19.6,33.3
c-5,6.2-12.1,11.2-19.7,16.6c-4.1,2.9-8.4,5.9-12.4,9.2c-29.4,23.9-43.8,48.6-46.9,80.2c-0.9,9.1-1.2,18.2-1.5,27
c-0.3,7.6-0.5,14.8-1.1,22c-1.6,20.3-4.7,38.1-9.4,54.5c-4.7,16.3-14.2,34.2-25.9,49c-12.8,16.1-27.2,27.7-41.7,33.5
c-8.2,3.3-18,5.2-26.4,5.2c-0.2,0-0.5,0-0.7,0c-16.5-0.2-34-4.1-53.7-11.8c-15.5-6.1-31.9-14.4-51.4-26.2
c-21.3-12.8-37.9-24-52.4-35.3c-18-14.1-32.5-28.1-44.3-42.9c-6.9-8.7-12.6-17.7-17-26.8c-12.9-26.7-12.5-54.3,1.1-82.1
c14.7-30.2,41-53.1,60.4-67c35.8-25.6,62-49.2,75.9-68.3c0.2-0.2,0.3-0.4,0.4-0.5c8.1-10.6,16.6-37.9,25.1-81.1
c3.7-18.6,7.5-33.2,12.3-45.8c6-16,13.2-28.7,22-39.1C1084.6,938.2,1098.4,927.7,1107.5,927.7L1107.5,927.7 M1107.5,915.7
c-15.3,0-32.5,15.2-40.9,25c-21.4,24.9-30.8,58.8-37,90.3c-12,61-20.6,73.3-22.8,76.1s-17.2,25.9-73.7,66.4
c-52.5,37.6-97,98.4-65.3,164.1c5,10.4,11.3,20.1,18.4,29.1c26.7,33.6,63.5,59.1,99.9,81c32.8,19.7,72,39.2,111.1,39.7
c0.3,0,0.6,0,0.8,0c10.2,0,21.5-2.3,30.9-6.1c35.1-14,64.5-55.1,74.7-90.3c5.4-18.5,8.3-37.7,9.9-56.8c1.3-16.2,1-32.6,2.5-48.8
c3-31.3,18.6-52.6,42.5-72c11.1-9,24.9-16.3,34-27.5c9.1-11.3,17.3-23.2,21.7-37.2c2.4-7.7,4.6-16.5,2.7-24.5
c-2.3-9.7-9.8-17.7-18.9-17.7c-2.9,0-5.9,0.8-9,2.6c-16.8,9.7-25.8,27.2-46.3,30.5c-2.4,0.4-4.9,0.6-7.4,0.6
c-14.7,0-29.8-6.7-36.9-20c-2.3-4.3-3.2-8.4-3-12.4c0.3-6.8,2.6-18.3,6.3-25l-32.3-53.8c-7.5,1.7-13.9,2.7-19.8,2.7
c-10.2,0-18.4-3.1-26.7-11c-13.5-13-14.6-36.1-8.5-52.9c4.4-12,19.2-34.1,7.3-45.9C1117.7,917.5,1112.7,915.7,1107.5,915.7
L1107.5,915.7z" />
</g>
<path fill="#333333" d="M997.1,1459.3c-4.3-2.4-8.6-4.9-13.3-7.7c-61-36.7-86.1-63.2-101.1-82.1c-7.6-9.6-14-19.7-19-29.9
c-15.2-31.4-14.8-63.9,1.1-96.5c16.3-33.3,44.7-58.2,65.7-73.2c33.8-24.2,59.5-47.2,72.1-64.6c0.3-0.4,0.5-0.6,0.6-0.8
c3-3.9,11.1-18.9,22-74.2c10.9-55.4,26-78.5,38-92.4c3.3-3.8,32.7-36.8,56.4-23.5c2,1.1,3.9,2.6,5.6,4.3
c11.7,11.6,3.4,29.4-2.7,42.4c-1.4,3-2.7,5.9-3.6,8.2c-5.5,15-4.8,36.4,7.4,48.1c2.6,2.5,5.1,4.4,7.7,5.9
c8.4,4.7,17.7,5.1,34.6,1.3c1.9-0.4,3.8,0.4,4.8,2.1l32.3,53.8c0.8,1.4,0.9,3.1,0.1,4.5c-3.2,5.7-5.5,16.4-5.8,23
c-0.1,3.4,0.7,6.7,2.5,10.1c2.8,5.2,6.9,9.3,12.5,12.5c7.9,4.5,17.8,6.2,27.2,4.7c11.4-1.8,19.1-8.8,27.2-16.2
c5.3-4.8,10.7-9.8,17.5-13.7c7.1-4.1,14.7-4.3,21.4-0.5c6.3,3.6,11.2,10.5,13.1,18.4c2.1,9.2-0.2,18.7-2.8,26.9
c-4.9,15.5-14.1,28.2-22.5,38.6c-6.4,8-14.9,14-23.1,19.7c-4.1,2.9-7.9,5.6-11.5,8.5c-26,21.1-38.2,41.8-40.9,69
c-0.8,8.6-1.1,17.4-1.4,25.9c-0.2,7.5-0.5,15.2-1.1,22.8c-1.7,21.4-5,40.3-10,57.7c-10.1,35-39.9,78.3-77.4,93.3
c-10.5,4.2-22.7,6.5-33.5,6.4C1067.7,1491.5,1035.9,1481.2,997.1,1459.3z M1115.2,922.2c-6-3.4-14-2.4-23.5,3.1
c-10.8,6.2-19.3,15.6-21.7,18.4c-11.2,13.1-25.5,34.9-36,88.3c-8.1,41.5-16.3,68.5-23.6,78c-0.1,0.1-0.3,0.4-0.5,0.6
c-13.4,18.5-39.1,41.5-74.2,66.6c-20.1,14.4-47.4,38.3-62.8,69.8c-14.6,30-15,59.8-1.1,88.6c4.7,9.7,10.7,19.2,17.9,28.2
c27.7,34.9,67.3,61.1,98.7,80c4.6,2.8,8.8,5.2,13,7.6c37.5,21.1,67.9,31.1,95.8,31.5c9.5,0.1,20.7-2,30-5.7
c34.7-13.9,62.6-54.5,72.1-87.4c4.9-16.8,8-35.1,9.7-55.9c0.6-7.4,0.9-15,1.1-22.4c0.3-8.7,0.6-17.7,1.5-26.5
c2.9-29.4,16.5-52.6,44.2-75.1c3.8-3.1,8-6,12-8.9c7.7-5.4,15.7-11,21.3-18c7.8-9.8,16.5-21.7,20.9-35.7c2.2-7,4.2-15.1,2.6-22.1
c-1.3-5.5-4.5-10.2-8.7-12.6c-3.9-2.2-8.2-2.1-12.5,0.4c-5.9,3.4-11,8-15.9,12.5c-8.8,8-17.8,16.2-31.9,18.5
c-11.3,1.8-23.4-0.3-33-5.7c-6.9-3.9-12.4-9.4-16-16c-2.6-4.8-3.7-9.6-3.5-14.7c0.3-6.9,2.4-17.3,5.7-24.6l-29.3-48.9
c-14.5,3-26.6,3.4-37.8-2.9c-3.3-1.9-6.4-4.2-9.6-7.2c-15.6-15-15.9-40.4-9.6-57.7c1-2.6,2.4-5.7,3.9-8.9
c5.2-11.2,11.7-25.1,4.5-32.3C1117.7,923.8,1116.5,922.9,1115.2,922.2z" />
</g>
<g id="scratch-plate_6_">
<g id="scratch-plate_10_">
<path fill="#FDFFFC" d="M1163.9,1408.7c-0.2,0-1.5-0.1-4.6-2.7c-3.9-3.3-6.3-12.6-8.2-20.1c-1-3.9-1.9-7.5-3.1-10.9
c-3-8.5-11.4-29.6-25.3-42.8c-5.5-5.2-12-9.1-17.7-12.5l-1.1-0.7c-17.7-10.7-36.1-20.7-53.8-30.5c-7.6-4.2-15.5-8.5-23.2-12.8
c-2.3-1.3-4.7-2.5-7.1-3.7c-9-4.6-18.4-9.4-21-16.9c-4-11.3,0-26.3,5.7-36.1c7.9-13.7,19.8-25,31.5-35.1
c3.3-2.9,6.7-5.6,10.3-8.5c4.2-3.4,8.5-6.9,12.6-10.6c22.7-20.2,40.4-46.3,52.5-77.4c2.5-6.5,4.6-12.6,6.3-18.6
c0.8-2.6,2-4.5,2.8-5.3c0.1,0,0.1,0.1,0.2,0.2c1.4,1.6,3.9,7.4,5.2,10.6c2,4.7,3.6,8.4,5.7,11.1c5,6.4,10,10.4,14.4,14
c4.1,3.3,7.6,6.2,11.1,10.6c2.2,2.8,4.5,5.1,6.8,7.4c3.3,3.3,6.4,6.3,7.2,9.1c7.6,27.2,30,44.2,58.5,44.2
c11.6,0,23.3-2.9,33.9-8.4c10.9-5.7,19.7-12.6,26.7-21.2c-0.6,1.8-1.4,3.9-2.4,6.4c-0.3,0.8-0.6,1.5-0.8,2.1
c-4.6,11.9-14.1,22-21.9,29.5c-5.3,5.1-11.2,10-16.3,14c-5.3,4.2-10.7,8.1-16.4,12.3l-2.1,1.5c-24.9,18-39.6,47.4-42.7,84.9
c-0.6,7.8-0.8,15.6-1,23.2l-0.1,3.1c-0.5,22.1-2.5,54.4-14.1,80.3c-2.1,4.6-4.7,8.3-7.2,9.7
C1164.9,1408.5,1164.3,1408.7,1163.9,1408.7z" />
<path fill="#EEFAF9" d="M1121.9,1089.4c0.5,0.8,1.1,1.6,1.6,2.3c5.7,7.3,11.4,11.9,16,15.7c3.7,3,6.7,5.4,9.5,9
c2.6,3.3,5.3,6,7.7,8.3c1.6,1.5,3.9,3.8,4.6,4.9c4.6,16.2,13.9,29.6,26.8,38.7c11.9,8.4,26.3,12.8,41.7,12.8
c6.8,0,13.5-0.9,20.2-2.5c-2.6,2.2-5.2,4.3-7.5,6.2c-5.1,4.1-10.4,7.9-16,12l-2.1,1.5c-27.4,19.9-43.7,51.9-47,92.6
c-0.7,8.1-0.8,16.1-1,23.8l-0.1,3.1c-0.5,20.7-2.3,50.8-12.5,74.7c-1-3.1-1.9-6.7-2.5-9.1c-1-3.9-2-8-3.4-11.8
c-4-11.4-13-32.7-28-46.9c-6.3-6-13.3-10.2-19.5-13.9l-1.1-0.7c-17.9-10.8-36.3-20.9-54.2-30.7c-7.6-4.2-15.4-8.5-23.1-12.7
c-2.5-1.4-5-2.7-7.4-3.9c-6.2-3.2-14.6-7.5-15.9-11c-2.4-6.9-0.4-18.2,4.9-27.4c7.1-12.3,18.3-22.9,29.3-32.5
c3.2-2.8,6.5-5.4,10-8.3c4.3-3.4,8.7-7,13-10.9c24-21.3,42.6-48.8,55.3-81.5C1121.5,1090.5,1121.7,1090,1121.9,1089.4
M1120.5,1052.6c-6.2,0-10.9,6.8-12.7,13.2c-1.7,6-3.8,11.9-6,17.7c-11,28.2-27,53.2-49.7,73.4c-7.4,6.6-15.3,12.5-22.8,19
c-12.7,11-25.2,23.1-33.7,37.8c-7.3,12.7-11.6,30.5-6.5,44.9c4.9,13.9,21,19.7,32.8,26.3c25.6,14.3,51.6,28,76.7,43.1
c5.9,3.5,12,7.1,17,11.8c10.2,9.7,18,25.6,22.7,38.7c3.7,10.5,5.4,28,14.4,35.5c3.7,3.1,7.4,5.2,11.4,5.2c2.3,0,4.7-0.7,7.2-2.2
c5.1-3.1,8.9-9.1,11.2-14.4c11.5-25.7,14.4-56.5,15-84.4c0.2-8.6,0.3-17.2,1-25.7c2.4-30,13.1-59,38.4-77.3
c6.4-4.6,12.8-9.2,18.9-14.1c5.8-4.7,11.6-9.5,17-14.6c9.9-9.5,19.4-20.4,24.4-33.3c2.2-5.8,10.2-23.2,3.1-28.7
c-1.2-0.9-2.4-1.3-3.6-1.3c-5.4,0-11.2,7.4-14,10.8c-6.5,8-14.5,14.1-23.6,18.8c-9.2,4.8-19.2,7.2-29,7.2
c-21.3,0-41.4-11.7-48.4-36.5c-2.3-8.3-10.6-13.5-15.9-20.2c-8.5-10.8-17-13.8-25.5-24.7c-3.2-4.1-7.4-19.3-12.5-23.3
C1125.1,1053.4,1122.7,1052.6,1120.5,1052.6L1120.5,1052.6z" />
</g>
<path id="scratch-plate_9_" fill="#333333" d="M1293.6,1134.9c-0.1,0.8-0.3,1.6-0.6,2.6c-1,3.8-2.5,7.6-3.7,10.4
c-0.3,0.8-0.6,1.5-0.8,2.1c-4.7,12.1-14.3,22.4-22.2,30c-5.4,5.2-11.3,10-16.4,14.1c-5.3,4.3-11,8.4-16.5,12.4l-2.1,1.5
c-13.2,9.5-23.5,22.2-30.6,37.7c-6.2,13.4-10,28.9-11.4,46.1c-0.6,7.8-0.8,15.6-1,23.1l-0.1,3.1c-1,46.4-8.6,68.4-14.2,80.9
c-2.2,4.9-5.1,8.8-7.7,10.4c-1.9,1.2-2.9,1.2-4.9,0.1c-0.9-0.5-2-1.3-3.1-2.3c-4.3-3.6-6.7-13.2-8.6-20.9
c-1-3.8-1.9-7.5-3.1-10.8c-3-8.4-11.3-29.3-24.9-42.2c-5.4-5.1-11.5-8.8-17.4-12.3l-1.1-0.7c-7.6-4.6-15.8-9.4-25.3-14.7
c-9.5-5.3-19.1-10.6-28.5-15.8c-7.6-4.2-15.5-8.5-23.2-12.8c-2.3-1.3-4.7-2.5-7-3.7c-2.4-1.3-5-2.5-7.3-3.9
c-8.3-4.7-12.6-8.8-14.4-13.8c-1.8-5.2-2.2-11.7-1-18.6c1.1-6.4,3.5-13.1,6.8-18.8c8-13.8,20-25.3,31.9-35.5
c3.3-2.9,6.9-5.8,10.3-8.6c4.2-3.4,8.4-6.8,12.6-10.5c22.5-20.1,40.1-45.9,52.1-76.9c2.5-6.5,4.6-12.5,6.3-18.4
c1.1-3.8,3.2-6.3,4.1-6.7c0.1,0,0.3,0.1,0.5,0.2c0.3,0.2,0.6,0.4,0.9,0.6c1.5,1.5,4.3,8,5.6,11.1c1.9,4.6,3.5,8.2,5.5,10.8
c4.9,6.2,9.8,10.2,14.2,13.8c4,3.2,7.7,6.3,11.3,10.9c2.1,2.7,4.5,5,6.7,7.2c3.5,3.4,6.7,6.6,7.6,9.8c4.4,15.7,13.7,28,27,35.5
c18.4,10.4,42.6,10.1,63.2-0.6c10.8-5.7,19.5-12.6,26.5-21.1l0.4-0.4C1291.3,1137.5,1292.5,1136,1293.6,1134.9 M1299.2,1124
c-6.1-3.5-13.6,6.1-16.8,10.1c-6.5,8-14.5,14.1-23.6,18.8c-17.7,9.2-38.6,9.8-54.7,0.8c-10.4-5.9-18.7-15.8-22.7-30
c-2.3-8.3-10.6-13.5-15.9-20.2c-8.5-10.8-17-13.8-25.5-24.7c-3.2-4.1-7.4-19.3-12.5-23.3c-0.7-0.6-1.4-1.1-2.1-1.5
c-8.6-4.9-15.4,3.7-17.7,11.8c-1.7,6-3.8,11.9-6,17.7c-11,28.2-27,53.2-49.7,73.4c-7.4,6.6-15.3,12.5-22.8,19
c-12.7,11-25.2,23.1-33.7,37.8c-7.3,12.7-11.6,30.5-6.5,44.9c3.1,8.7,10.5,14.2,18.5,18.7c4.8,2.7,9.9,5.1,14.4,7.6
c17.1,9.6,34.5,18.9,51.6,28.5c8.4,4.7,16.8,9.6,25.1,14.6c5.9,3.5,12,7.1,17,11.8c10.2,9.7,18,25.6,22.7,38.7
c3.7,10.5,5.4,28,14.4,35.5c1.5,1.3,3,2.4,4.5,3.2c4.4,2.5,8.9,2.9,14-0.2c5.1-3.1,8.9-9.1,11.2-14.4
c11.5-25.7,14.4-56.5,15-84.4c0.2-8.6,0.3-17.2,1-25.7c2.4-30,13.1-59,38.4-77.3c6.4-4.6,12.8-9.2,18.9-14.1
c5.8-4.7,11.6-9.5,17-14.6c9.9-9.5,19.4-20.4,24.4-33.3c2.2-5.8,10.2-23.2,3.1-28.7C1299.8,1124.3,1299.5,1124.1,1299.2,1124
L1299.2,1124z" />
</g>
<g id="pickups_2_">
<path fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1113.1,1120.6c-4.6-2.6-10.5-1-13.1,3.6c-2.6,4.6-1,10.5,3.6,13.1l55.6,31.3c4.6,2.6,10.5,1,13.1-3.6c2.6-4.6,1-10.5-3.7-13.1
L1113.1,1120.6z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1080,1179.4c-4.6-2.6-10.5-1-13.1,3.7c-2.6,4.6-1,10.5,3.7,13.1l55.6,31.3c4.6,2.6,10.5,1,13.1-3.6c2.6-4.6,1-10.5-3.6-13.1
L1080,1179.4z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1049.6,1235.8c-4.3-3.1-10.3-2.1-13.4,2.2c-3.1,4.3-2.1,10.3,2.2,13.4l51.9,37.1c4.3,3.1,10.3,2.1,13.4-2.2
c3.1-4.3,2.1-10.3-2.2-13.4L1049.6,1235.8z" />
</g>
<path id="bridge_2_" fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1073,1341.3c-3.3,5.8-10.6,7.8-16.3,4.6l-51.4-29c-5.8-3.3-7.8-10.6-4.6-16.3l14-24.8c3.3-5.8,10.6-7.8,16.3-4.6l51.4,29
c5.8,3.3,7.8,10.6,4.6,16.3L1073,1341.3z" />
<path id="input_2_" fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1097.1,1364c-39.4,4.6,14.8,88.5,25.5,87.2C1131.5,1450.1,1128.9,1360.2,1097.1,1364" />
<g id="knobs_2_">
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1135.9" cy="1271" r="11.6" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1160.8,1317.4c-3,5.7-10,7.8-15.7,4.8c-5.7-3-7.8-10-4.8-15.7c3-5.7,10-7.8,15.7-4.8C1161.7,1304.7,1163.8,1311.7,1160.8,1317.4
z" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1161.3" cy="1353.3" r="11.6" />
</g>
<g id="tuners_2_">
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1409.7" cy="573.4" r="10.5" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1514.3" cy="477.5" r="10.5" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1430.6" cy="554.2" r="10.5" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1451.6" cy="535" r="10.5" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1472.5" cy="515.8" r="10.5" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1493.4" cy="496.7" r="10.5" />
</g>
<path id="neck_2_" fill="#FFD192" stroke="#333333" stroke-width="9.6863" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1147.4,1124.9c31.6,17.6,31,9.2,31,9.2L1445,653.2l-24.1-13.6l-0.9-0.5l-24.1-13.6l-274.4,477.1c0,0-6.3,3.9,25.1,21.8l0,0
c0.2,0.1,0.3,0.2,0.5,0.2" />
<g id="head-stock_2_">
<g id="head_5_">
<path fill="#E71D36" d="M1422.8,633.9l-19.1-10.8c1.1-4.2,0.7-9.7-3.4-16c-3.3-5,4.5-14.9,14-22c0.2-0.1,0.3-0.2,0.5-0.4
l116.8-107.5c3.4-1.9,7.1-2.8,11.1-2.8c7.7,0,15.5,3.7,20.4,9.6c2.9,3.5,6,9.4,4.4,17.3c-1.2,5.8-5.7,12.6-11.3,16.9
c-3.3,2.5-7.6,3.9-12.1,5.4c-4.3,1.4-8.8,2.9-13,5.4c-18.5,11.1-23.7,34.1-28.3,54.3c-1.8,7.8-3.4,15.1-5.7,21.3
c-2.5,6.7-7.1,8.9-15.6,12.4c-2.7,1.1-5.4,2.2-8.3,3.7c-16.4,8.3-25.7,18.5-30.2,24.6L1422.8,633.9z" />
<path fill="#EC4A5E" d="M1542.7,480.4c6,0,12,2.8,15.8,7.4c2.1,2.5,4.3,6.7,3.2,12.3c-0.9,4.4-4.7,9.9-9.1,13.3
c-2.5,1.9-6.3,3.1-10.3,4.4c-4.4,1.4-9.4,3.1-14.2,5.9c-20.7,12.5-26.2,36.7-31,58.1c-1.7,7.6-3.3,14.8-5.5,20.6
c-1.5,4.1-3.8,5.4-12.2,8.9c-2.7,1.1-5.7,2.3-8.7,3.9c-14.2,7.1-23.4,15.6-29,22.2l-15.7-8.8l-15.5-8.8
c0.2-4.3-0.8-9.7-4.7-15.7c0.2-1.6,2.6-7,12.3-14.3c0.3-0.2,0.6-0.5,0.9-0.8l116.2-106.9C1537.4,481,1540,480.4,1542.7,480.4
M1542.7,468.4c-5,0-10,1.2-14.6,3.9l-117.3,107.9c-14.5,10.9-20.4,22.5-15.4,30.1c6.3,9.6,0.5,15.1,0.5,15.1l24.1,13.7l25.1,14
c0,0,7.8-15.6,30.9-27.2c11.2-5.6,22.2-6.8,26.8-19.3c8.4-22.7,8.5-58.7,31.4-72.5c8-4.8,18.2-5.5,25.6-11.1
c6.2-4.8,12-12.7,13.6-20.5C1577.2,483.5,1560.2,468.4,1542.7,468.4L1542.7,468.4z" />
</g>
<path fill="#333333" d="M1417.7,643C1417.7,643,1417.7,643,1417.7,643l-24.1-13.7c-1.3-0.7-2.2-2-2.4-3.4
c-0.1-1.5-1.6,1.4-0.4-0.9c0.6-1.1,4.5-6.5,0.7-12.2c-6.5-9.8-0.2-23.6,16.3-36L1525,469.1c0.2-0.2,0.5-0.4,0.8-0.6
c10.5-6.1,23.9-6,35.1,0.3c13,7.3,19.7,20.9,16.9,34.6c-1.7,8.3-7.7,17.3-15.3,23.1c-4.7,3.6-10,5.3-15.2,7
c-3.9,1.3-7.6,2.5-10.8,4.4c-14.7,8.8-19.1,28.5-23.5,47.6c-1.8,8.1-3.6,15.8-6.1,22.6c-4.2,11.4-13,15-21.5,18.5
c-2.5,1-5.1,2.1-7.6,3.3c-21.3,10.7-28.8,25.1-28.9,25.2c-0.6,1.1-1.5,1.9-2.7,2.3c-1.2,0.4-2.4,0.2-3.5-0.4L1417.7,643z
M1402,623.8l20.2,11.4l21.3,11.9c4-5.7,13.2-16.5,30.4-25.2c2.8-1.4,5.6-2.5,8.2-3.6c7.9-3.2,13.6-5.6,16.4-13.2
c2.3-6.3,4-13.7,5.8-21.5c4.5-19.9,9.6-42.5,27.6-53.3c4-2.4,8.4-3.9,12.6-5.2c4.7-1.5,9.1-3,12.6-5.6
c5.9-4.5,10.6-11.6,11.9-17.8c2.4-11.9-4.9-20.7-12.5-25c-8.3-4.7-18.1-4.9-25.7-0.6l-116.9,107.6c-0.1,0.1-0.2,0.2-0.3,0.3
c-12.1,9.1-17.8,18.7-14.3,24C1403.3,614.3,1403.3,619.9,1402,623.8z" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1424.8" y1="588" x2="1401.7" y2="628.9" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1528" y1="491.8" x2="1439" y2="649.9" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1445.4" y1="568.8" x2="1409.2" y2="633.1" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1466.1" y1="549.5" x2="1416.6" y2="637.3" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1486.7" y1="530.3" x2="1424.1" y2="641.5" />
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="1507.4" y1="511" x2="1431.5" y2="645.7" />
</g>
<g id="frets_2_">
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1425.6,673.5c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1425.6,673.5z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1174,1120.1c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1174,1120.1z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1410.8,699.9c1.6,0.9,2.1,2.9,1.2,4.4s-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1410.8,699.9z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1395.9,726.3c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4s2.9-2.1,4.4-1.2
L1395.9,726.3z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1381.1,752.7c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4s2.9-2.1,4.4-1.2
L1381.1,752.7z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1366.2,779c1.6,0.9,2.1,2.9,1.2,4.4s-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2L1366.2,779z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1351.3,805.4c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1351.3,805.4z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1336.5,831.8c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1336.5,831.8z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1321.6,858.2c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1321.6,858.2z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1306.8,884.5c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4s2.9-2.1,4.4-1.2
L1306.8,884.5z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1291.9,910.9c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1291.9,910.9z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1277,937.3c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1277,937.3z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1262.2,963.7c1.6,0.9,2.1,2.9,1.2,4.4s-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4s2.9-2.1,4.4-1.2L1262.2,963.7z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1247.7,990.3c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1247.7,990.3z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1235.5,1011.9c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1235.5,1011.9z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1223.3,1033.6c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1223.3,1033.6z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1210.7,1055.1c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1210.7,1055.1z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1198.5,1076.7c1.6,0.9,2.1,2.9,1.2,4.4s-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1198.5,1076.7z" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1186.3,1098.4c1.6,0.9,2.1,2.9,1.2,4.4c-0.9,1.6-2.9,2.1-4.4,1.2l-37.2-21c-1.6-0.9-2.1-2.9-1.2-4.4c0.9-1.6,2.9-2.1,4.4-1.2
L1186.3,1098.4z" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1412.4" cy="652.4" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1159.5" cy="1101.4" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1382.7" cy="705.2" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1353" cy="758" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1323.3" cy="810.7" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1293.5" cy="863.5" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1263.8" cy="916.2" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1208.8" cy="1014.9" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1183.9" cy="1058" r="4.2" />
<g>
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1226.8" cy="964.9" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1242.2" cy="973.5" r="4.2" />
</g>
</g>
<g id="pegs_2_">
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1424.6" cy="588.4" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1528" cy="491.8" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1445.3" cy="569" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1465.9" cy="549.7" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1486.6" cy="530.4" r="4.2" />
<circle fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="1507.3" cy="511.1" r="4.2" />
</g>
<path id="bridge-top_2_" fill="#2EC4B6" stroke="#333333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1023.2,1299.4c-3.3-1.8-7.4-0.7-9.2,2.6c-1.8,3.3-0.7,7.4,2.6,9.2l39.2,22.1c3.3,1.8,7.4,0.7,9.2-2.6c1.8-3.3,0.7-7.4-2.6-9.2
L1023.2,1299.4z" />
<g id="switch_2_">
<line fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1168.6" y1="1286.9" x2="1174.8" y2="1251.8" />
<path fill="#2EC4B6" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1174.4,1272.6c-1.8,1.5-4.4,1.3-5.9-0.5c-1.5-1.8-1.3-4.4,0.5-5.9c1.8-1.5,4.4-1.3,5.9,0.5
C1176.4,1268.4,1176.2,1271.1,1174.4,1272.6z" />
</g>
<g id="screws_2_">
<path fill="#333333" d="M1165.1,1398.2c-1-0.5-2.2-0.2-2.7,0.8c-0.5,1-0.2,2.2,0.8,2.7c1,0.5,2.2,0.2,2.7-0.8
C1166.4,1400,1166.1,1398.7,1165.1,1398.2z" />
<circle fill="#333333" cx="1271.8" cy="1164" r="2" />
<circle fill="#333333" cx="1120.7" cy="1075.2" r="2" />
<circle fill="#333333" cx="1214.1" cy="1173.2" r="2" />
<circle fill="#333333" cx="1078.1" cy="1151.1" r="2" />
<circle fill="#333333" cx="1023.3" cy="1201.9" r="2" />
<circle fill="#333333" cx="1005" cy="1256.5" r="2" />
<circle fill="#333333" cx="1123.4" cy="1327.2" r="2" />
<path fill="#333333" d="M1199.1,1234.8c-1-0.5-2.2-0.2-2.7,0.8c-0.5,1-0.2,2.2,0.8,2.7c1,0.5,2.2,0.2,2.7-0.8
C1200.4,1236.6,1200.1,1235.4,1199.1,1234.8z" />
<circle fill="#333333" cx="1119.6" cy="1440.8" r="2" />
<path fill="#333333" d="M1097.4,1370.5c-1-0.5-2.2-0.2-2.7,0.8c-0.5,1-0.2,2.2,0.8,2.7c1,0.5,2.2,0.2,2.7-0.8
C1098.7,1372.3,1098.4,1371.1,1097.4,1370.5z" />
<circle fill="#333333" cx="1023.8" cy="1279.3" r="2" />
<circle fill="#333333" cx="1078.5" cy="1310.1" r="2" />
</g>
<g id="strings">
<polyline id="stringStraight_11_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1401.5,629.3 1084.1,1192.6 1023.7,1299.8 " />
<polyline id="stringStraight_10_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1408.9,633.5 1091.6,1196.8 1031.2,1304 " />
<polyline id="stringStraight_9_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1416.4,637.7 1099,1201 1038.6,1308.2 " />
<polyline id="stringStraight_8_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1423.8,641.9 1106.5,1205.2 1046.1,1312.4 " />
<polyline id="stringStraight_7_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1431.3,646.1 1113.9,1209.4 1053.5,1316.6 " />
<polyline id="stringStraight_6_" fill="none" stroke="#333333" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="
1438.7,650.3 1121.4,1213.6 1061,1320.7 " />
<polyline id="stringPlucked_11_" fill="none" points="1401.5,629.3 1087.8,1194.8 1023.7,1299.8 " />
<polyline id="stringPlucked_10_" fill="none" points="1408.9,633.5 1095.3,1199 1031.2,1304 " />
<polyline id="stringPlucked_9_" fill="none" points="1416.4,637.7 1102.7,1203.2 1038.6,1308.2 " />
<polyline id="stringPlucked_8_" fill="none" points="1423.8,641.9 1110.2,1207.4 1046.1,1312.4 " />
<polyline id="stringPlucked_7_" fill="none" points="1431.3,646.1 1117.6,1211.6 1053.5,1316.6 " />
<polyline id="stringPlucked_6_" fill="none" points="1438.7,650.3 1125,1215.8 1061,1320.7 " />
</g>
<g id="notes_2_">
<path class="notes" id="note-4_2_" fill="#FDE74C" stroke="#000000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1465,857.2l34.5-36.9c2-2.2,1.9-5.6-0.3-7.7l-32.5-30.4c-2.2-2-5.6-1.9-7.7,0.3l-30.5,32.6c-1.2-2.1-2.9-4-5-5.5
c-7.3-5.3-17.2-4.3-22,2.4c-4.8,6.6-2.7,16.3,4.6,21.6c7.1,5.1,16.1,4,21.4-1.7l35.6-38.1l24.6,23l-21.7,23.2
c-1.2-2.1-2.9-4-5-5.5c-7.3-5.3-17.2-4.3-22,2.4c-4.8,6.6-2.7,16.3,4.6,21.6C1450.8,863.6,1459.8,862.8,1465,857.2z" />
<path class="notes" id="note-3_2_" fill="#FDE74C" stroke="#000000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1349.1,620.8l8.1-49.8c0.5-3-1.5-5.7-4.5-6.2l-43.9-7.2c-3-0.5-5.7,1.5-6.2,4.5l-7.2,44.1c-2.1-1-4.6-1.7-7.2-1.8
c-9.1-0.3-16.6,6-16.9,14.2c-0.3,8.2,6.8,15,15.9,15.4c8.7,0.3,15.6-5.6,16.9-13.3l8.4-51.5l33.3,5.4l-5.1,31.4
c-2.2-1.1-4.6-1.7-7.2-1.8c-9.1-0.3-16.6,6-16.9,14.2c-0.3,8.2,6.8,15,15.9,15.4C1340.9,634.1,1347.9,628.4,1349.1,620.8z" />
<path class="notes" id="note-2_2_" fill="#FDE74C" stroke="#000000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1554,697.1c2-8.1-0.7-17.1-7.9-26.6l0,0c-0.5-0.7-1-1.4-1.6-2c-4-4.4-7.7-4-9.6-2.3l-33.1,30l0,0c-1.1-2.2-2.6-4.2-4.5-5.9
c-3.3-2.9-7.5-4.4-11.6-4.3c-4.2,0.1-7.9,1.8-10.5,4.8c-4.8,5.6-4.3,14.3,1.2,20.3c0.5,0.6,1.1,1.1,1.6,1.6
c6.4,5.5,15.5,5.6,21.5,0.1l32.5-29.5c0.5,0.4,0.9,0.9,1.3,1.4c5,5.5,7.3,12.6,6.6,20.6c-0.3,3.3-1,6.1-1.5,7.8
c-0.1,0.4,0,0.9,0.4,1.2c0.4,0.3,0.9,0.3,1.2,0.1C1544.2,711.9,1551.7,706.1,1554,697.1z" />
<path class="notes" id="note-1_2_" fill="#FDE74C" stroke="#000000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1293.9,711.3c-1.6-8.2-7.7-15.3-18.3-20.8l0,0c-0.8-0.4-1.5-0.8-2.2-1.1c-5.5-2.3-8.6-0.4-9.6,1.9l-17.5,41.1l0,0
c-1.9-1.6-4.1-2.8-6.5-3.4c-4.2-1.2-8.6-0.9-12.3,1c-3.7,1.8-6.4,4.9-7.5,8.7c-2,7,2.1,14.8,9.6,17.9c0.7,0.3,1.4,0.6,2.2,0.8
c8.1,2.3,16.4-1.4,19.6-8.9l17.2-40.3c0.6,0.2,1.2,0.4,1.8,0.7c6.8,2.9,11.9,8.4,14.6,16c1.1,3.1,1.6,5.9,1.9,7.8
c0.1,0.4,0.4,0.8,0.8,0.9c0.4,0.1,0.9-0.1,1.2-0.5C1291.3,728.8,1295.7,720.4,1293.9,711.3z" />
</g>
</g>
</g>
</svg>
<audio id="audio-1">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-1.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-2">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-2.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-3">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-3.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-4">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-4.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-5">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-5.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-6">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-6.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-7">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-7.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-8">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-8.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-9">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-9.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-10">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-10.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-11">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-11.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="audio-12">
<source src="https://s3.amazonaws.com/iamjoshellis-codepen/smoke-on-the-water/smoke-on-the-water-12.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="http://codepen.io/iamjoshellis/"><i class="fa fa-codepen"></i></a>
<p>Click, Touch or Keys to Play!</p>
<a target="blank" href="http://twitter.com/iamjoshellis/"><i class="fa fa-twitter"></i></a>
</div>
Raw
script.js
//Click/Touch the guitar, or any key to play!
//Convert circle elements to paths
MorphSVGPlugin.convertToPath("circle");
//Note to self: Name stuff better in illustrator!
//Varibles for the animation
stringStringyness = 2;
guitar = document.getElementById('guitar_2_');
stringStraight_6_ = document.getElementById('stringStraight_6_');
stringPlucked_6_ = document.getElementById('stringPlucked_6_');
stringStraight_7_ = document.getElementById('stringStraight_7_');
stringPlucked_7_ = document.getElementById('stringPlucked_7_');
stringStraight_8_ = document.getElementById('stringStraight_8_');
stringPlucked_8_ = document.getElementById('stringPlucked_8_');
stringStraight_9_ = document.getElementById('stringStraight_9_');
stringPlucked_9_ = document.getElementById('stringPlucked_9_');
stringStraight_10_ = document.getElementById('stringStraight_10_');
stringPlucked_10_ = document.getElementById('stringPlucked_10_');
stringStraight_11_ = document.getElementById('stringStraight_11_');
stringPlucked_11_ = document.getElementById('stringPlucked_11_');
speaker_1 = document.getElementById('speaker-1');
speakerWobble_1 = document.getElementById('speaker-wobble-1');
speaker_2 = document.getElementById('speaker-2');
speakerWobble_2 = document.getElementById('speaker-wobble-2');
note_1 = document.getElementById('note-1_2_');
note_2 = document.getElementById('note-2_2_');
note_3 = document.getElementById('note-3_2_');
note_4 = document.getElementById('note-4_2_');
spark_1 = document.getElementById('spark-1');
spark_2 = document.getElementById('spark-3');
spark_3 = document.getElementById('spark-4');
//Declare timeline
var pluck = new TimelineMax({
paused: true
})
//String Animtaions
pluck.to(stringStraight_6_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_6_.getAttribute('points')}})
.to(stringStraight_6_, 1, {morphSVG: {points: stringStraight_6_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness, 0.04)})
.to(stringStraight_7_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_7_.getAttribute('points')}}, "-=1.1")
.to(stringStraight_7_, 1, {morphSVG: {points: stringStraight_7_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness,0.04)}, "-=1")
.to(stringStraight_8_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_8_.getAttribute('points')}}, "-=1.1")
.to(stringStraight_8_, 1, {morphSVG: {points: stringStraight_8_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness, 0.04)}, "-=1")
.to(stringStraight_9_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_9_.getAttribute('points')}}, "-=1.1")
.to(stringStraight_9_, 1, {morphSVG: {points: stringStraight_9_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness, 0.04)}, "-=1")
.to(stringStraight_10_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_10_.getAttribute('points')}}, "-=1.1")
.to(stringStraight_10_, 1, {morphSVG: {points: stringStraight_10_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness, 0.04)}, "-=1")
.to(stringStraight_11_, 0.1, {ease: Expo.easeOut,morphSVG: {points: stringPlucked_11_.getAttribute('points')}}, "-=1.1")
.to(stringStraight_11_, 1, {morphSVG: {points: stringStraight_11_.getAttribute('points')},ease: Elastic.easeOut.config(stringStringyness, 0.04)}, "-=1")
//Note Animations
.to(note_1, 0.4, {x:"-50%", y:"-50%"}, "-=1.1")
.to(note_1, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(note_1, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
.to(note_2, 0.4, {x:"50%", y:"-50%"}, "-=1.1")
.to(note_2, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(note_2, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
.to(note_3, 0.4, {x:"-20%", y:"-50%"}, "-=1.1")
.to(note_3, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(note_3, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
.to(note_4, 0.4, {x:"50%", y:"-25%"}, "-=1.1")
.to(note_4, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(note_4, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
//Sparks Animations
.to(spark_1, 0.4, {x:"-50%", y:"50%"}, "-=1.1")
.to(spark_1, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(spark_1, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
.to(spark_2, 0.4, {x:"-50%", y:"-50%"}, "-=1.1")
.to(spark_2, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(spark_2, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
.to(spark_3, 0.4, {x:"50%", y:"-50%"}, "-=1.1")
.to(spark_3, 0.2, {opacity:1 , ease:SlowMo.easeIn}, "-=1.1")
.to(spark_3, 0.2, {opacity:0 , ease:SlowMo.easeOut}, "-=0.9")
//Speaker Animtaions
.to(speaker_1, 0.1, {ease: Expo.easeOut,morphSVG:speakerWobble_1}, "-=1.1")
.to(speaker_1, 0.4, {morphSVG:speaker_1,ease: Elastic.easeOut}, "-=1")
.to(speaker_2, 0.1, {ease: Expo.easeOut,morphSVG:speakerWobble_2}, "-=1.05")
.to(speaker_2, 0.4, {morphSVG:speaker_2,ease: Elastic.easeOut}, "-=0.95");
//Trigger Audio
var i = 0;
function playAudio() {
if (i < 12) {
++i;
} else {
i = 1;
}
var myAudio = document.getElementById("audio-" + i);
myAudio.play();
}
function rockOut() {
pluck.restart();
pluck.play();
playAudio();
}
//Do the stuff when clicked
guitar.addEventListener("click", rockOut);
document.addEventListener("keydown", rockOut);
Raw
scripts
<script src="http://codepen.io/iamjoshellis/pen/LVvbzy"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
Raw
style.css
body{
background: #58D0C5;
}
svg {
height: 100vh;
width: 100vw;
display: block;
}
i {
color: $white;
}
i:hover {
color: $gray-light;
}
.notes, .sparks {
opacity: 0;
}
#shadow {
animation: shadow 4s infinite linear;
transform-origin: 50% 50%;
}
#guitar_2_ {
animation: hover 4s infinite linear;
}
@keyframes hover {
from, to {
transition-timing-function: ease-in-out;
transform: translate3d(0,0,0);
}
50% {
transition-timing-function: ease-in-out;
transform: translate3d(0,1.5%,0);
}
}
@keyframes shadow {
from, to {
transition-timing-function: ease-in-out;
transform: scale(0.95,1);
}
50% {
transition-timing-function: ease-in-out;
transform: scale(1.05,1);
}
}
Raw
styles
<link href="http://codepen.io/iamjoshellis/pen/LVvbzy" rel="stylesheet" />
Raw
SVG Animated Guitar (Play Me!).markdown

SVG Animated Guitar (Play Me!)

Rock out with this interactive svg animation, click, tap, or any key to play! Part of my Pen's of Rock! collection. Drawn in adobe illustrator, animated with greensock's svg morph plugin. Turn your speakers up for html audio elements in your ears! Took a lot of inspiration from @chrisgannon for animation. Just to be clear - I recorded the guitar, however I didn't write "Smoke on the Water"... Weird bounding box appears when tapped on mobile, any ideas?

Forked from Josh's Pen SVG Animated Guitar (Play Me!).

A Pen by Hernan Zaldivar on CodePen.

License.

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