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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
<defs>
    <filter id="shadowBlur" x="-20%" y="-20%" width="250%" height="250%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feGaussianBlur stdDeviation="0 4" x="0%" y="0%" width="100%" height="100%" in="composite1" edgeMode="none" result="blur1"/>
    </filter>
    <clipPath id="SVGID_2_">
        <rect  x="242" y="287.852" width="193" height="33.996"/>
    </clipPath>
    <linearGradient id="freqGradient" gradientUnits="userSpaceOnUse" x1="338.4985" y1="321.8482" x2="338.4985" y2="287.8524">
        <stop  offset="0.0084" style="stop-color:#F4CE57;stop-opacity:0.54"/>
        <stop  offset="0.0776" style="stop-color:#F5D266;stop-opacity:0.4523"/>
        <stop  offset="0.4015" style="stop-color:#F9E5A7;stop-opacity:0.3259"/>
        <stop  offset="0.6741" style="stop-color:#FCF3D7;stop-opacity:0.1775"/>
        <stop  offset="0.8818" style="stop-color:#FEFCF4;stop-opacity:0.0644"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
    </linearGradient>
</defs>
<g id="antenna">
    <g id="antennaUpper">
        <circle id="antennaCircle" fill="#AFAFAF" cx="560.999" cy="117.055" r="6"/>
        <rect x="559.122" y="116.671" transform="matrix(1 0.0034 -0.0034 1 0.6503 -1.8868)" fill="#AFAFAF" width="3" height="151"/>
    </g>
    <rect id="antennaBase" x="558.169" y="119.951" transform="matrix(1 0.0034 -0.0034 1 0.66 -1.8864)" fill="#AFAFAF" width="4.678" height="150.213"/>
</g>
<ellipse id="shadow" filter="url(#shadowBlur)" opacity="0.2" fill="#CAA647" cx="414.522" cy="423.352" rx="242.77" ry="62"/>
<g id="radioBody">
<path id="radioBack" fill="#A6A6A2" d="M616.522,276.983c0-20.008-16.22-36.228-36.228-36.228H248.75
c-9.789,0-18.665,3.889-25.185,10.199l-0.27,0.257c-0.107,0.105-0.212,0.211-0.318,0.318l-18.832,18.832l4.468,152.991
l371.849,13.262l8.564-4.698c0,0,17.392-16.125,19.237-18.363l0.617-0.785c4.784-6.14,7.641-13.854,7.641-22.24V276.983z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="198" y1="347.3518" x2="602" y2="347.3518">
    <stop  offset="0" style="stop-color:#E7E6DF"/>
    <stop  offset="0.8711" style="stop-color:#EEEDE7"/>
    <stop  offset="1" style="stop-color:#EFEFE9"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M565.772,440.352H234.228c-20.008,0-36.228-16.22-36.228-36.228V290.579
    c0-20.008,16.22-36.228,36.228-36.228h331.545c20.008,0,36.228,16.22,36.228,36.228v113.545
    C602,424.132,585.78,440.352,565.772,440.352z"/>
</g>
<polygon id="volumeIndicator" fill="#3A3A3A" points="473.673,379.173 490.327,379.173 490.327,372.852"/>
<rect id="freqBG" x="242" y="287.352" fill="#FFF" stroke="#564F46" stroke-width="2" stroke-miterlimit="10" width="193" height="35"/>
<g clip-path="url(#SVGID_2_)" id="freqLightGroup">    
    <rect id="freqLight" x="242.499" y="287.852" fill="url(#freqGradient)" width="191.998" height="33.996"/>
    <rect id="freqLightClone" x="242.499" y="287.852" fill="#F4CE57" width="191.998" height="33.996"/>
</g>  
<g id="speakerGroup">  
    <g id="speaker">
        <path fill="#564F46" d="M251,418.352h176c6.627,0,12-5.373,12-12v-51c0-6.627-5.373-12-12-12H251c-6.627,0-12,5.373-12,12v51
            C239,412.979,244.373,418.352,251,418.352z"/>
        <path fill="#4D4843" d="M251.903,415.057h174.195c5.469,0,9.903-4.434,9.903-9.903v-48.605c0-5.469-4.434-9.903-9.903-9.903
            H251.903c-5.469,0-9.903,4.434-9.903,9.903v48.605C242,410.623,246.434,415.057,251.903,415.057z"/>
        <circle fill="#383832" cx="253.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="272.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="291.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="310.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="329.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="348.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="367.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="386.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="405.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="424.5" cy="356.852" r="5"/>
        <circle fill="#383832" cx="253.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="272.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="291.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="310.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="329.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="348.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="367.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="386.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="405.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="424.5" cy="372.852" r="5"/>
        <circle fill="#383832" cx="253.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="272.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="291.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="310.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="329.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="348.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="367.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="386.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="405.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="424.5" cy="388.852" r="5"/>
        <circle fill="#383832" cx="253.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="272.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="291.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="310.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="329.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="348.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="367.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="386.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="405.5" cy="404.852" r="5"/>
        <circle fill="#383832" cx="424.5" cy="404.852" r="5"/>
    </g>
</g>
<g id="radioFreqGroup">
    <line fill="none" stroke="#4D4843" stroke-miterlimit="10" x1="248.128" y1="299" x2="428.784" y2="299"/>
    <line fill="none" stroke="#4D4843" stroke-miterlimit="10" x1="248.128" y1="310" x2="428.784" y2="310"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="262" y1="310.5" x2="262" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="275" y1="310.5" x2="275" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="288" y1="310.5" x2="288" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="301" y1="310.5" x2="301" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="317" y1="310.5" x2="317" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="331" y1="310.5" x2="331" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="346" y1="310.5" x2="346" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="360" y1="310.5" x2="360" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="375" y1="310.5" x2="375" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="389" y1="310.5" x2="389" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="404" y1="310.5" x2="404" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="418" y1="310.5" x2="418" y2="313.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="272" y1="299.5" x2="272" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="295" y1="299.5" x2="295" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="319" y1="299.5" x2="319" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="340" y1="299.5" x2="340" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="365" y1="299.5" x2="365" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="388" y1="299.5" x2="388" y2="302.5"/>
    <line fill="none" stroke="#4D4843" stroke-linecap="round" stroke-miterlimit="10" x1="411" y1="299.5" x2="411" y2="302.5"/>
    <rect id="freqSlider" x="248" y="289.352" fill="#FCA758" width="6" height="31"/>
</g>
<g id="tuningBtn">
    <ellipse id="tuningBtnBG" opacity="0.4" fill="#3A3A3A" cx="531.005" cy="324.352" rx="40" ry="37"/>
    <g id="tuningBtnFront">
        <circle fill="#3A3A3A" cx="528" cy="324.352" r="37"/>
        <line fill="none" stroke="#EABE7F" stroke-width="2" stroke-miterlimit="10" x1="491" y1="324.352" x2="501" y2="324.352"/>
    </g>
