cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <audio id="audio1" class="music">
  <source src="">
  Your browser does not support the audio element.
</audio>
<audio id="audio2" class="music">
  <source src="">
  Your browser does not support the audio element.
</audio>
<audio id="audio3" class="music">
  <source src="">
  Your browser does not support the audio element.
</audio>
<audio id="audio4" class="music">
  <source src="" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="1475px" height="1208.2px" viewBox="0 0 1475 1208.2" style="enable-background:new 0 0 1475 1208.2;"
  xml:space="preserve">
<style type="text/css">
	.st0{fill:black;}
	.st1{font-family:'ComicSansMS';}
	.st2{font-size:13.8937px;}
</style>
<defs>
</defs>
<g id="rain_1_">
	<g id="BL_1_">
		<g id="_x31_4_1_">
			<g>
				<path d="M263.4,496.2c6.4,10.2,3.6,22.4,1.1,33.4c-2.7,12.3-5.4,24.5-8.1,36.8c-5.4,24.5-10.8,49-16.2,73.6
					c-0.4,1.9,2.5,2.7,2.9,0.8c5.8-26.5,11.6-52.9,17.4-79.4c2.8-12.5,5.8-25.1,8.2-37.7c1.9-9.8,2.7-20.2-2.9-29
					C264.9,493.1,262.3,494.6,263.4,496.2L263.4,496.2z"/>
			</g>
		</g>
		<g id="_x31_3_1_">
			<g>
				<path d="M178.5,756.4c-9,36.4-22.7,71.4-40.6,104.4c-0.9,1.7,1.7,3.2,2.6,1.5c18.1-33.1,31.8-68.4,40.9-105.1
					C181.9,755.3,179,754.5,178.5,756.4L178.5,756.4z"/>
			</g>
		</g>
		<g id="_x31_2_1_">
			<g>
				<path d="M558.6,569.3c-7.5,44-15.1,88-22.6,132c-0.3,1.9,2.6,2.7,2.9,0.8c7.5-44,15.1-88,22.6-132
					C561.8,568.2,558.9,567.4,558.6,569.3L558.6,569.3z"/>
			</g>
		</g>
		<g id="_x31_1_1_">
			<g>
				<path d="M415.7,810.6c1.7-19.2,6.2-37.9,13.3-55.8c0.7-1.8-2.2-2.6-2.9-0.8c-7.2,18.2-11.7,37.1-13.4,56.6
					C412.5,812.6,415.5,812.5,415.7,810.6L415.7,810.6z"/>
			</g>
		</g>
	</g>
	<g id="TL_1_">
		<g id="_x31_7_1_">
			<g>
				<path d="M203.1,109.4c-13.6,40.8-29.6,80.9-47.8,119.9c-0.8,1.7,1.8,3.3,2.6,1.5c18.3-39.2,34.4-79.5,48.1-120.6
					C206.6,108.3,203.7,107.5,203.1,109.4L203.1,109.4z"/>
			</g>
		</g>
		<g id="_x31_6_1_">
			<g>
				<path d="M374,113.9c-4.3,50.8-15.3,100.8-32.6,148.7c-0.7,1.8,2.2,2.6,2.9,0.8c17.4-48.2,28.3-98.5,32.7-149.5
					C377.2,112,374.2,112,374,113.9L374,113.9z"/>
			</g>
		</g>
		<g id="_x31_5_1_">
			<g>
				<path d="M452.3,286.7c-10.1,19.2-16.7,39.8-19.6,61.3c-0.3,1.9,2.7,1.9,3,0c2.8-20.9,9.3-41.1,19.2-59.8
					C455.8,286.5,453.2,285,452.3,286.7L452.3,286.7z"/>
			</g>
		</g>
		<g id="_x31_0_1_">
			<g>
				<path d="M577.1,204.5C591.6,152.7,606,100.8,620.5,49c0.5-1.9-2.4-2.7-2.9-0.8c-14.4,51.8-28.9,103.7-43.3,155.5
					C573.7,205.6,576.6,206.4,577.1,204.5L577.1,204.5z"/>
			</g>
		</g>
	</g>
	<g id="TR_1_">
		<g id="_x39__1_">
			<g>
				<path d="M774.9,302.1c-4.5-17.5,0.1-35.1,5.1-52c4.7-16,9.7-32,14.9-47.9c10.6-32.4,22.3-64.4,34.9-96.1
					c0.7-1.8-2.2-2.6-2.9-0.8c-13.1,32.9-25.1,66.1-36.1,99.8c-5.3,16.4-10.6,33-15.3,49.6c-4.4,15.7-7.7,32.1-3.5,48.2
					C772.5,304.8,775.4,304,774.9,302.1L774.9,302.1z"/>
			</g>
		</g>
		<g id="_x38__1_">
			<g>
				<path d="M904.2,344.3c18.4-66.3,40.1-131.6,65.2-195.6c7.4-18.9,15.1-37.6,23-56.2c0.7-1.8-1.8-3.3-2.6-1.5
					c-27.3,64-51.4,129.3-71.9,195.7c-5.8,18.9-11.4,37.8-16.7,56.8C900.8,345.4,903.7,346.2,904.2,344.3L904.2,344.3z"/>
			</g>
		</g>
		<g id="_x37__1_">
			<g>
				<path d="M1119.5,244.1c11.2-29.4,26.8-57,46.3-81.8c1.2-1.5-0.9-3.6-2.1-2.1c-19.8,25.2-35.7,53.2-47.1,83.2
					C1115.9,245.1,1118.8,245.9,1119.5,244.1L1119.5,244.1z"/>
			</g>
		</g>
		<g id="_x36__1_">
			<g>
				<path d="M1293.7,141.4c14.4-22.7,28.8-45.5,43.3-68.2c1-1.6-1.6-3.1-2.6-1.5c-14.4,22.7-28.8,45.5-43.3,68.2
					C1290.1,141.6,1292.7,143.1,1293.7,141.4L1293.7,141.4z"/>
			</g>
		</g>
		<g id="_x35__1_">
			<g>
				<path d="M1230.5,318.2c19.2-33.7,31.5-70.7,36.5-109.1c0.2-1.9-2.8-1.9-3,0c-4.9,37.9-17.2,74.4-36.1,107.6
					C1226.9,318.4,1229.5,319.9,1230.5,318.2L1230.5,318.2z"/>
			</g>
		</g>
	</g>
	<g id="BR_1_">
		<g id="_x34__1_">
			<g>
				<path d="M790,630.3c0.6-36.1,5-72.1,13.2-107.3c0.4-1.9-2.5-2.7-2.9-0.8c-8.2,35.5-12.6,71.7-13.3,108.1
					C787,632.2,790,632.2,790,630.3L790,630.3z"/>
			</g>
		</g>
		<g id="_x33__1_">
			<g>
				<path d="M811.8,834.8c15-33.1,21.6-69.5,18.9-105.8c-0.1-1.9-3.1-1.9-3,0c2.6,35.7-3.8,71.6-18.5,104.3
					C808.5,835,811,836.5,811.8,834.8L811.8,834.8z"/>
			</g>
		</g>
		<g id="_x32__1_">
			<g>
				<path d="M966.5,629.9c8.2-12.9,16.5-25.7,24.7-38.6c1-1.6-1.6-3.1-2.6-1.5c-8.2,12.9-16.5,25.7-24.7,38.6
					C962.9,630,965.5,631.5,966.5,629.9L966.5,629.9z"/>
			</g>
		</g>
		<g id="_x31__1_">
			<g>
				<path d="M1362.8,571.6c8.2-27.1,16.4-54.2,24.5-81.3c0.6-1.9-2.3-2.6-2.9-0.8c-8.2,27.1-16.4,54.2-24.5,81.3
					C1359.3,572.6,1362.2,573.4,1362.8,571.6L1362.8,571.6z"/>
			</g>
		</g>
	</g>