</g>
<g id="volumeBtn">
    <ellipse id="volumeBtnBG" opacity="0.4" fill="#3A3A3A" cx="482.85" cy="401.352" rx="17.85" ry="17"/>
    <g id="volumeBtnFront">
        <circle fill="#3A3A3A" cx="481" cy="401.352" r="17"/>
        <line fill="none" stroke="#EABE7F" stroke-width="2" stroke-miterlimit="10" x1="464" y1="401.447" x2="474" y2="401.447"/>
    </g>
</g>
<g id="pBtn">
    <ellipse id="pBtnBG" opacity="0.4" fill="#3A3A3A" cx="532.432" cy="404.871" rx="8.5" ry="8"/>
    <circle id="pBtnFront" fill="#3A3A3A" cx="531" cy="404.852" r="8"/>
    <g id="pBtnOutline">
        <path fill="none" stroke="#EABE7F" stroke-miterlimit="10" d="M528.068,401.348c-1.233,0.681-2.068,1.995-2.068,3.504
            c0,2.209,1.791,4,4,4s4-1.791,4-4c0-1.506-0.832-2.818-2.062-3.5"/>
        <path fill="none" stroke="#EABE7F" stroke-miterlimit="10" d="M530,399.352v5"/>
    </g>
</g>
<g class="noiseGroup">
<polyline class="noise" fill="none" stroke="#191818" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    319.728,382.156 323.371,382.156 326.811,378.46 332.476,385.852 338.547,375.852 343.808,383.678 346.641,381.069 349.272,381.069"/>
<polyline class="noise" fill="none" stroke="#191818" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
319.728,382.156 323.371,382.156 326.811,378.46 332.476,385.852 338.547,375.852 343.808,383.678 346.641,381.069 349.272,381.069"/>
<polyline class="noise2" display="none" fill="none" stroke="#191818" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
	319.728,382.155 323.371,382.155 326.874,385.917 332.476,376.851 338.736,384.85 343.808,376.699 346.641,381.068 349.272,381.068"/>
</g>    
<g class="noteGroup">
    <path class="note" fill="#191818" d="M342.933,384.773l-0.003-0.076c-0.001-0.03-0.002-0.06-0.003-0.09l-0.53-15.208
    c-0.039-1.133-1.198-1.879-2.246-1.444l-12.682,5.011c-0.631,0.262-1.03,0.89-1,1.572l0.443,11.974
    c-1.018-0.437-2.286-0.531-3.561-0.18c-2.543,0.702-4.152,2.911-3.594,4.935c0.558,2.024,3.073,3.096,5.616,2.394
    c2.238-0.617,3.751-2.403,3.701-4.202h0.002l-0.519-12.142c-0.025-0.612,0.335-1.173,0.902-1.405l10.003-4.083
    c0.534-0.218,1.121,0.163,1.139,0.739l0.37,9.158c-0.995-0.504-2.254-0.648-3.517-0.299c-2.403,0.663-3.899,2.841-3.341,4.865
    c0.558,2.024,2.959,3.127,5.363,2.464c2.056-0.567,3.443-2.243,3.453-3.983L342.933,384.773z"/>
    <path class="note" fill="#191818" d="M342.933,384.773l-0.003-0.076c-0.001-0.03-0.002-0.06-0.003-0.09l-0.53-15.208
    c-0.039-1.133-1.198-1.879-2.246-1.444l-12.682,5.011c-0.631,0.262-1.03,0.89-1,1.572l0.443,11.974
    c-1.018-0.437-2.286-0.531-3.561-0.18c-2.543,0.702-4.152,2.911-3.594,4.935c0.558,2.024,3.073,3.096,5.616,2.394
    c2.238-0.617,3.751-2.403,3.701-4.202h0.002l-0.519-12.142c-0.025-0.612,0.335-1.173,0.902-1.405l10.003-4.083
    c0.534-0.218,1.121,0.163,1.139,0.739l0.37,9.158c-0.995-0.504-2.254-0.648-3.517-0.299c-2.403,0.663-3.899,2.841-3.341,4.865
    c0.558,2.024,2.959,3.127,5.363,2.464c2.056-0.567,3.443-2.243,3.453-3.983L342.933,384.773z"/>
    <path class="note" fill="#191818" d="M342.933,384.773l-0.003-0.076c-0.001-0.03-0.002-0.06-0.003-0.09l-0.53-15.208
    c-0.039-1.133-1.198-1.879-2.246-1.444l-12.682,5.011c-0.631,0.262-1.03,0.89-1,1.572l0.443,11.974
    c-1.018-0.437-2.286-0.531-3.561-0.18c-2.543,0.702-4.152,2.911-3.594,4.935c0.558,2.024,3.073,3.096,5.616,2.394
    c2.238-0.617,3.751-2.403,3.701-4.202h0.002l-0.519-12.142c-0.025-0.612,0.335-1.173,0.902-1.405l10.003-4.083
    c0.534-0.218,1.121,0.163,1.139,0.739l0.37,9.158c-0.995-0.504-2.254-0.648-3.517-0.299c-2.403,0.663-3.899,2.841-3.341,4.865
    c0.558,2.024,2.959,3.127,5.363,2.464c2.056-0.567,3.443-2.243,3.453-3.983L342.933,384.773z"/>
    <path class="note" fill="#191818" d="M342.933,384.773l-0.003-0.076c-0.001-0.03-0.002-0.06-0.003-0.09l-0.53-15.208
    c-0.039-1.133-1.198-1.879-2.246-1.444l-12.682,5.011c-0.631,0.262-1.03,0.89-1,1.572l0.443,11.974
    c-1.018-0.437-2.286-0.531-3.561-0.18c-2.543,0.702-4.152,2.911-3.594,4.935c0.558,2.024,3.073,3.096,5.616,2.394
    c2.238-0.617,3.751-2.403,3.701-4.202h0.002l-0.519-12.142c-0.025-0.612,0.335-1.173,0.902-1.405l10.003-4.083
    c0.534-0.218,1.121,0.163,1.139,0.739l0.37,9.158c-0.995-0.504-2.254-0.648-3.517-0.299c-2.403,0.663-3.899,2.841-3.341,4.865
    c0.558,2.024,2.959,3.127,5.363,2.464c2.056-0.567,3.443-2.243,3.453-3.983L342.933,384.773z"/>