</g>
<g id="VerticleBar_1_">
	<g>
		<g>
			<path d="M676.5,1.4c9.3,118.6-7.5,237-11,355.5c-1.8,59.8,0.8,119.6,2.4,179.3c1.6,59.8,3.2,119.7,4.8,179.5
				c1.8,67.2,3.6,134.3,5.4,201.5c0.1,1.9,3.1,1.9,3,0c-3.2-120-6.4-240-9.6-360c-1.6-59.8-4.4-119.7-3.4-179.6
				c0.9-59.2,5.7-118.3,9.5-177.4c4.2-66.2,7.1-132.6,2-198.8C679.4-0.5,676.4-0.5,676.5,1.4L676.5,1.4z"/>
		</g>
	</g>
	<g>
		<g>
			<path d="M693.2,5.1c-2,122.2-0.3,244.4,2,366.6c2.4,122.3,5.1,244.5,6.5,366.8c0.8,68.5,1.4,137,1.7,205.4c0,1.9,3,1.9,3,0
				c-0.5-122.3-1.9-244.7-4.1-367c-2.2-122.2-5.4-244.4-6.5-366.6c-0.7-68.4-0.7-136.8,0.4-205.2C696.2,3.2,693.2,3.2,693.2,5.1
				L693.2,5.1z"/>
		</g>
	</g>
</g>
<g id="HorizontalVW_1_">
	<g>
		<g>
			<path d="M1.4,399.7c186.1-8.9,371.9,8.5,557.8,12.4c92.6,1.9,185.3-0.4,277.9-1.8c93.4-1.4,186.8-2.8,280.2-4.1
				c104.8-1.5,209.6-3.1,314.5-4.6c1.9,0,1.9-3,0-3c-187.7,2.8-375.5,5.5-563.2,8.3c-92.7,1.4-185.4,3.9-278.1,2.8
				c-92.7-1.1-185.2-6.1-277.8-10.1c-103.7-4.5-207.5-7.7-311.3-2.7C-0.5,396.8-0.5,399.8,1.4,399.7L1.4,399.7z"/>
		</g>
	</g>
	<g>
		<g>
			<path d="M7.2,383.1c191,2.4,382.1,1.2,573.1-0.7c190.3-1.9,380.5-4.1,570.8-5.1c107.5-0.6,214.9-0.9,322.4-0.9c1.9,0,1.9-3,0-3
				c-191.5,0.1-383,1-574.5,2.8c-190.1,1.8-380.1,4.4-570.2,5.2c-107.2,0.4-214.4,0.2-321.6-1.2C5.3,380,5.3,383,7.2,383.1
				L7.2,383.1z"/>
		</g>
	</g>
</g>
<g id="WindowSill_1_">
	<g>
		<g>
			<path d="M703,942.5c-88.9,3.7-177.8,7.3-266.7,6.9c-44.7-0.2-89.3-1.8-133.9-4c-43.8-2.2-87.3-4.6-130.4-13.3
				c-44.7-9-90.8-21.2-136.4-10.5c-1.9,0.4-1.1,3.3,0.8,2.9c42.2-9.9,85,0.2,126.5,8.8c20.1,4.2,40.3,7.7,60.7,9.9
				c21.6,2.3,43.3,3.4,65,4.5c88.4,4.5,176.6,5.6,265.1,3.2c49.8-1.3,99.5-3.4,149.3-5.4C705,945.4,705,942.4,703,942.5L703,942.5z"
				/>
		</g>
	</g>
	<g>
		<g>
			<path d="M698,950c92.5-5.4,184.9-10.9,277.4-16.3c91.9-5.4,183.9-10.5,276-12.7c52-1.2,104-1.5,156-0.4c1.9,0,1.9-3,0-3
				c-92.4-1.9-184.9,0.5-277.2,4.8c-92.1,4.2-184,10-276,15.5c-52.1,3.1-104.1,6.1-156.2,9.2C696.1,947.2,696.1,950.2,698,950
				L698,950z"/>
		</g>
	</g>
	<g>
		<g>
			<path d="M31,1208.2c185.4-5.7,371-3.3,556.4-5.7c185.2-2.5,370.4-9.9,555.6-14.1c104.1-2.4,208.1-4.3,312.2-5.9c1.9,0,1.9-3,0-3
				c-186.3,2.8-372.5,7-558.7,12.1c-92.7,2.6-185.3,5.9-278.1,7.5c-92.2,1.5-184.4,1.7-276.5,2c-103.7,0.4-207.4,1.1-311,4.2
				C29.1,1205.3,29.1,1208.3,31,1208.2L31,1208.2z"/>
		</g>
	</g>