</g>
<g id="textGroup">
	<g id="t1">
			<path fill="#608E8B" d="M281.841,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.32,5.398c1.239,0,1.319-1.199,1.319-1.918
				c0-2.641-1.319-4.24-3.6-6.16l-2.039-1.719c-2.56-2.16-4.72-4.721-4.72-8.84c0-5.678,3.68-8.758,9.519-8.758
				c7.438,0,7.999,6.199,8.039,9.438l-6.879,0.682c0-2.801-0.04-4.4-1.44-4.4c-1.079,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.88,1.639c2.88,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.679,8.279
				C285.08,544.08,282.041,541.24,281.841,533.563z"/>
			<path fill="#608E8B" d="M303.521,511.166h15.157v5.318h-7.238v7.238h5.398v5.52h-5.398v9.039h7.278v5.279h-15.197V511.166z"/>
			<path fill="#608E8B" d="M321.48,533.242v-11.719c0-6.758,2.479-10.838,9.998-10.838s9.679,3.959,9.679,9.359v2.879h-7.799v-3.52
				c0-1.4-0.04-3.24-1.88-3.24s-1.959,1.84-1.959,3.24v15.918c0,1.439,0.159,3.238,1.959,3.238c1.84,0,1.88-1.84,1.88-3.238v-3.68
				h7.799v2.879c0,5.398-2.16,9.559-9.679,9.559S321.48,539.961,321.48,533.242z"/>
			<path fill="#608E8B" d="M344.96,511.166h9.639c6.52,0,11.118,1.559,11.118,8.559c0,4.039-0.68,6.639-3.959,8.318l4.399,15.518
				h-8.279l-3.359-14.318h-1.64v14.318h-7.919V511.166z M354.959,524.883c2.76,0,3.439-1.84,3.439-4.318c0-2.48-0.76-4.16-3.08-4.16
				h-2.439v8.479H354.959z"/>
			<path fill="#608E8B" d="M369.92,511.166h15.158v5.318h-7.239v7.238h5.399v5.52h-5.399v9.039h7.279v5.279H369.92V511.166z"/>
			<path fill="#608E8B" d="M391.04,517.045h-4.72v-5.879h17.357v5.879h-4.68v26.516h-7.958V517.045z"/>
			<path fill="#608E8B" d="M421.398,511.166h9.238l5.8,32.395h-7.239l-1-6.479h-4.199l-1,6.479h-7.479L421.398,511.166z
				 M427.518,532.521l-1.439-12.078l-1.439,12.078H427.518z"/>
			<path fill="#608E8B" d="M438.719,532.803v-10.879c0-6.799,2.48-11.238,10.039-11.238c7.479,0,9.758,4.08,9.758,9.479v2.32h-7.799
				v-3.08c0-1.439-0.04-3.24-1.879-3.24c-1.84,0-2,1.84-2,3.24v15.877c0,1.439,0.399,3.279,2.239,3.279c1.8,0,2.32-1.84,2.32-3.279
				v-4.238h-2.6v-4.52h9.718v17.037h-5.279l-0.399-2.359c-0.84,1.639-2.319,2.879-5.079,2.879
				C440.879,544.08,438.719,539.4,438.719,532.803z"/>
			<path fill="#608E8B" d="M462.918,511.166h15.158v5.318h-7.239v7.238h5.399v5.52h-5.399v9.039h7.279v5.279h-15.198V511.166z"/>
			<path fill="#608E8B" d="M481.278,511.166h5.599l5.919,13.877v-13.877h6.56v32.395h-5.439l-5.839-15.238v15.238h-6.799V511.166z"
				/>
			<path fill="#608E8B" d="M506.838,517.045h-4.719v-5.879h17.356v5.879h-4.679v26.516h-7.959V517.045z"/>
	</g>
	<g id="t2">
			<path fill="#608E8B" d="M247.601,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M260.24,511.166h5.6l5.919,13.877v-13.877h6.559v32.395h-5.438l-5.839-15.238v15.238h-6.8V511.166z"/>
			<path fill="#608E8B" d="M283.04,511.166h8.52c8.838,0,11.277,2.959,11.277,10.357v11.678c0,7.398-2.439,10.359-11.277,10.359
				h-8.52V511.166z M291.679,538.08c2.72,0,3-0.918,3-3.158v-15.197c0-2.199-0.28-3.08-3-3.08h-0.72v21.436H291.679z"/>
			<path fill="#608E8B" d="M307.16,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M319.8,511.166h15.157v5.318h-7.238v7.238h5.398v5.52h-5.398v9.039h7.278v5.279H319.8V511.166z"/>
			<path fill="#608E8B" d="M348.719,511.166h11.719c5.799,0,8.679,3.398,8.679,9.518c0,8.158-4.56,9.52-9.799,9.52h-2.68v13.357
				h-7.919V511.166z M359.157,524.684c2.28,0,2.52-1.52,2.52-4.16c0-1.799-0.199-3.799-2.6-3.799h-2.439v7.959H359.157z"/>
			<path fill="#608E8B" d="M372.198,533.361v-11.957c0-6.799,2.48-10.719,9.999-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S372.198,540.121,372.198,533.361z M384.116,535.361v-15.998c0-1.398-0.119-3.199-1.919-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C383.997,538.561,384.116,536.721,384.116,535.361z"/>
			<path fill="#608E8B" d="M396.559,511.166h11.718c5.799,0,8.679,3.398,8.679,9.518c0,8.158-4.56,9.52-9.798,9.52h-2.68v13.357
				h-7.919V511.166z M406.997,524.684c2.279,0,2.52-1.52,2.52-4.16c0-1.799-0.2-3.799-2.6-3.799h-2.439v7.959H406.997z"/>
			<path fill="#608E8B" d="M430.997,511.166h9.639c6.52,0,11.118,1.559,11.118,8.559c0,4.039-0.68,6.639-3.959,8.318l4.399,15.518
				h-8.279l-3.359-14.318h-1.64v14.318h-7.919V511.166z M440.996,524.883c2.76,0,3.439-1.84,3.439-4.318c0-2.48-0.76-4.16-3.08-4.16
				h-2.439v8.479H440.996z"/>
			<path fill="#608E8B" d="M455.157,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S455.157,540.121,455.157,533.361z M467.075,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C466.955,538.561,467.075,536.721,467.075,535.361z"/>
			<path fill="#608E8B" d="M479.117,533.242v-11.719c0-6.758,2.479-10.838,9.998-10.838s9.679,3.959,9.679,9.359v2.879h-7.799v-3.52
				c0-1.4-0.04-3.24-1.88-3.24s-1.959,1.84-1.959,3.24v15.918c0,1.439,0.159,3.238,1.959,3.238c1.84,0,1.88-1.84,1.88-3.238v-3.68
				h7.799v2.879c0,5.398-2.16,9.559-9.679,9.559S479.117,539.961,479.117,533.242z"/>
			<path fill="#608E8B" d="M502.597,511.166h7.919v12.637l4.879-12.637h7.799l-5.879,14.717l5.959,17.678h-8.118l-4.239-14.039
				l-0.4,0.521v13.518h-7.919V511.166z"/>
			<path fill="#608E8B" d="M524.598,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.32,5.398c1.239,0,1.319-1.199,1.319-1.918
				c0-2.641-1.319-4.24-3.6-6.16l-2.039-1.719c-2.56-2.16-4.72-4.721-4.72-8.84c0-5.678,3.68-8.758,9.519-8.758
				c7.438,0,7.999,6.199,8.039,9.438l-6.879,0.682c0-2.801-0.04-4.4-1.44-4.4c-1.079,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.88,1.639c2.88,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.679,8.279
				C527.837,544.08,524.798,541.24,524.598,533.563z"/>
			<path fill="#608E8B" d="M545.718,537.002h6.679v6.559h-6.679V537.002z M545.877,511.285h7.119l-2.64,23.637h-2.479
				L545.877,511.285z"/>
	</g>
	<g id="t3">
			<path fill="#608E8B" d="M272.5,511.166h8.519c8.839,0,11.278,2.959,11.278,10.357v11.678c0,7.398-2.439,10.359-11.278,10.359
				H272.5V511.166z M281.139,538.08c2.72,0,3-0.92,3-3.158v-15.197c0-2.199-0.28-3.08-3-3.08h-0.72v21.436H281.139z"/>
			<path fill="#608E8B" d="M296.62,511.166h15.158v5.318h-7.239v7.238h5.399v5.52h-5.399v9.039h7.279v5.279H296.62V511.166z"/>
			<path fill="#608E8B" d="M314.98,511.166h14.438v5.318h-6.519v7.398h5.879v5.52h-5.879v14.158h-7.919V511.166z"/>
			<path fill="#608E8B" d="M343.02,533.242v-11.719c0-6.758,2.479-10.838,9.998-10.838s9.679,3.959,9.679,9.359v2.879h-7.799v-3.52
				c0-1.4-0.04-3.24-1.88-3.24s-1.959,1.84-1.959,3.24v15.918c0,1.439,0.159,3.238,1.959,3.238c1.84,0,1.88-1.84,1.88-3.238v-3.68
				h7.799v2.879c0,5.398-2.16,9.559-9.679,9.559S343.02,539.961,343.02,533.242z"/>
			<path fill="#608E8B" d="M366.1,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S366.1,540.121,366.1,533.361z M378.018,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C377.897,538.561,378.018,536.721,378.018,535.361z"/>
			<path fill="#608E8B" d="M390.459,511.166h5.6l5.919,13.877v-13.877h6.559v32.395h-5.438l-5.839-15.238v15.238h-6.8V511.166z"/>
			<path fill="#608E8B" d="M423.818,511.166h9.639c6.52,0,11.118,1.559,11.118,8.559c0,4.039-0.68,6.639-3.959,8.318l4.399,15.518
				h-8.279l-3.359-14.318h-1.64v14.318h-7.919V511.166z M433.817,524.883c2.76,0,3.439-1.84,3.439-4.318c0-2.48-0.76-4.16-3.08-4.16
				h-2.439v8.479H433.817z"/>
			<path fill="#608E8B" d="M453.178,511.166h9.238l5.8,32.395h-7.239l-1-6.479h-4.199l-1,6.479h-7.479L453.178,511.166z
				 M459.297,532.521l-1.439-12.078l-1.439,12.078H459.297z"/>
			<path fill="#608E8B" d="M471.498,511.166h8.519c8.839,0,11.278,2.959,11.278,10.357v11.678c0,7.398-2.439,10.359-11.278,10.359
				h-8.519V511.166z M480.137,538.08c2.72,0,3-0.92,3-3.158v-15.197c0-2.199-0.28-3.08-3-3.08h-0.72v21.436H480.137z"/>
			<path fill="#608E8B" d="M495.618,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M507.858,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S507.858,540.121,507.858,533.361z M519.776,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C519.656,538.561,519.776,536.721,519.776,535.361z"/>
	</g>
	<g id="t4">	
			<path fill="#608E8B" d="M325.74,511.339h14.438v5.319h-6.52v7.398h5.879v5.52h-5.879v14.157h-7.919V511.339z"/>
			<path fill="#608E8B" d="M343.62,511.339h7.919v27.115h7.199v5.279H343.62V511.339z"/>
			<path fill="#608E8B" d="M360.861,533.935v-22.596h7.878v23.956c0,1.399,0.12,3.319,1.96,3.319s1.96-1.92,1.96-3.319v-23.956
				h7.919v22.596c0,6.8-2.32,10.318-9.879,10.318S360.861,540.734,360.861,533.935z"/>
			<path fill="#608E8B" d="M385.101,511.339h7.919v32.395h-7.919V511.339z"/>
			<path fill="#608E8B" d="M397.74,511.339h8.519c8.839,0,11.278,2.96,11.278,10.358v11.678c0,7.398-2.439,10.358-11.278,10.358
				h-8.519V511.339z M406.379,538.254c2.72,0,3-0.92,3-3.159v-15.197c0-2.199-0.28-3.079-3-3.079h-0.72v21.436H406.379z"/>
			<path fill="#608E8B" d="M432.419,511.339h14.438v5.319h-6.52v7.398h5.879v5.52h-5.879v14.157h-7.919V511.339z"/>
			<path fill="#608E8B" d="M450.699,511.339h8.639l2.919,16.677l3.28-16.677h8.278l0.56,32.395h-5.519l-0.641-20.996l-3.279,20.996
				h-5.079l-3.56-21.196l-0.52,21.196h-5.599L450.699,511.339z"/>
	</g>
	<g id="t5">
			<path fill="#608E8B" d="M254.861,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.32,5.398c1.239,0,1.319-1.199,1.319-1.918
				c0-2.641-1.319-4.24-3.6-6.16l-2.039-1.719c-2.56-2.16-4.72-4.721-4.72-8.84c0-5.678,3.68-8.758,9.519-8.758
				c7.438,0,7.999,6.199,8.039,9.438l-6.879,0.682c0-2.801-0.04-4.4-1.44-4.4c-1.079,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.88,1.639c2.88,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.679,8.279
				C258.101,544.08,255.062,541.24,254.861,533.563z"/>
			<path fill="#608E8B" d="M276.541,511.166h15.157v5.318h-7.238v7.238h5.398v5.52h-5.398v9.039h7.278v5.279h-15.197V511.166z"/>
			<path fill="#608E8B" d="M293.421,511.166h6.639l3.04,21.436l2.76-21.436h7.158l-5.559,32.395h-8.599L293.421,511.166z"/>
			<path fill="#608E8B" d="M316.181,511.166h15.157v5.318H324.1v7.238h5.398v5.52H324.1v9.039h7.278v5.279h-15.197V511.166z"/>
			<path fill="#608E8B" d="M334.54,511.166h5.6l5.919,13.877v-13.877h6.559v32.395h-5.438l-5.839-15.238v15.238h-6.8V511.166z"/>
			<path fill="#608E8B" d="M367.899,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M380.539,511.166h5.6l5.919,13.877v-13.877h6.559v32.395h-5.438l-5.839-15.238v15.238h-6.8V511.166z"/>
			<path fill="#608E8B" d="M402.939,533.242v-11.719c0-6.758,2.479-10.838,9.998-10.838s9.679,3.959,9.679,9.359v2.879h-7.799v-3.52
				c0-1.4-0.04-3.24-1.88-3.24s-1.959,1.84-1.959,3.24v15.918c0,1.439,0.159,3.238,1.959,3.238c1.84,0,1.88-1.84,1.88-3.238v-3.68
				h7.799v2.879c0,5.398-2.16,9.559-9.679,9.559S402.939,539.961,402.939,533.242z"/>
			<path fill="#608E8B" d="M426.579,511.166h7.919v12.838h4.039v-12.838h7.958v32.395h-7.958v-13.879h-4.039v13.879h-7.919V511.166z
				"/>
			<path fill="#608E8B" d="M461.299,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.319,5.398c1.24,0,1.32-1.199,1.32-1.918
				c0-2.641-1.32-4.24-3.6-6.16l-2.04-1.719c-2.56-2.16-4.719-4.721-4.719-8.84c0-5.678,3.679-8.758,9.519-8.758
				c7.438,0,7.998,6.199,8.038,9.438l-6.879,0.682c0-2.801-0.04-4.4-1.439-4.4c-1.08,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.879,1.639c2.88,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.678,8.279
				C464.538,544.08,461.499,541.24,461.299,533.563z"/>
			<path fill="#608E8B" d="M482.578,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S482.578,540.121,482.578,533.361z M494.496,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C494.376,538.561,494.496,536.721,494.496,535.361z"/>
			<path fill="#608E8B" d="M506.738,533.762v-22.596h7.878v23.955c0,1.4,0.12,3.32,1.96,3.32s1.96-1.92,1.96-3.32v-23.955h7.919
				v22.596c0,6.799-2.32,10.318-9.879,10.318S506.738,540.561,506.738,533.762z"/>
			<path fill="#608E8B" d="M530.978,511.166h7.919v27.115h7.199v5.279h-15.118V511.166z"/>
	</g>
	<g id="t6">
			<path fill="#608E8B" d="M289.521,511.166h8.759c5.439,0,10.758,0.92,10.758,8.598c0,3.879-1.88,5.84-4.759,6.398
				c3.719,0.361,5.799,3.121,5.799,7.68c0,7.039-3.839,9.719-10.198,9.719h-10.358V511.166z M298.479,523.963
				c3.08,0,3.64-1.559,3.64-3.959c0-2-1.28-3.6-3.359-3.6h-1.32v7.559H298.479z M298.519,538.041c2.92,0,3.919-1.52,3.919-4.359
				c0-3.479-0.96-4.639-3.879-4.639h-1.12v8.998H298.519z"/>
			<path fill="#608E8B" d="M318.12,511.166h9.239l5.799,32.395h-7.239l-1-6.479h-4.199l-1,6.479h-7.479L318.12,511.166z
				 M324.239,532.521l-1.44-12.078l-1.439,12.078H324.239z"/>
			<path fill="#608E8B" d="M335.44,532.803v-10.879c0-6.799,2.48-11.238,10.039-11.238c7.479,0,9.759,4.08,9.759,9.479v2.32h-7.799
				v-3.08c0-1.439-0.04-3.24-1.879-3.24c-1.84,0-2,1.84-2,3.24v15.877c0,1.439,0.4,3.279,2.24,3.279c1.8,0,2.32-1.84,2.32-3.279
				v-4.238h-2.6v-4.52h9.719v17.037h-5.28l-0.4-2.359c-0.84,1.639-2.319,2.879-5.079,2.879
				C337.6,544.08,335.44,539.4,335.44,532.803z"/>
			<path fill="#608E8B" d="M359.64,511.166h15.157v5.318h-7.238v7.238h5.399v5.52h-5.399v9.039h7.278v5.279H359.64V511.166z"/>
			<path fill="#608E8B" d="M378,511.166h7.919v27.115h7.199v5.279H378V511.166z"/>
			<path fill="#608E8B" d="M406.799,511.166h9.639c6.519,0,11.118,1.559,11.118,8.559c0,4.039-0.68,6.639-3.959,8.318l4.398,15.518
				h-8.278l-3.359-14.318h-1.64v14.318h-7.919V511.166z M416.798,524.883c2.759,0,3.438-1.84,3.438-4.318
				c0-2.48-0.76-4.16-3.079-4.16h-2.439v8.479H416.798z"/>
			<path fill="#608E8B" d="M436.158,511.166h9.238l5.799,32.395h-7.238l-1-6.479h-4.199l-1,6.479h-7.479L436.158,511.166z
				 M442.277,532.521l-1.439-12.078l-1.44,12.078H442.277z"/>
			<path fill="#608E8B" d="M454.479,511.166h8.519c8.839,0,11.278,2.959,11.278,10.357v11.678c0,7.398-2.439,10.359-11.278,10.359
				h-8.519V511.166z M463.117,538.08c2.72,0,3-0.918,3-3.158v-15.197c0-2.199-0.28-3.08-3-3.08h-0.72v21.436H463.117z"/>
			<path fill="#608E8B" d="M478.599,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M490.839,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S490.839,540.121,490.839,533.361z M502.757,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C502.637,538.561,502.757,536.721,502.757,535.361z"/>
	</g>
	<g id="t7">
			<path fill="#608E8B" d="M221.802,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.32,5.398c1.24,0,1.32-1.199,1.32-1.918
				c0-2.641-1.32-4.24-3.6-6.16l-2.04-1.719c-2.56-2.16-4.719-4.721-4.719-8.84c0-5.678,3.679-8.758,9.519-8.758
				c7.438,0,7.999,6.199,8.039,9.438l-6.879,0.682c0-2.801-0.04-4.4-1.44-4.4c-1.08,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.879,1.639c2.88,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.678,8.279
				C225.041,544.08,222.001,541.24,221.802,533.563z"/>
			<path fill="#608E8B" d="M243.481,511.166h11.718c5.799,0,8.679,3.398,8.679,9.518c0,8.158-4.56,9.52-9.798,9.52h-2.68v13.357
				h-7.919V511.166z M253.919,524.684c2.28,0,2.52-1.52,2.52-4.16c0-1.799-0.2-3.799-2.6-3.799H251.4v7.959H253.919z"/>
			<path fill="#608E8B" d="M269.8,511.166h9.239l5.799,32.395h-7.239l-1-6.479h-4.199l-1,6.479h-7.479L269.8,511.166z
				 M275.919,532.521l-1.44-12.078l-1.439,12.078H275.919z"/>
			<path fill="#608E8B" d="M287.12,533.242v-11.719c0-6.758,2.48-10.838,9.999-10.838s9.679,3.959,9.679,9.359v2.879h-7.799v-3.52
				c0-1.4-0.04-3.24-1.88-3.24s-1.959,1.84-1.959,3.24v15.918c0,1.439,0.16,3.238,1.959,3.238c1.84,0,1.88-1.84,1.88-3.238v-3.68
				h7.799v2.879c0,5.398-2.16,9.559-9.679,9.559S287.12,539.961,287.12,533.242z"/>
			<path fill="#608E8B" d="M310.6,511.166h15.157v5.318h-7.238v7.238h5.399v5.52h-5.399v9.039h7.278v5.279H310.6V511.166z"/>
			<path fill="#608E8B" d="M338.88,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.319,5.398c1.24,0,1.32-1.199,1.32-1.918
				c0-2.641-1.32-4.24-3.6-6.16l-2.04-1.719c-2.56-2.16-4.719-4.721-4.719-8.84c0-5.678,3.68-8.758,9.519-8.758
				c7.438,0,7.998,6.199,8.038,9.438l-6.879,0.682c0-2.801-0.039-4.4-1.439-4.4c-1.08,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.88,1.639c2.879,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.679,8.279
				C342.12,544.08,339.081,541.24,338.88,533.563z"/>
			<path fill="#608E8B" d="M363.319,517.045H358.6v-5.879h17.356v5.879h-4.679v26.516h-7.959V517.045z"/>
			<path fill="#608E8B" d="M381.279,511.166h9.238l5.799,32.395h-7.238l-1-6.479h-4.199l-1,6.479H375.4L381.279,511.166z
				 M387.398,532.521l-1.439-12.078l-1.44,12.078H387.398z"/>
			<path fill="#608E8B" d="M400.519,517.045H395.8v-5.879h17.357v5.879h-4.679v26.516h-7.959V517.045z"/>
			<path fill="#608E8B" d="M415.92,511.166h7.919v32.395h-7.919V511.166z"/>
			<path fill="#608E8B" d="M428.16,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S428.16,540.121,428.16,533.361z M440.078,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C439.958,538.561,440.078,536.721,440.078,535.361z"/>
			<path fill="#608E8B" d="M452.52,511.166h5.6l5.919,13.877v-13.877h6.559v32.395h-5.439l-5.839-15.238v15.238h-6.799V511.166z"/>
			<path fill="#608E8B" d="M485.239,533.563l6.719-0.881c0.04,4.4,1.04,5.398,2.319,5.398c1.24,0,1.32-1.199,1.32-1.918
				c0-2.641-1.32-4.24-3.6-6.16l-2.04-1.719c-2.56-2.16-4.719-4.721-4.719-8.84c0-5.678,3.68-8.758,9.519-8.758
				c7.438,0,7.998,6.199,8.038,9.438l-6.879,0.682c0-2.801-0.039-4.4-1.439-4.4c-1.08,0-1.479,1.48-1.479,2.24
				c0,2.52,1.439,3.84,3.439,5.6l1.88,1.639c2.879,2.48,5.119,5.318,5.119,9.918c0,4.52-3.319,8.279-8.679,8.279
				C488.479,544.08,485.439,541.24,485.239,533.563z"/>
			<path fill="#608E8B" d="M506.519,533.361v-11.957c0-6.799,2.479-10.719,9.998-10.719s10.038,3.92,10.038,10.719v11.957
				c0,6.76-2.52,10.719-10.038,10.719S506.519,540.121,506.519,533.361z M518.437,535.361v-15.998c0-1.398-0.12-3.199-1.92-3.199
				c-1.72,0-1.88,1.801-1.88,3.199v15.998c0,1.359,0.04,3.199,1.88,3.199C518.316,538.561,518.437,536.721,518.437,535.361z"/>
			<path fill="#608E8B" d="M531.278,511.166h8.639l2.919,16.676l3.279-16.676h8.279l0.56,32.395h-5.52l-0.64-20.996l-3.279,20.996
				h-5.079l-3.56-21.197l-0.52,21.197h-5.6L531.278,511.166z"/>
			<path fill="#608E8B" d="M563.957,511.166h9.238l5.799,32.395h-7.238l-1-6.479h-4.199l-1,6.479h-7.479L563.957,511.166z
				 M570.076,532.521l-1.439-12.078l-1.44,12.078H570.076z"/>
	</g>
</g>
<!-- MOTION PATHS -->
<path id="path1" fill="none" stroke="none" stroke-miterlimit="10" d="M338.5,380.852c0,0,6.589-42.875,28-43.684
	c29.114-1.1,27.052-30.724,19-41.199c-9-11.709-24.029-55.51,6.349-60.281"/>
<path id="path2" fill="none" stroke="none" stroke-miterlimit="10" d="M338.849,380.852c0,0-6.589-42.875-28-43.684
	c-29.114-1.1-27.052-30.724-19-41.199c9-11.709,24.029-55.51-6.349-60.281"/>
</svg>
<audio id="radioAudio">
    <source id="audioSource" src="http://ice4.somafm.com/secretagent-128-mp3" type="audio/mpeg">
</audio>
<audio id="antennaNoise" loop>
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/antennaNoise2.wav" type="audio/wav">   </audio>
<audio id="tuningNoise" loop>
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/tuningstatic.mp3" type="audio/mpeg">    
</audio>
<audio id="powerButton">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/590856/button.mp3" type="audio/mpeg">
</audio>

<a href="https://greensock.com/"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150"/></a>
            
          
!
            
              html,body {
    height:100%;
}
body {
    display:flex;
    align-items:center;
    justify-content: center;
    background:#F4CE57;
    overflow:hidden;
    margin:0;
}
svg {
    height:100vh;
    width:100%;
    max-width:800px;
    visibility:hidden;
}
#pBtn {
    cursor:pointer;
}
#tuningBtnFront,#volumeBtnFront,#antenna {
    cursor:grab;
}
#textGroup {
    user-select:none;
}
.gsap-3-logo { 
  width: 20vw; 
  max-width: 150px; 
  position: fixed; 
  bottom: 15px; 
  right: 15px; 
}
            
          
!
            
              MorphSVGPlugin.convertToPath('polyline')