</g>
<g id="Plant_1_">
	<g>
		<path class="st0" d="M974.5,881.3c21.8,66.4,43.7,132.8,65.5,199.2c1.7,5.2,3.5,10.5,6.5,14.2c4.8,5.9,11.6,6.6,17.9,7.1
			c43.7,3.1,87.5,6.3,131.2,9.4c5.2,0.4,10.5,0.7,15.3-1.8c7.4-3.8,12.5-13.4,16.6-23c15.1-34.8,23.9-74.3,32.5-113.4
			c8-36.4,16-72.8,24-109.1c-11.8,0.8-23.4,4.5-35,7.6c-61.6,16.6-125.4,15.7-186.8-2.6c-28.1-8.4-58.7-20.1-84.5-1.9"/>
		<g>
			<path d="M973.1,881.7c14.4,43.6,28.7,87.3,43.1,130.9c7.2,21.8,14.4,43.6,21.5,65.4c2.4,7.4,4.6,16.2,11.3,21
				c6.6,4.7,15.7,4.3,23.4,4.8c22.5,1.6,45.1,3.2,67.6,4.8c11.6,0.8,23.2,1.7,34.8,2.5c9.9,0.7,20.9,2.9,30.8,1.4
				c17.1-2.5,23.7-25.4,28.9-39.1c7.5-19.8,13.2-40.2,18.1-60.8c11.9-49.3,22.1-99,33-148.5c0.2-0.9-0.4-2-1.4-1.9
				c-20.8,1.6-40.9,9.8-61.4,13.6c-21.5,4-43.4,6-65.2,5.8c-21.9-0.2-43.7-2.5-65.2-6.9c-20.1-4.1-39.2-11.3-59.1-15.9
				c-19.3-4.5-39.2-4.8-56.2,6.7c-1.6,1.1-0.1,3.7,1.5,2.6c16.8-11.5,36.4-10.6,55.4-6c19.3,4.7,38,11.5,57.5,15.5
				c39.7,8.2,80.7,9.2,120.8,3c11.9-1.8,23.7-4.3,35.3-7.4c12.1-3.2,24-7.1,36.5-8.1c-0.5-0.6-1-1.3-1.4-1.9
				c-9.2,41.9-18.3,83.8-27.7,125.6c-4.4,19.7-9.1,39.4-15,58.7c-2.9,9.6-6.1,19-9.8,28.3c-3.4,8.5-6.8,17.7-12.4,25.1
				c-3.2,4.2-7,7.4-12.3,8.4c-5.1,1-10.8,0-15.9-0.3c-10.9-0.8-21.9-1.6-32.8-2.3c-21.5-1.5-43.1-3.1-64.6-4.6
				c-10.2-0.7-20.4-1.2-30.6-2.2c-4.8-0.5-9.5-1.7-13-5.2c-3.7-3.7-5.3-9.2-6.9-14c-6.8-20.5-13.5-41-20.2-61.5
				c-15.2-46.2-30.4-92.3-45.6-138.5C975.4,879.1,972.5,879.9,973.1,881.7L973.1,881.7z"/>
		</g>
	</g>
	<g>
		<path class="st0" d="M1149.3,870.9c-4.1-71.3-7.6-147,15.2-210.6c12.1-33.9,31-61.8,51.5-86.1c21.4-25.4,44.8-47.3,69.6-65.1
			c-14.9,47.8-51.1,75.3-69.1,120.8c-5.8,14.5-9.5,30.5-12.9,46.4c-14,64.3-24,130.4-29.9,197.3c-1.7-25.1,7.3-49,16.4-70.6
			c18.7-44.4,39.9-87.9,68.7-119.2c28.8-31.4,66.5-49.4,101.7-37.7c-31,24.7-60.2,54-87.1,87.2c-25.3,31.2-49.1,67.3-60.2,112.5
			c17-35,36.2-68.5,60.6-93.1s54.3-39.6,83.9-34.5c5.2,0.9,11.5,4,12.2,11.4c-30.9,7.1-62.4,14.5-90.3,34.7
			c-35.4,25.7-63.2,72.1-75.5,126.2"/>
		<g>
			<path d="M1150.8,870.9c-3.1-54-6.2-109,2.9-162.7c4.4-25.9,12-51.1,23.9-74.6c11.5-22.7,26.4-43.4,43-62.6
				c19.5-22.6,41.5-43.2,65.7-60.7c-0.7-0.6-1.5-1.1-2.2-1.7c-13.8,43.5-49.2,74.6-67.1,116c-10.4,23.9-15,50.2-20.1,75.7
				c-5.4,26.9-10,53.8-14,80.9c-4.5,30.7-8.1,61.4-10.9,92.3c1,0,2,0,3,0c-1.3-22.8,5.7-44.6,14.3-65.4
				c8.4-20.5,17.5-40.8,27.8-60.5c18.9-36,43.3-73.2,80.1-92.8c19.3-10.3,41.4-14.2,62.6-7.4c-0.2-0.8-0.4-1.7-0.7-2.5
				c-26.9,21.5-51.6,45.6-74.1,71.6c-20.6,23.7-39.8,49-54.2,77c-8.4,16.4-15,33.7-19.4,51.7c-0.4,1.6,2,2.7,2.7,1.2
				c13.1-26.8,27.4-53.4,46.1-76.8c17.5-21.9,40.2-42.3,68.2-49c10.9-2.6,37.1-6.6,39.6,9.2c0.3-0.6,0.7-1.2,1-1.8
				c-33.2,7.6-66.6,16.2-94,37.4c-23.7,18.4-41.6,43.7-54.3,70.7c-8.1,17.2-14.2,35.3-18.5,53.8c-0.4,1.9,2.5,2.7,2.9,0.8
				c7.2-31.2,19.6-61.4,38.2-87.5c18.6-26.1,43.2-45.8,73.1-57.4c17.3-6.7,35.4-10.9,53.4-15c0.9-0.2,1.2-1.1,1-1.8
				c-2-12.5-16.1-13.7-26.5-13.5c-14,0.2-27.5,4.6-39.8,11.1c-27.8,15-48.5,40.7-65.2,67c-10.4,16.5-19.5,33.7-28,51.2
				c0.9,0.4,1.8,0.8,2.7,1.2c15.8-63.4,59.3-116.7,105-161.7c13.3-13.1,27.3-25.6,41.9-37.3c0.9-0.7,0.3-2.2-0.7-2.5
				c-39.5-12.6-78.4,10.7-104.2,39.3c-30,33.3-49.5,75-66.8,115.9c-10,23.5-19.1,47.9-17.6,73.8c0.1,1.9,2.8,1.9,3,0
				c5-55.3,12.7-110.4,23.3-164.9c5.1-26.2,9.6-53.5,19.5-78.4c8.2-20.6,21.1-38.7,33.9-56.7c14.3-20,27.8-40.5,35.3-64.1
				c0.4-1.2-1.1-2.5-2.2-1.7c-41.9,30.3-79.7,70-104.9,115.3c-26.1,46.9-34,100.2-34.9,153.2c-0.6,31.6,1.1,63.1,2.9,94.6
				C1147.9,872.9,1150.9,872.9,1150.8,870.9L1150.8,870.9z"/>
		</g>
	</g>
	<g>
		<path class="st0" d="M1137.3,847c-16.6-47.8-35.2-98.5-68.1-123.5c-10.9-8.2-22.8-13.2-34.8-17c-33.4-10.5-68.2-12-102-4.4
			c35.7,24.2,71.5,48.5,107.2,72.7c33.9,23,70.3,49.3,86.8,97.7c-27.3-31.4-57.6-59.1-91.3-72.6c-33.8-13.5-71.6-11.5-101.9,13.6
			c61.7,3.3,122.7,29.9,175.2,76.6"/>
		<g>
			<path d="M1138.8,846.6c-11.9-34.1-23.8-69.7-45-99.2c-9.6-13.4-21.4-25.1-36-32.9c-17.2-9.2-37-14.2-56.3-16.8
				c-23.2-3.1-46.6-2-69.5,3.1c-1.3,0.3-1.4,2.1-0.4,2.7c32.7,22.2,65.4,44.4,98.2,66.5c24.2,16.4,48.9,32.9,68,55.4
				c11.9,14.1,21.1,30.1,27.1,47.6c0.8-0.5,1.7-1,2.5-1.5c-37.3-42.8-90-91.2-151.8-79.7c-16.1,3-30.9,10.3-43.5,20.7
				c-1.1,0.9-0.1,2.5,1.1,2.6c65.2,3.7,125.7,33.3,174.2,76.1c1.4,1.3,3.6-0.8,2.1-2.1c-49.1-43.4-110.2-73.3-176.3-77
				c0.4,0.9,0.7,1.7,1.1,2.6c22.9-18.6,52.3-25.3,81-19.2c28,5.9,52.8,22.5,73.9,41.2c12.9,11.4,24.8,24,36.1,37
				c1,1.1,3-0.1,2.5-1.5c-10.1-29.2-28.9-53.3-52.5-73c-26.3-21.9-56.1-40-84.4-59.2c-19.2-13-38.5-26.1-57.7-39.1
				c-0.1,0.9-0.2,1.8-0.4,2.7c38.8-8.5,82.4-6.1,118.7,11c31.1,14.6,49,45.1,62.4,75.3c8.4,18.7,15.2,38.1,21.9,57.5
				C1136.5,849.2,1139.4,848.4,1138.8,846.6L1138.8,846.6z"/>
		</g>
	</g>
	<g>
		<path class="st0" d="M1141.8,776.8c13.2-84.6-5.9-178.1-49-239c-43.1-60.8-108.5-86.9-167.3-66.6c25.8,24.6,50.4,51.7,73.6,81.1
			c38,48.1,72.6,102.8,97.3,166.3c24.4,62.4,38.7,131.6,52.9,200.1"/>
		<g>
			<path d="M1143.2,777.2c9.5-61.8,3.1-127.2-20-185.4c-20.8-52.5-58.2-101.7-113-121.1c-27.5-9.7-57.5-10.3-85.1-1
				c-1,0.4-1.5,1.7-0.7,2.5c47,45,89,96,123,151.5c17,27.7,31.9,56.6,44.2,86.7c12.7,31,22.5,63,30.9,95.4
				c9.7,37.5,17.6,75.4,25.4,113.3c0.4,1.9,3.3,1.1,2.9-0.8c-13.9-67.2-27.7-135.1-52.6-199.3c-22.9-58.9-55.7-113.4-94.5-163.2
				c-23.7-30.4-49.4-59.1-77.2-85.7c-0.2,0.8-0.4,1.7-0.7,2.5c52.1-17.7,106.6,2.5,144.2,40.4c41.3,41.7,62.5,100.6,70.6,157.7
				c5,35,5,70.7-0.4,105.6C1140,778.3,1142.9,779.1,1143.2,777.2L1143.2,777.2z"/>
		</g>
	</g>
</g>
<g id="Radio_1_">
	<g>
		<path class="st0" d="M114,853.9c2.4,95.3,4.4,170.9,6.7,266.2c173.2,4.8,346.7,2.6,519.8-6.4c-7-85.4-20.1-170.3-39.2-253.9
			c-0.9-3.8-1.9-7.9-4.8-10.5c-4-3.6-10-3.2-15.3-2.6c-63.9,6.9-127.9,11.9-192,15.3C296.6,866.8,198,863.9,114,853.9"/>
		<g>
			<path d="M112.5,853.9c1.7,68.6,3.5,137.1,5.2,205.7c0.5,20.2,1,40.3,1.5,60.5c0,0.8,0.7,1.5,1.5,1.5
				c67.7,1.9,135.4,2.7,203.2,2.4c67.4-0.2,134.8-1.5,202.2-3.9c38.2-1.3,76.3-3,114.4-5c0.8,0,1.6-0.7,1.5-1.5
				c-4.2-50.6-10.4-101-18.8-151.1c-4.2-25-8.9-49.9-14.1-74.6c-1.3-6-2.6-12.1-3.9-18.1c-1.2-5.4-2-11.4-4.1-16.5
				c-3.7-8.8-12.4-8.9-20.8-8c-101.4,10.6-203.4,18.7-305.4,17.2c-53.7-0.8-107.5-3.9-160.8-10.2c-1.9-0.2-1.9,2.8,0,3
				c93.8,11.1,188.8,12.8,283.1,7.7c50.2-2.7,100.4-6.5,150.5-11.4c12.2-1.2,24.4-2.9,36.5-3.7c6.6-0.4,12.2,1.1,14.6,8
				c1.9,5.6,2.8,11.8,4.1,17.6c5.3,24.1,10.1,48.3,14.4,72.6c9.9,55.5,17.1,111.4,21.7,167.6c0.5-0.5,1-1,1.5-1.5
				c-67.6,3.5-135.3,6-203.1,7.4c-67.4,1.4-134.8,1.8-202.2,1.1c-38.2-0.4-76.4-1.1-114.5-2.1c0.5,0.5,1,1,1.5,1.5
				c-1.7-68.6-3.5-137.1-5.2-205.7c-0.5-20.2-1-40.3-1.5-60.5C115.4,852,112.4,852,112.5,853.9L112.5,853.9z"/>
		</g>
	</g>
	<g id="Speakers_1_">
		<g>
			<g>
				<path d="M117.8,991.4c26.1-3.3,52.4-3,78.4,1.1c1.9,0.3,2.7-2.6,0.8-2.9c-26.3-4.1-52.9-4.5-79.2-1.2
					C115.9,988.7,115.9,991.7,117.8,991.4L117.8,991.4z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M121.6,1046.2c23.9,0.9,47.8,1.8,71.8,2.7c1.9,0.1,1.9-2.9,0-3c-23.9-0.9-47.8-1.8-71.8-2.7
					C119.7,1043.1,119.7,1046.1,121.6,1046.2L121.6,1046.2z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M119.3,926.5c25.5,0,50.9,0,76.4,0c1.9,0,1.9-3,0-3c-25.5,0-50.9,0-76.4,0C117.3,923.5,117.3,926.5,119.3,926.5
					L119.3,926.5z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M625.5,987.3c-26.4-3.4-53-2.9-79.2,1.2c-1.9,0.3-1.1,3.2,0.8,2.9c26-4.1,52.3-4.4,78.4-1.1
					C627.4,990.5,627.4,987.5,625.5,987.3L625.5,987.3z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M636.8,1044.3c-23.9,0.9-47.8,1.8-71.8,2.7c-1.9,0.1-1.9,3.1,0,3c23.9-0.9,47.8-1.8,71.8-2.7
					C638.7,1047.3,638.7,1044.3,636.8,1044.3L636.8,1044.3z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M611.3,923.5c-25.5,0-50.9,0-76.4,0c-1.9,0-1.9,3,0,3c25.5,0,50.9,0,76.4,0C613.3,926.5,613.3,923.5,611.3,923.5
					L611.3,923.5z"/>
			</g>
		</g>
	</g>
	<g id="Buttons">
		<g id="button4" onclick="togglePlayFour()">
			<path class="st0" d="M469.1,1044.8c-4.8,0.1-9.7,1.4-13.2,4.6c-3.6,3.2-5.4,8.6-3.7,13.2c2.6,7,11.5,8.7,18.8,8.9
				c1.4,0,2.9,0.1,4.1-0.6c1.4-0.8,2.2-2.2,2.8-3.7c1.9-4.8,2-10.5-0.5-14.9c-2.5-4.5-7.9-7.4-12.8-6.2"/>
			<g>
				<path d="M469.1,1043.3c-8.8,0.4-18.6,5-19.1,15c-0.4,9.2,8.5,13.3,16.3,14.3c3.7,0.5,8.4,1.3,11.1-1.8c2.7-3,3.5-8.1,3.3-12
					c-0.5-8.7-7.6-15.7-16.6-14.2c-1.9,0.3-1.1,3.2,0.8,2.9c8.1-1.3,13.2,6.3,12.8,13.7c-0.2,3.9-1.7,8.2-6.1,8.9
					c-2.2,0.3-5.5-0.3-7.7-0.8c-5.5-1.2-11.4-4.3-11-10.9c0.5-8.3,8.9-11.7,16.1-12C471.1,1046.3,471.1,1043.3,469.1,1043.3
					L469.1,1043.3z"/>
			</g>
		</g>
		<g id="button3" onclick="togglePlayThree()">
			<path class="st0" d="M407.8,1044.8c-4.8,0.1-9.7,1.4-13.2,4.6c-3.6,3.2-5.4,8.6-3.7,13.2c2.6,7,11.5,8.7,18.8,8.9
				c1.4,0,2.9,0.1,4.1-0.6c1.4-0.8,2.2-2.2,2.8-3.7c1.9-4.8,2-10.5-0.5-14.9c-2.5-4.5-7.9-7.4-12.8-6.2"/>
			<g>
				<path d="M407.8,1043.3c-8.8,0.4-18.6,5-19.1,15c-0.4,9.2,8.5,13.3,16.3,14.3c3.7,0.5,8.4,1.3,11.1-1.8c2.7-3,3.5-8.1,3.3-12
					c-0.5-8.7-7.6-15.7-16.6-14.2c-1.9,0.3-1.1,3.2,0.8,2.9c8.1-1.3,13.2,6.3,12.8,13.7c-0.2,3.9-1.7,8.2-6.1,8.9
					c-2.2,0.3-5.5-0.3-7.7-0.8c-5.5-1.2-11.4-4.3-11-10.9c0.5-8.3,8.9-11.7,16.1-12C409.7,1046.3,409.7,1043.3,407.8,1043.3
					L407.8,1043.3z"/>
			</g>
		</g>
		<g id="button2" onclick="togglePlayTwo()">
			<path class="st0" d="M347.6,1044.8c-4.8,0.1-9.7,1.4-13.2,4.6c-3.6,3.2-5.4,8.6-3.7,13.2c2.6,7,11.5,8.7,18.8,8.9
				c1.4,0,2.9,0.1,4.1-0.6c1.4-0.8,2.2-2.2,2.8-3.7c1.9-4.8,2-10.5-0.5-14.9c-2.5-4.5-7.9-7.4-12.8-6.2"/>
			<g>
				<path d="M347.6,1043.3c-8.8,0.4-18.6,5-19.1,15c-0.4,9.2,8.5,13.3,16.3,14.3c3.7,0.5,8.4,1.3,11.1-1.8c2.7-3,3.5-8.1,3.3-12
					c-0.5-8.7-7.6-15.7-16.6-14.2c-1.9,0.3-1.1,3.2,0.8,2.9c8.1-1.3,13.2,6.3,12.8,13.7c-0.2,3.9-1.7,8.2-6.1,8.9
					c-2.2,0.3-5.5-0.3-7.7-0.8c-5.5-1.2-11.4-4.3-11-10.9c0.5-8.3,8.9-11.7,16.1-12C349.5,1046.3,349.5,1043.3,347.6,1043.3
					L347.6,1043.3z"/>
			</g>
		</g>
		<g id="button1" onclick="togglePlayOne()">
			<path class="st0" d="M280.4,1044.8c-4.8,0.1-9.7,1.4-13.2,4.6c-3.6,3.2-5.4,8.6-3.7,13.2c2.6,7,11.5,8.7,18.8,8.9
				c1.4,0,2.9,0.1,4.1-0.6c1.4-0.8,2.2-2.2,2.8-3.7c1.9-4.8,2-10.5-0.5-14.9c-2.5-4.5-7.9-7.4-12.8-6.2"/>
			<g>
				<path d="M280.4,1043.3c-8.8,0.4-18.6,5-19.1,15c-0.4,9.2,8.5,13.3,16.3,14.3c3.7,0.5,8.4,1.3,11.1-1.8c2.7-3,3.5-8.1,3.3-12
					c-0.5-8.7-7.6-15.7-16.6-14.2c-1.9,0.3-1.1,3.2,0.8,2.9c8.1-1.3,13.2,6.3,12.8,13.7c-0.2,3.9-1.7,8.2-6.1,8.9
					c-2.2,0.3-5.5-0.3-7.7-0.8c-5.5-1.2-11.4-4.3-11-10.9c0.5-8.3,8.9-11.7,16.1-12C282.3,1046.3,282.3,1043.3,280.4,1043.3
					L280.4,1043.3z"/>
			</g>
		</g>
	</g>
	<g id="Dial">
		<g>
			<g id="dial-box_1_">
				<path class="st0" d="M235,917.5c6,30.9,4.4,65.5,13.3,95.5c32.8,1.2,74.7-1.7,107.6-0.5c8.4,0.3,16.8,0.6,25.2,0.8
					c22.1,0.4,44.3-0.4,66.4-1.2c14.8-0.5,29.6-1,44.4-1.5c0.5,0,1-0.1,1.4-0.4c0.4-0.4,0.4-1,0.4-1.6c1.9-32.2-0.2-64.7-6.1-96.4
					c-12.8-0.2-25.6,1.7-38.3,3.3c-64.6,7.9-129.8,6.6-194.7,5.2c-7.4-0.2-14.8-0.3-22.2-1.3"/>
				<g>
					<path d="M233.6,917.9c6,31.6,4.3,64.4,13.3,95.5c0.2,0.7,0.8,1.1,1.4,1.1c21.4,0.8,42.9,0,64.3-0.5c22.2-0.5,44.4,0.3,66.6,0.7
						c24.7,0.5,49.4-0.5,74.1-1.3c12.2-0.4,24.5-0.8,36.7-1.3c2.3-0.1,4.2,0.1,5.1-2.3c0.7-2,0.4-5,0.4-7c0.1-3.2,0.2-6.5,0.3-9.7
						c0.5-27.2-1.8-54.5-6.8-81.3c-0.1-0.6-0.8-1.1-1.4-1.1c-16.5-0.1-32.8,2.8-49.1,4.5c-16.6,1.8-33.3,3-50,3.8
						c-33.4,1.6-67,1.4-100.4,0.9c-18.4-0.3-37.3,0.4-55.6-2c-1.9-0.2-1.9,2.8,0,3c16.1,2.1,32.6,1.6,48.7,1.9
						c16.7,0.3,33.5,0.5,50.2,0.5c33.5-0.1,67-1.1,100.3-4.3c18.6-1.8,37.2-5.3,56-5.2c-0.5-0.4-1-0.7-1.4-1.1
						c4.3,23.4,6.6,47,6.7,70.8c0,5.5-0.1,11-0.2,16.5c0,1.4,0.6,7.6-0.4,8.7c-1.1,1.3-6.2,0.7-8.1,0.8c-11.6,0.4-23.2,0.8-34.8,1.2
						c-23.1,0.8-46.2,1.6-69.3,1.2c-21.1-0.4-42.1-1.2-63.2-0.8c-22.9,0.4-45.8,1.3-68.6,0.5c0.5,0.4,1,0.7,1.4,1.1
						c-9.1-31.1-7.4-63.9-13.3-95.5C236.1,915.2,233.2,916,233.6,917.9L233.6,917.9z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M494.3,961c-33.1,3.5-66.3,3.6-99.5,2.8c-32.6-0.8-65.3-2.8-97.9-1.3c-18,0.8-36,2.8-53.6,6.6
						c-1.9,0.4-1.1,3.3,0.8,2.9c40.8-8.7,82.7-7.3,124.1-6c42.1,1.3,84.2,2.4,126.1-2C496.2,963.8,496.2,960.8,494.3,961L494.3,961z
						"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M475.3,961.2c1.9,0,1.9-3,0-3C473.3,958.2,473.3,961.2,475.3,961.2L475.3,961.2z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M395.4,962.4c1.9,0,1.9-3,0-3C393.5,959.4,393.5,962.4,395.4,962.4L395.4,962.4z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M347.9,969.6c1.9,0,1.9-3,0-3C346,966.6,346,969.6,347.9,969.6L347.9,969.6z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M434.8,971.7c1.9,0,1.9-3,0-3C432.8,968.7,432.8,971.7,434.8,971.7L434.8,971.7z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M305.1,961.2c1.9,0,1.9-3,0-3C303.2,958.2,303.1,961.2,305.1,961.2L305.1,961.2z"/>
				</g>
			</g>
			<g>
				<g>
					<path d="M265.7,972.8c1.9,0,1.9-3,0-3C263.8,969.8,263.8,972.8,265.7,972.8L265.7,972.8z"/>
				</g>
			</g>
			<text transform="matrix(1 0 0 1 257.6119 962.6375)" class="st1 st2">55</text>
			<text transform="matrix(1 0 0 1 339.8165 960.322)" class="st1 st2">70</text>
			<text transform="matrix(1 0 0 1 296.9777 977.6892)" class="st1 st2">60</text>
			<text transform="matrix(1 0 0 1 464.86 978.8474)" class="st1 st2">130</text>
			<text transform="matrix(1 0 0 1 424.3365 962.6375)" class="st1 st2">110</text>
			<text transform="matrix(1 0 0 1 386.1285 978.8474)" class="st1 st2">90</text>
		</g>
		<g id="dial-bar">
			<g>
				<path d="M432.1,959.2c1.3,17.6,2.7,35.1,4,52.7c0.1,1.9,3.1,1.9,3,0c-1.3-17.6-2.7-35.1-4-52.7C435,957.3,432,957.2,432.1,959.2
					L432.1,959.2z"/>
			</g>
		</g>
	</g>