const volumeBtnDragger = document.querySelector('#volumeBtnFront'), 
tuningBtnDragger = document.querySelector('#tuningBtnFront'),
pBtn = document.querySelector('#pBtn') 
buttonSound = document.querySelector('#powerButton'),
antenna = document.querySelector('#antenna');
freqSlider = document.querySelector('#freqSlider');
gsap.set(volumeBtnDragger,{transformOrigin:"center center",rotation:135});
gsap.set(tuningBtnDragger,{transformOrigin:"center center"});
gsap.set(antenna,{transformOrigin:"right bottom",rotation:-65})
gsap.set('#antennaUpper',{y:-110})
gsap.set('#speakerGroup',{transformOrigin:"50% 50%"})
gsap.set('svg',{visibility:"visible"})

let radioPower = false;
let antennaNoiseOn = true;
let antennaExtended = true;
let tuningRadio = false;
let speakerGroupScale = 1

// AUDIO 
const radioAudio = document.querySelector('#radioAudio'),
antennaNoise = document.querySelector('#antennaNoise'),
tuningNoise = document.querySelector('#tuningNoise'),
audioSource = document.querySelector('#audioSource');

// radio audio volume
radioAudio.volume = 0.5
antennaNoise.volume = 0.5
tuningNoise.volume = 0.5
// radio button volume
buttonSound.volume = 1