</g>

    <defs>

    
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
    
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
</filter>
    
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
</filter>
</defs> 


</svg>
            
          
!
            
              html {
  height: 100%;
}
body {
  height: 100%;
  background-color: black;
  overflow: hidden;
  margin: 0;
}

svg {
  height: 100vh;
  width: 100%;
  -webkit-animation: squiggly-anim 0.4s infinite;
          animation: squiggly-anim 0.4s infinite;
  fill: blue;
  background-color: black;
}


.audio1-color {
  -webkit-animation: audio1-color 375s, squiggly-anim 0.4s infinite;
          animation: audio1-color 375s, squiggly-anim 0.4s infinite;
}

@-webkit-keyframes audio1-color {
  20% {
    fill: #76e2ec;
  }
  40% {
    fill: #db5f1e;
  }
  60% {
    fill: #824b7d;
  }
  80% {
    fill: #ff7d1d;
  }
  100% {
    fill: blue;
  }
}

@keyframes audio1-color {
  20% {
    fill: #76e2ec;
  }
  40% {
    fill: #db5f1e;
  }
  60% {
    fill: #824b7d;
  }
  80% {
    fill: #ff7d1d;
  }
  100% {
    fill: blue;
  }
}

.audio2-color {
   -webkit-animation: audio2-color 180s, squiggly-anim 0.4s infinite;
           animation: audio2-color 180s, squiggly-anim 0.4s infinite;
}

@-webkit-keyframes audio2-color {
  20% {
    fill: pink;
  }
  40% {
    fill: purple;
  }
  60% {
    fill: LightPink;
  }
  80% {
    fill: hotpink;
  }
  100% {
    fill: blue;
  }
}

@keyframes audio2-color {
  20% {
    fill: pink;
  }
  40% {
    fill: purple;
  }
  60% {
    fill: LightPink;
  }
  80% {
    fill: hotpink;
  }
  100% {
    fill: blue;
  }
}


.audio3-color {
   -webkit-animation: audio3-color 202.8s, squiggly-anim 0.4s infinite;
           animation: audio3-color 202.8s, squiggly-anim 0.4s infinite;
}

@-webkit-keyframes audio3-color {
  10% {
    fill: magenta;
  }
  20% {
    fill: gold;
  }
  30%{
    fill: chartreuse;
  }
  40% {
    fill: hotpink;
  }
  50%{
    fill: Aqua;
  }
  55%{
    fill:white;
  }
  60% {
    fill: DarkMagenta;
  }
  70%{
    fill: yellowgreen;
  }
  80% {
    fill: lime;
  }
  90%{
    fill: Fuchsia;
  }
  100% {
    fill: blue;
  }
}

@keyframes audio3-color {
  10% {
    fill: magenta;
  }
  20% {
    fill: gold;
  }
  30%{
    fill: chartreuse;
  }
  40% {
    fill: hotpink;
  }
  50%{
    fill: Aqua;
  }
  55%{
    fill:white;
  }
  60% {
    fill: DarkMagenta;
  }
  70%{
    fill: yellowgreen;
  }
  80% {
    fill: lime;
  }
  90%{
    fill: Fuchsia;
  }
  100% {
    fill: blue;
  }
}