const changeChannel = (source) => {
    audioSource.src=source
    radioAudio.load();  
    // if power , start playing the source 
    radioPower ? radioAudio.play() : null
    // pause the noise
    tuningNoise.pause();
}

const playTuningNoise = () => {
    if (radioPower && gsap.getProperty(volumeBtnDragger,'rotation') != 0) {
        tuningNoise.play();
    }
}
const playNoteTls = () => {
    playNote1.play()
    playNote2.play()
}

// Power button animation
const pBtnTl = gsap.timeline({
    paused:true,
    defaults:{duration:0.12,ease:"back"}
});
gsap.set('#freqLight',{opacity:0})
pBtnTl.to('#pBtnFront',{x:2},'press')
    .to('#pBtnOutline',{x:2},'press')
    .to('#pBtnOutline path',{stroke:"#FFF"},'press')
    .to('#pBtnBG',{scaleX:0.90,transformOrigin:"right center"},'press')
    .to('#pBtnFront',{x:1},'press2')
    .to('#pBtnOutline',{x:1},'press2')
    .to('#freqLight',{opacity:1},'press')

// Draggable Volume
Draggable.create(volumeBtnDragger,{
    type:'rotational',
    bounds: {minRotation: 0, maxRotation: 270},
    dragResistance:0.15,
    onDrag: () => {
        changeVolume(volumeBtnDragger)
        if (gsap.getProperty(volumeBtnDragger,'rotation') === 0) {
            // STOP THE MUSIC NOTES AND NOISE ICONS FROM ANIMATING
            checkAntennaNoiseTl();
            checkNoteTls();
            checkSpeakerTl();
        }
        else {
            // if timelines are not active start playing them again
            if (radioPower) {
            checkAntennaNoiseTl();
            checkNoteTls();
            checkSpeakerTl();
            // antenna can't be extended
            if (!antennaExtended) {
                antennaNoiseTl.restart()
            }
            speakerTl.restart()
            playNoteTls();
            }
        }  
    }
})