.audio4-color {
   -webkit-animation: audio4-color 182.4s, squiggly-anim 0.4s infinite;
           animation: audio4-color 182.4s, squiggly-anim 0.4s infinite;
}

@-webkit-keyframes audio4-color {
  20% {
    fill: white;
  }
 35% {
    fill: Crimson;
  }
  40%{
    fill: white;
  }
  50% {
    fill: DarkRed;
  }
  70% {
    fill: #0f1648;
  }
  100% {
    fill: blue;
  }
}

@keyframes audio4-color {
  20% {
    fill: white;
  }
 35% {
    fill: Crimson;
  }
  40%{
    fill: white;
  }
  50% {
    fill: DarkRed;
  }
  70% {
    fill: #0f1648;
  }
  100% {
    fill: blue;
  }
}


    @keyframes squiggly-anim {
          0% {
            -webkit-filter: url('#squiggly-0');
                    filter: url('#squiggly-0');
          }
          25% {
            -webkit-filter: url('#squiggly-1');
                    filter: url('#squiggly-1');
          }
          50% {
            -webkit-filter: url('#squiggly-2');
          }
          75% {
            -webkit-filter: url('#squiggly-3');
                    filter: url('#squiggly-3');
          }
          100% {
            -webkit-filter: url('#squiggly-4');
                    filter: url('#squiggly-4');
          }
        }





/* Top Right */


#_x31_7_1_ {
   -webkit-animation: tr-rain 0.4s ease-out infinite;
           animation: tr-rain 0.4s ease-out infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}


#_x31_6_1_ {
   -webkit-animation: tr-rain 0.4s ease-out infinite;
           animation: tr-rain 0.4s ease-out infinite;
}



#_x31_5_1_ {
   -webkit-animation: tr-rain 0.4s ease-out infinite;
           animation: tr-rain 0.4s ease-out infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}


#_x31_0_1_ {
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;

}

@-webkit-keyframes tr-rain {
  0% {   -webkit-transform:  translate(0px, -20%);   transform:  translate(0px, -20%);

  }
  100% {
   -webkit-transform:  translate(0px, 20%);
           transform:  translate(0px, 20%);
    fill: black;
  }
}

@keyframes tr-rain {
  0% {   -webkit-transform:  translate(0px, -20%);   transform:  translate(0px, -20%);

  }
  100% {
   -webkit-transform:  translate(0px, 20%);
           transform:  translate(0px, 20%);
    fill: black;
  }
}


/* Bottom Left */


#_x31_4_1_ {
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}


#_x31_3_1_ {
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}


#_x31_2_1_{
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

#_x31_1_1_{
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}



/* Top Right */

#_x39__1_ {
   -webkit-animation: tr-rain 0.4s linear infinite;
           animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}


#_x38__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}



#_x37__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}


#_x36__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
}


#_x35__1_ {
    -webkit-animation: tr-rain 0.4s linear infinite;
            animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}

/* Bottom Right  */


#_x34__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
}


#_x33__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

#_x32__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
}

#_x31__1_ {
     -webkit-animation: tr-rain 0.4s linear infinite;
             animation: tr-rain 0.4s linear infinite;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
}



#button1,
#button2,
#button3,
#button4 {
  cursor: pointer;
}


#button1:hover,
#button2:hover,
#button3:hover,
#button4:hover {
  -webkit-transform: rotatex(3deg);
      -ms-transform: rotatex(3deg);
          transform: rotatex(3deg);
  opacity: 0.5;
}



#dial-bar {
  -webkit-transition: -webkit-transform 1s linear;
  transition: -webkit-transform 1s linear;
  -o-transition: transform 1s linear;
  transition: transform 1s linear;
  transition: transform 1s linear, -webkit-transform 1s linear;
}
            
          
!
            
              
var isPlaying4 = false;
var isPlaying3 = false;
var isPlaying2 = false;
var isPlaying1 = false;
var svg = document.getElementById("svg");

function togglePlayOne() {
  audio3.pause();
  audio2.pause();
  audio4.pause();

  if (isPlaying1) {
    audio1.pause();
  } else {
    audio1.play();
  }
}
audio1.onplaying = function() {
  isPlaying1 = true;

  svg.classList.add("audio1-color");
  document.getElementById("dial-bar").style.transform = "translatex(-105px)";
};
audio1.onpause = function() {
  isPlaying1 = false;
  svg.classList.remove("audio2-color");
  svg.classList.remove("audio3-color");
  svg.classList.remove("audio4-color");
};

function togglePlayTwo() {
  audio3.pause();
  audio4.pause();
  audio1.pause();

  if (isPlaying2) {
    audio2.pause();
  } else {
    audio2.play();
  }
}
audio2.onplaying = function() {
  isPlaying2 = true;

  svg.classList.add("audio2-color");
  document.getElementById("dial-bar").style.transform = "translatex(-145px)";
};
audio2.onpause = function() {
  isPlaying2 = false;
  svg.classList.remove("audio1-color");
  svg.classList.remove("audio3-color");
  svg.classList.remove("audio4-color");
};

function togglePlayThree() {
  audio4.pause();
  audio2.pause();
  audio1.pause();

  if (isPlaying3) {
    audio3.pause();
  } else {
    audio3.play();
  }
}
audio3.onplaying = function() {
  isPlaying3 = true;

  document.getElementById("dial-bar").style.transform = "translatex(-55px)";
  svg.classList.add("audio3-color");
};
audio3.onpause = function() {
  isPlaying3 = false;
  svg.classList.remove("audio1-color");
  svg.classList.remove("audio2-color");
  svg.classList.remove("audio4-color");
};

function togglePlayFour() {
  audio3.pause();
  audio2.pause();
  audio1.pause();

  if (isPlaying4) {
    audio4.pause();
  } else {
    audio4.play();
  }
}
audio4.onplaying = function() {
  isPlaying4 = true;

  document.getElementById("dial-bar").style.transform = "translatex(25px)";
  svg.classList.add("audio4-color");
};
audio4.onpause = function() {
  isPlaying4 = false;
  svg.classList.remove("audio1-color");
  svg.classList.remove("audio2-color");
  svg.classList.remove("audio3-color");
};
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console