// Draggable tuning
Draggable.create(tuningBtnDragger,{
    type:'rotational',
    cursor: "grab",
    bounds: {minRotation: 0, maxRotation: 360},
    dragResistance:0.40,
    onDrag : () => {
        tuningRadio = true;
        checkNoteTls();
        updateFreq(tuningBtnDragger);
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 15 && gsap.getProperty(tuningBtnDragger,'rotation') <= 60 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 75 && gsap.getProperty(tuningBtnDragger,'rotation') <= 120 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 135 && gsap.getProperty(tuningBtnDragger,'rotation') <= 180 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 195 && gsap.getProperty(tuningBtnDragger,'rotation') <= 240 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 255 && gsap.getProperty(tuningBtnDragger,'rotation') <= 300 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 315 && gsap.getProperty(tuningBtnDragger,'rotation') <= 360 ) {
            playTuningNoise();
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 0 && gsap.getProperty(tuningBtnDragger,'rotation') <= 5) {
            changeChannel("http://ice4.somafm.com/secretagent-128-mp3");   
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 60 && gsap.getProperty(tuningBtnDragger,'rotation') <= 65) {
            changeChannel("http://ice4.somafm.com/indiepop-128-mp3");    
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 120 && gsap.getProperty(tuningBtnDragger,'rotation') <= 125) {
            changeChannel("http://ice2.somafm.com/defcon-128-mp3");
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 180 && gsap.getProperty(tuningBtnDragger,'rotation') <= 185) {
            changeChannel("http://ice2.somafm.com/fluid-128-mp3");  
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 240 && gsap.getProperty(tuningBtnDragger,'rotation') <= 245) {
            changeChannel("http://ice4.somafm.com/7soul-128-mp3");    
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 300 && gsap.getProperty(tuningBtnDragger,'rotation') <= 305) {
            changeChannel("http://ice4.somafm.com/bagel-128-mp3");     
        }
        if (gsap.getProperty(tuningBtnDragger,'rotation') >= 355 && gsap.getProperty(tuningBtnDragger,'rotation') <= 360) {
            changeChannel("http://ice4.somafm.com/spacestation-128-mp3");  
        }
    },
    onDragEnd : () => {
        tuningRadio = false;
        checkNoteTls();
        if (radioPower) {
            playNoteTls();
        }    
    }
})

// Draggable antenna base
Draggable.create(antenna,{
    type:'rotational',
    bounds: {minRotation: -65, maxRotation: 0},
})

// Draggable upper antenna
Draggable.create('#antennaUpper',{
    type:"y",
    bounds:{minY:0,maxY:-110},
    onDrag : () => {
        if (gsap.getProperty(volumeBtnDragger,'rotation') != 0) {
            noiseLevelUpdate('#antennaUpper')  
        }
        if (gsap.getProperty(volumeBtnDragger,'rotation') != 0 && !radioPower) {
            noiseLevelUpdate('#antennaUpper')
            // don't play the noise when radio is not powered on
            antennaNoise.pause();
        } 
    },
    onDragEnd: () => {
        if (gsap.getProperty('#antennaUpper','y') <= -110) {
            antennaExtended = true;
            antennaNoiseOn = false;
            checkAntennaNoiseTl();
        }
        if (gsap.getProperty('#antennaUpper','y') >= -109 ) {       
            antennaExtended = false;
            radioPower ? antennaNoise.play() : antennaNoise.pause();
            antennaNoiseOn = true;
            checkAntennaNoiseTl();   
            if (gsap.getProperty(volumeBtnDragger,'rotation') != 0) {
               radioPower ? antennaNoiseTl.restart() : null;    
            }
        }
    }
})

// SPEAKER ANIMATION
const speakerTl = gsap.timeline({repeat:-1,paused:true})

speakerTl.to('#speaker',{scale:1.01,repeatRefresh:true,rotation:0.25,duration:0.24,transformOrigin:"center center"})
.to('#speaker',{rotation:0,scale:1,duration:0.24})

// Frequency slider
const freqTl = gsap.timeline({
    paused:true
})

freqTl.to(freqSlider,{x:176,duration:1.24,ease:"linear"})

const updateFreq = (dragInstance) => {
    let percentDragged = gsap.getProperty(dragInstance,"rotation") / 360 * freqTl._first._tDur;
    let textDragged = gsap.getProperty(dragInstance,'rotation') / 360 * textTl._dur;
    gsap.to(freqTl,{
        time:percentDragged,
        duration:0.08,
        ease:"circ.inOut"
    }) 
    gsap.set(textTl,{
        time:textDragged
    })
}

const changeVolume = (volumeControl) => {
    let level = gsap.getProperty(volumeControl,"rotation") / 280
    radioAudio.volume = level
    if (antennaNoiseOn) {
        antennaNoise.volume = level
    }
    tuningNoise.volume = level
    // SPEAKER GROUP SCALING
    speakerGroupScale = 1 + level / 12 
    radioPower ? gsap.to('#speakerGroup',{scale:speakerGroupScale,duration:0.08}) : null
}

const noiseLevelUpdate = (dragInstance) => {
    let level = gsap.getProperty(dragInstance,'y') / 110;
    antennaNoise.volume = (1 + level)
}

// freq light opacity animation
gsap.set("#freqLightClone",{opacity:0})

const freqAnimateTl = gsap.timeline({paused:true,repeat:-1,defaults:{duration:1.32,ease:"sine.inOut"}});
freqAnimateTl.to("#freqLightClone",{keyframes:[{opacity:0.25},{opacity:0}]})

// MUSIC NOTES
const notes = document.querySelectorAll('.note')
gsap.set(notes,{opacity:0,xPercent:-50,yPercent:-50,transformOrigin:"50% 50%"})
 
const animateNotes = (target,path,delay) => {
    const noteTl = gsap.timeline({repeat:-1,paused:true});
    noteTl
    .to(target,{opacity:1,scale:1,duration:0.32,delay:delay},'in')
    .to(target,{motionPath:{
        path:path,
        align:path
    },duration:1.24,ease:"sine",delay:delay},'in')
    .to(target,{opacity:0,duration:0.64,delay:delay},'in+=0.32')
    return noteTl;
}
const playNote1 = animateNotes(notes[0],'#path1',0)
const playNote2 = animateNotes(notes[1],'#path2',0.1)

// ANIMATE NOISE
const noiseIcons = document.querySelectorAll('.noise');
gsap.set(noiseIcons,{opacity:0})

// morph the path of the noise icon
const morphNoiseTl = gsap.timeline({repeat:-1,defaults:{ease:"circ",duration:0.04}})
morphNoiseTl.to(noiseIcons[0],{keyframes:[{morphSVG:".noise2"},{morphSVG:noiseIcons[0]}]},'morph') 
morphNoiseTl.to(noiseIcons[1],{keyframes:[{morphSVG:".noise2"},{morphSVG:noiseIcons[1]}]},'morph') 

const antennaNoiseTl = gsap.timeline({
    repeat:-1,paused:true,defaults:{duration:1.24}})
antennaNoiseTl.to(noiseIcons[0],
    {keyframes :[{opacity:1,duration:0.32},
        {motionPath:{path:'#path1',align:'#path1'},delay:-0.32},
        {opacity:0,duration:0.56,delay:-0.48}
    ]})
.to(noiseIcons[1],{keyframes :[{opacity:1,duration:0.32},
    {motionPath:{path:'#path2',align:'#path2'},delay:-0.32},
    {opacity:0,duration:0.56,delay:-0.48}
]},0.5)

const checkAntennaNoiseTl = () => {
    if (!antennaNoiseOn || gsap.getProperty(volumeBtnDragger,'rotation') == 0 || !radioPower) {
        antennaNoiseTl.eventCallback('onRepeat',() => {
            antennaNoiseTl.pause();  
        })     
    }
    else {
        antennaNoiseTl.eventCallback('onRepeat',null)
    }
}

// event callback freq indicator light tl
const checkFreqLight = () => {
    if (radioPower) {
        freqAnimateTl.eventCallback('onRepeat',null)
    }
    else {
        freqAnimateTl.eventCallback('onRepeat',() => {
            freqAnimateTl.pause();
        })    
    }
}

const checkNoteTls = () => {
    if (gsap.getProperty(volumeBtnDragger,'rotation') == 0 || !radioPower || tuningRadio ) {
        playNote1.eventCallback('onRepeat',() => {
            playNote1.pause();
        })    
        playNote2.eventCallback('onRepeat',() => {
            playNote2.pause();
        })    
    }
    else {
        playNote1.eventCallback('onRepeat',null)  
        playNote2.eventCallback('onRepeat',null)  
    }
}

const checkSpeakerTl = () => {
    // disable speaker tl when antenna is extended and radio is powered off
    if (gsap.getProperty(volumeBtnDragger,'rotation') != 0 && !radioPower && antennaExtended) {
        speakerTl.pause();
        // reset the speaker group
        gsap.to('#speakerGroup',{scale:1,duration:0.32})
    }
    if (gsap.getProperty(volumeBtnDragger,'rotation') == 0 || !radioPower) {
        speakerTl.eventCallback('onRepeat',() => {
            speakerTl.pause();
            // reset the speaker group
            gsap.to('#speakerGroup',{scale:1,duration:0.32})
        })  
    }
    else {
        speakerTl.eventCallback('onRepeat',null)    
    }
}

// Power button event listener
pBtn.addEventListener('click',() => {
    buttonSound.play();
    radioPower ? radioPower = false : radioPower = true
    // Turn the radio on/off
    radioPower ? pBtnTl.play() : pBtnTl.reverse() 
    // ANIMATE THE LIGHT OF THE FREQ BG
    radioPower ? freqAnimateTl.play() : null 
    // IF THE VOLUME IS NOT 0 PLAY THE NOISE/MUSIC ICON
    // & SPEAKER ANIMATIONS
    if (gsap.getProperty(volumeBtnDragger,'rotation') != 0) {
        // ANIMATE THE MUSIC NOTES
        radioPower ? playNoteTls() : null
        // ANIMATE THE SPEAKER
        radioPower ? speakerTl.play() : null
        // ANIMATE THE NOISE SYMBOLS/ICONS
        !antennaExtended ? radioPower ? antennaNoiseTl.play() : null : null  
    }
    // CHECK FOR PLAYING TIMELINES AND FINISH THEIR RESPECTIVE ANIMATIONS
    const checkAllRepeatingTls = () => {
        checkFreqLight();
        checkAntennaNoiseTl(); 
        checkNoteTls();
        checkSpeakerTl();
    }
    checkAllRepeatingTls(); 
    // SOUND 
    radioPower ? radioAudio.play() : radioAudio.pause()
    !radioPower ? tuningNoise.pause() : null;
    !antennaExtended ? radioPower ? antennaNoise.play() : antennaNoise.pause() : null
    // show channel name on power if tuning knob is turned all the way to the left 
    gsap.getProperty(tuningBtnDragger,'rotation') == 0 ? radioPower ? gsap.set('#t1',{opacity:1}) : null : null
    // hide the channel name group if the radio is not powered on 
    radioPower ? gsap.set('#textGroup',{opacity:1}) : gsap.set('#textGroup',{opacity:0})
})

const textTl = gsap.timeline({defaults:{duration:0.2},paused:true});
gsap.set('#textGroup',{opacity:0})
gsap.set('#textGroup g',{opacity:0})

textTl.set('#t1',{opacity:1})
.set('#t1',{opacity:0},0.1)
.set('#t2',{opacity:1},0.6)
.set('#t2',{opacity:0},0.7)
.set('#t3',{opacity:1},1.2)
.set('#t3',{opacity:0},1.3)
.set('#t4',{opacity:1},1.8)
.set('#t4',{opacity:0},1.9)
.set('#t5',{opacity:1},2.4)
.set('#t5',{opacity:0},2.5)
.set('#t6',{opacity:1},3)
.set('#t6',{opacity:0},3.1)
.set('#t7',{opacity:1},3.6)
            
          
!
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.

Console