Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg class='hifi' viewBox="0 0 880 521" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="lcdFrame">
      <rect width="110" height="30" transform="translate(392 429)"/>
    </clipPath>
    <g id='speaker' filter='url(#blur)' class='hifi__speaker'>
      <rect class='hifi__body' x="622" y="241" width="150" height="280" rx="5" />
      <path class='hifi__shimmer' d="M622 246C622 243.239 624.239 241 627 241H662V521H627C624.239 521 622 518.761 622 516V246Z"/>
      <g class='tweeter'>
        <circle class='tweeter__outer' cx="697" cy="440" r="52.5" stroke-width="5"/>
        <circle class='tweeter__inner' cx="697" cy="440" r="30" />
      </g>
      <g class='tweeter'>
        <circle class='tweeter__outer' cx="697" cy="331" r="37.5" stroke-width="5"/>
        <circle class='tweeter__inner' cx="697" cy="331" r="21.8182"/>
      </g>
    </g>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter>
  </defs>
  <use class='speaker speaker--left' href="#speaker"/>
  <use class='speaker speaker--right' href="#speaker" transform='translate(-500, 0)'/>
  <g class='stack'>
    <rect x="353" y="516" width="30" height="5" class='button'/>
    <rect x="353" y="516" width="10" height="5" class='shimmer'/>
    <rect x="510" y="516" width="30" height="5" class='button'/>
    <rect x="510" y="516" width="10" height="5" class='shimmer'/>
    <rect class='hifi__body' x="322" y="416" width="250" height="100" rx="5" />
    <path class='hifi__shimmer' d="M322 421C322 418.239 324.239 416 327 416H362V516H327C324.239 516 322 513.761 322 511V421Z"/>
    <g class='slider'>
      <path d="M344 436V496" class='stroked' stroke-width="2" stroke-linecap="round"/>
      <rect class='slider__handle button' x="337" y="444" width="14" height="5" rx="2" />
    </g>
    <g class='lcd' clip-path="url(#lcdFrame)">
      <path class='lcd__panel stroked' d="M394 430H500C500.552 430 501 430.448 501 431V457C501 457.552 500.552 458 500 458H394C393.448 458 393 457.552 393 457V431C393 430.448 393.448 430 394 430Z"  stroke-width="2"/>
      <path class='lcd__line stroked' d="M411 438H447" stroke-width="6"/>
      <path class='lcd__text' d="M407.664 446.24C407.925 446.24 408.163 446.28 408.376 446.36C408.589 446.44 408.771 446.555 408.92 446.704C409.075 446.853 409.192 447.032 409.272 447.24C409.357 447.443 409.4 447.669 409.4 447.92C409.4 448.171 409.357 448.4 409.272 448.608C409.187 448.811 409.067 448.987 408.912 449.136C408.763 449.285 408.581 449.4 408.368 449.48C408.155 449.56 407.92 449.6 407.664 449.6H406.44V452H405.72V446.24H407.664ZM406.44 448.96H407.664C407.963 448.96 408.203 448.867 408.384 448.68C408.565 448.488 408.656 448.235 408.656 447.92C408.656 447.605 408.565 447.355 408.384 447.168C408.203 446.976 407.963 446.88 407.664 446.88H406.44V448.96ZM410.277 450.72C410.277 450.512 410.312 450.325 410.381 450.16C410.456 449.989 410.56 449.845 410.693 449.728C410.832 449.611 410.997 449.52 411.189 449.456C411.381 449.392 411.597 449.36 411.837 449.36H413.157V449C413.157 448.728 413.066 448.517 412.885 448.368C412.709 448.213 412.453 448.136 412.117 448.136C411.872 448.136 411.661 448.181 411.485 448.272C411.309 448.363 411.192 448.488 411.133 448.648H410.413C410.488 448.301 410.68 448.027 410.989 447.824C411.298 447.621 411.68 447.52 412.133 447.52C412.677 447.52 413.104 447.648 413.413 447.904C413.722 448.155 413.877 448.507 413.877 448.96V452H413.221V451.16H413.157C413.088 451.443 412.922 451.667 412.661 451.832C412.405 451.997 412.093 452.08 411.725 452.08C411.282 452.08 410.93 451.957 410.669 451.712C410.408 451.467 410.277 451.136 410.277 450.72ZM410.997 450.704C410.997 450.949 411.074 451.141 411.229 451.28C411.384 451.419 411.602 451.488 411.885 451.488C412.066 451.488 412.234 451.464 412.389 451.416C412.544 451.368 412.677 451.301 412.789 451.216C412.906 451.125 412.997 451.021 413.061 450.904C413.125 450.787 413.157 450.659 413.157 450.52V449.92H411.853C411.586 449.92 411.376 449.989 411.221 450.128C411.072 450.267 410.997 450.459 410.997 450.704ZM416.17 447.6V448.36H416.25C416.319 448.099 416.463 447.893 416.682 447.744C416.9 447.595 417.164 447.52 417.474 447.52C417.938 447.52 418.3 447.667 418.562 447.96C418.828 448.248 418.962 448.645 418.962 449.152V449.4H418.242V449.24C418.242 448.893 418.154 448.627 417.978 448.44C417.807 448.248 417.562 448.152 417.242 448.152C416.927 448.152 416.676 448.251 416.49 448.448C416.303 448.64 416.21 448.904 416.21 449.24V452H415.49V447.6H416.17ZM419.871 447.6H421.151V446.24H421.871V447.6H423.591V448.256H421.871V450.864C421.871 451.013 421.916 451.131 422.007 451.216C422.103 451.301 422.231 451.344 422.391 451.344H423.511V452H422.391C422.012 452 421.711 451.896 421.487 451.688C421.263 451.48 421.151 451.205 421.151 450.864V448.256H419.871V447.6ZM424.564 447.6H425.363L426.388 450.168C426.436 450.291 426.473 450.405 426.5 450.512C426.532 450.619 426.556 450.712 426.572 450.792C426.593 450.893 426.606 450.984 426.612 451.064H426.668C426.673 450.984 426.684 450.896 426.7 450.8C426.716 450.715 426.737 450.619 426.764 450.512C426.796 450.405 426.833 450.291 426.876 450.168L427.836 447.6H428.612L426.42 453.36H425.652L426.268 451.68L424.564 447.6ZM436.229 452.08C435.957 452.08 435.712 452.04 435.493 451.96C435.28 451.88 435.096 451.765 434.941 451.616C434.792 451.467 434.675 451.285 434.589 451.072C434.509 450.859 434.469 450.621 434.469 450.36V447.88C434.469 447.619 434.509 447.381 434.589 447.168C434.675 446.955 434.792 446.773 434.941 446.624C435.096 446.475 435.28 446.36 435.493 446.28C435.712 446.2 435.957 446.16 436.229 446.16C436.731 446.16 437.133 446.299 437.437 446.576C437.747 446.848 437.931 447.229 437.989 447.72H437.269C437.237 447.432 437.128 447.208 436.941 447.048C436.76 446.883 436.523 446.8 436.229 446.8C435.909 446.8 435.656 446.896 435.469 447.088C435.283 447.28 435.189 447.544 435.189 447.88V450.36C435.189 450.696 435.28 450.96 435.461 451.152C435.648 451.344 435.904 451.44 436.229 451.44C436.523 451.44 436.76 451.36 436.941 451.2C437.128 451.035 437.237 450.808 437.269 450.52H437.989C437.931 451.011 437.747 451.395 437.437 451.672C437.133 451.944 436.731 452.08 436.229 452.08ZM440.978 452.08C440.706 452.08 440.461 452.04 440.242 451.96C440.029 451.88 439.845 451.765 439.69 451.616C439.541 451.467 439.423 451.285 439.338 451.072C439.258 450.859 439.218 450.621 439.218 450.36V449.24C439.218 448.973 439.258 448.736 439.338 448.528C439.423 448.315 439.541 448.133 439.69 447.984C439.845 447.835 440.029 447.72 440.242 447.64C440.461 447.56 440.706 447.52 440.978 447.52C441.522 447.52 441.951 447.672 442.266 447.976C442.581 448.28 442.738 448.699 442.738 449.232V450.36C442.738 450.893 442.581 451.315 442.266 451.624C441.957 451.928 441.527 452.08 440.978 452.08ZM439.938 450.36C439.938 450.696 440.029 450.96 440.21 451.152C440.397 451.344 440.653 451.44 440.978 451.44C441.298 451.44 441.551 451.344 441.738 451.152C441.925 450.96 442.018 450.696 442.018 450.36V449.24C442.018 448.904 441.925 448.64 441.738 448.448C441.551 448.256 441.298 448.16 440.978 448.16C440.658 448.16 440.405 448.256 440.218 448.448C440.031 448.64 439.938 448.904 439.938 449.24V450.36ZM444.951 447.6V448.36H445.031C445.1 448.099 445.244 447.893 445.463 447.744C445.682 447.595 445.946 447.52 446.255 447.52C446.719 447.52 447.082 447.667 447.343 447.96C447.61 448.248 447.743 448.645 447.743 449.152V449.4H447.023V449.24C447.023 448.893 446.935 448.627 446.759 448.44C446.588 448.248 446.343 448.152 446.023 448.152C445.708 448.152 445.458 448.251 445.271 448.448C445.084 448.64 444.991 448.904 444.991 449.24V452H444.271V447.6H444.951ZM448.756 449.2C448.756 448.944 448.791 448.712 448.86 448.504C448.929 448.296 449.028 448.12 449.156 447.976C449.289 447.832 449.449 447.72 449.636 447.64C449.823 447.56 450.031 447.52 450.26 447.52C450.58 447.52 450.852 447.597 451.076 447.752C451.3 447.901 451.452 448.117 451.532 448.4H451.588V447.6H452.268V451.72C452.268 452.237 452.116 452.64 451.812 452.928C451.508 453.216 451.081 453.36 450.532 453.36H449.452V452.704H450.532C450.852 452.704 451.1 452.619 451.276 452.448C451.457 452.277 451.548 452.035 451.548 451.72V451.52L451.58 450.76H451.532C451.452 451.043 451.3 451.261 451.076 451.416C450.852 451.565 450.58 451.64 450.26 451.64C450.031 451.64 449.823 451.6 449.636 451.52C449.455 451.44 449.297 451.328 449.164 451.184C449.036 451.04 448.935 450.864 448.86 450.656C448.791 450.448 448.756 450.216 448.756 449.96V449.2ZM449.492 449.96C449.492 450.291 449.583 450.549 449.764 450.736C449.951 450.923 450.204 451.016 450.524 451.016C450.844 451.016 451.095 450.923 451.276 450.736C451.457 450.549 451.548 450.291 451.548 449.96V449.2C451.548 448.869 451.457 448.611 451.276 448.424C451.095 448.237 450.844 448.144 450.524 448.144C450.204 448.144 449.951 448.237 449.764 448.424C449.583 448.611 449.492 448.869 449.492 449.2V449.96ZM453.729 452V451.344H455.329V448.256H453.929V447.6H456.049V451.344H457.369V452H453.729ZM455.489 445.88H455.649C455.803 445.88 455.929 445.925 456.025 446.016C456.121 446.107 456.169 446.224 456.169 446.368C456.169 446.512 456.121 446.627 456.025 446.712C455.929 446.797 455.803 446.84 455.649 446.84H455.489C455.334 446.84 455.209 446.8 455.113 446.72C455.017 446.635 454.969 446.517 454.969 446.368C454.969 446.224 455.017 446.107 455.113 446.016C455.209 445.925 455.334 445.88 455.489 445.88ZM463.363 449.04H466.562V449.68H463.363V449.04ZM472.876 446.24H474.716C474.978 446.24 475.215 446.28 475.428 446.36C475.642 446.44 475.823 446.555 475.972 446.704C476.127 446.853 476.244 447.032 476.324 447.24C476.41 447.443 476.452 447.669 476.452 447.92C476.452 448.32 476.348 448.661 476.14 448.944C475.938 449.221 475.66 449.413 475.308 449.52L476.532 452H475.684L474.564 449.6H473.596V452H472.876V446.24ZM473.596 448.96H474.716C475.02 448.96 475.26 448.867 475.436 448.68C475.618 448.488 475.708 448.235 475.708 447.92C475.708 447.605 475.618 447.355 475.436 447.168C475.255 446.976 475.015 446.88 474.716 446.88H473.596V448.96ZM477.593 449.232C477.593 448.704 477.75 448.288 478.065 447.984C478.38 447.675 478.809 447.52 479.353 447.52C479.897 447.52 480.326 447.675 480.641 447.984C480.956 448.288 481.113 448.704 481.113 449.232V450.008H478.305V450.36C478.305 450.701 478.398 450.971 478.585 451.168C478.777 451.365 479.033 451.464 479.353 451.464C479.598 451.464 479.809 451.424 479.985 451.344C480.166 451.259 480.294 451.144 480.369 451H481.089C480.998 451.336 480.796 451.6 480.481 451.792C480.172 451.984 479.796 452.08 479.353 452.08C479.081 452.08 478.836 452.04 478.617 451.96C478.404 451.88 478.22 451.765 478.065 451.616C477.916 451.467 477.798 451.285 477.713 451.072C477.633 450.859 477.593 450.621 477.593 450.36V449.232ZM479.353 448.128C479.033 448.128 478.777 448.229 478.585 448.432C478.398 448.629 478.305 448.896 478.305 449.232V449.416H480.401V449.232C480.401 448.896 480.305 448.629 480.113 448.432C479.926 448.229 479.673 448.128 479.353 448.128ZM482.23 447.6H483.51V446.24H484.23V447.6H485.95V448.256H484.23V450.864C484.23 451.013 484.275 451.131 484.366 451.216C484.462 451.301 484.59 451.344 484.75 451.344H485.87V452H484.75C484.371 452 484.07 451.896 483.846 451.688C483.622 451.48 483.51 451.205 483.51 450.864V448.256H482.23V447.6ZM487.987 447.6V450.448C487.987 451.115 488.304 451.448 488.939 451.448C489.584 451.448 489.907 451.115 489.907 450.448V447.6H490.627V450.448C490.627 450.971 490.48 451.373 490.187 451.656C489.899 451.939 489.483 452.08 488.939 452.08C488.406 452.08 487.992 451.939 487.699 451.656C487.411 451.368 487.267 450.965 487.267 450.448V447.6H487.987ZM492.92 447.6V448.36H493C493.069 448.099 493.213 447.893 493.432 447.744C493.65 447.595 493.914 447.52 494.224 447.52C494.688 447.52 495.05 447.667 495.312 447.96C495.578 448.248 495.712 448.645 495.712 449.152V449.4H494.992V449.24C494.992 448.893 494.904 448.627 494.728 448.44C494.557 448.248 494.312 448.152 493.992 448.152C493.677 448.152 493.426 448.251 493.24 448.448C493.053 448.64 492.96 448.904 492.96 449.24V452H492.24V447.6H492.92ZM496.845 447.6H497.525V448.36H497.589C497.658 448.088 497.797 447.88 498.005 447.736C498.213 447.592 498.477 447.52 498.797 447.52C499.026 447.52 499.229 447.56 499.405 447.64C499.586 447.715 499.738 447.821 499.861 447.96C499.989 448.099 500.085 448.264 500.149 448.456C500.213 448.643 500.245 448.848 500.245 449.072V452H499.525V449.192C499.525 448.856 499.439 448.595 499.269 448.408C499.098 448.221 498.861 448.128 498.557 448.128C498.253 448.128 498.01 448.229 497.829 448.432C497.653 448.629 497.565 448.899 497.565 449.24V452H496.845V447.6ZM508.134 452.08C507.862 452.08 507.617 452.04 507.398 451.96C507.185 451.88 507.001 451.765 506.846 451.616C506.697 451.467 506.58 451.285 506.494 451.072C506.414 450.859 506.374 450.621 506.374 450.36V449.24C506.374 448.973 506.414 448.736 506.494 448.528C506.58 448.315 506.697 448.133 506.846 447.984C507.001 447.835 507.185 447.72 507.398 447.64C507.617 447.56 507.862 447.52 508.134 447.52C508.678 447.52 509.108 447.672 509.422 447.976C509.737 448.28 509.894 448.699 509.894 449.232V450.36C509.894 450.893 509.737 451.315 509.422 451.624C509.113 451.928 508.684 452.08 508.134 452.08ZM507.094 450.36C507.094 450.696 507.185 450.96 507.366 451.152C507.553 451.344 507.809 451.44 508.134 451.44C508.454 451.44 508.708 451.344 508.894 451.152C509.081 450.96 509.174 450.696 509.174 450.36V449.24C509.174 448.904 509.081 448.64 508.894 448.448C508.708 448.256 508.454 448.16 508.134 448.16C507.814 448.16 507.561 448.256 507.374 448.448C507.188 448.64 507.094 448.904 507.094 449.24V450.36ZM511.011 448.696V448.04H512.291V447.36C512.291 447.008 512.401 446.733 512.619 446.536C512.838 446.339 513.139 446.24 513.523 446.24H514.811V446.896H513.523C513.182 446.896 513.011 447.051 513.011 447.36V448.04H514.811V448.696H513.011V452H512.291V448.696H511.011ZM520.605 447.6H521.885V446.24H522.605V447.6H524.325V448.256H522.605V450.864C522.605 451.013 522.65 451.131 522.741 451.216C522.837 451.301 522.965 451.344 523.125 451.344H524.245V452H523.125C522.746 452 522.445 451.896 522.221 451.688C521.997 451.48 521.885 451.205 521.885 450.864V448.256H520.605V447.6ZM525.626 452V446.24H526.346V447.6C526.346 447.675 526.343 447.757 526.338 447.848C526.338 447.933 526.335 448.013 526.33 448.088C526.319 448.179 526.311 448.269 526.306 448.36H526.37C526.439 448.093 526.578 447.888 526.786 447.744C526.999 447.595 527.263 447.52 527.578 447.52C527.797 447.52 527.994 447.557 528.17 447.632C528.351 447.707 528.503 447.813 528.626 447.952C528.754 448.085 528.853 448.248 528.922 448.44C528.991 448.627 529.026 448.837 529.026 449.072V452H528.306V449.192C528.306 448.856 528.221 448.595 528.05 448.408C527.879 448.221 527.642 448.128 527.338 448.128C527.034 448.128 526.791 448.229 526.61 448.432C526.434 448.629 526.346 448.899 526.346 449.24V452H525.626ZM530.359 449.232C530.359 448.704 530.516 448.288 530.831 447.984C531.145 447.675 531.575 447.52 532.119 447.52C532.663 447.52 533.092 447.675 533.407 447.984C533.721 448.288 533.879 448.704 533.879 449.232V450.008H531.071V450.36C531.071 450.701 531.164 450.971 531.351 451.168C531.543 451.365 531.799 451.464 532.119 451.464C532.364 451.464 532.575 451.424 532.751 451.344C532.932 451.259 533.06 451.144 533.135 451H533.855C533.764 451.336 533.561 451.6 533.247 451.792C532.937 451.984 532.561 452.08 532.119 452.08C531.847 452.08 531.601 452.04 531.383 451.96C531.169 451.88 530.985 451.765 530.831 451.616C530.681 451.467 530.564 451.285 530.479 451.072C530.399 450.859 530.359 450.621 530.359 450.36V449.232ZM532.119 448.128C531.799 448.128 531.543 448.229 531.351 448.432C531.164 448.629 531.071 448.896 531.071 449.232V449.416H533.167V449.232C533.167 448.896 533.071 448.629 532.879 448.432C532.692 448.229 532.439 448.128 532.119 448.128ZM539.953 449.24C539.953 448.973 539.987 448.733 540.057 448.52C540.131 448.307 540.233 448.128 540.361 447.984C540.489 447.835 540.643 447.72 540.825 447.64C541.006 447.56 541.209 447.52 541.433 447.52C541.758 447.52 542.027 447.595 542.241 447.744C542.454 447.888 542.595 448.093 542.665 448.36H542.729C542.723 448.269 542.718 448.179 542.713 448.088C542.702 448.008 542.694 447.925 542.689 447.84C542.689 447.749 542.689 447.669 542.689 447.6V446.24H543.409V452H542.729V451.24H542.665C542.595 451.507 542.454 451.715 542.241 451.864C542.027 452.008 541.758 452.08 541.433 452.08C541.209 452.08 541.006 452.04 540.825 451.96C540.643 451.88 540.489 451.768 540.361 451.624C540.233 451.475 540.131 451.293 540.057 451.08C539.987 450.867 539.953 450.627 539.953 450.36V449.24ZM540.673 449.24V450.36C540.673 450.696 540.763 450.963 540.945 451.16C541.131 451.357 541.385 451.456 541.705 451.456C542.003 451.456 542.241 451.357 542.417 451.16C542.598 450.963 542.689 450.696 542.689 450.36V449.24C542.689 448.904 542.598 448.637 542.417 448.44C542.241 448.243 542.003 448.144 541.705 448.144C541.379 448.144 541.126 448.24 540.945 448.432C540.763 448.624 540.673 448.893 540.673 449.24ZM546.509 452.08C546.237 452.08 545.992 452.04 545.773 451.96C545.56 451.88 545.376 451.765 545.221 451.616C545.072 451.467 544.955 451.285 544.869 451.072C544.789 450.859 544.749 450.621 544.749 450.36V449.24C544.749 448.973 544.789 448.736 544.869 448.528C544.955 448.315 545.072 448.133 545.221 447.984C545.376 447.835 545.56 447.72 545.773 447.64C545.992 447.56 546.237 447.52 546.509 447.52C547.053 447.52 547.483 447.672 547.797 447.976C548.112 448.28 548.269 448.699 548.269 449.232V450.36C548.269 450.893 548.112 451.315 547.797 451.624C547.488 451.928 547.059 452.08 546.509 452.08ZM545.469 450.36C545.469 450.696 545.56 450.96 545.741 451.152C545.928 451.344 546.184 451.44 546.509 451.44C546.829 451.44 547.083 451.344 547.269 451.152C547.456 450.96 547.549 450.696 547.549 450.36V449.24C547.549 448.904 547.456 448.64 547.269 448.448C547.083 448.256 546.829 448.16 546.509 448.16C546.189 448.16 545.936 448.256 545.749 448.448C545.563 448.64 545.469 448.904 545.469 449.24V450.36ZM549.49 449.2C549.49 448.944 549.525 448.712 549.594 448.504C549.664 448.296 549.762 448.12 549.89 447.976C550.024 447.832 550.184 447.72 550.37 447.64C550.557 447.56 550.765 447.52 550.994 447.52C551.314 447.52 551.586 447.597 551.81 447.752C552.034 447.901 552.186 448.117 552.266 448.4H552.322V447.6H553.002V451.72C553.002 452.237 552.85 452.64 552.546 452.928C552.242 453.216 551.816 453.36 551.266 453.36H550.186V452.704H551.266C551.586 452.704 551.834 452.619 552.01 452.448C552.192 452.277 552.282 452.035 552.282 451.72V451.52L552.314 450.76H552.266C552.186 451.043 552.034 451.261 551.81 451.416C551.586 451.565 551.314 451.64 550.994 451.64C550.765 451.64 550.557 451.6 550.37 451.52C550.189 451.44 550.032 451.328 549.898 451.184C549.77 451.04 549.669 450.864 549.594 450.656C549.525 450.448 549.49 450.216 549.49 449.96V449.2ZM550.226 449.96C550.226 450.291 550.317 450.549 550.498 450.736C550.685 450.923 550.938 451.016 551.258 451.016C551.578 451.016 551.829 450.923 552.01 450.736C552.192 450.549 552.282 450.291 552.282 449.96V449.2C552.282 448.869 552.192 448.611 552.01 448.424C551.829 448.237 551.578 448.144 551.258 448.144C550.938 448.144 550.685 448.237 550.498 448.424C550.317 448.611 550.226 448.869 550.226 449.2V449.96ZM554.343 449.232C554.343 448.704 554.5 448.288 554.815 447.984C555.13 447.675 555.559 447.52 556.103 447.52C556.647 447.52 557.076 447.675 557.391 447.984C557.706 448.288 557.863 448.704 557.863 449.232V450.008H555.055V450.36C555.055 450.701 555.148 450.971 555.335 451.168C555.527 451.365 555.783 451.464 556.103 451.464C556.348 451.464 556.559 451.424 556.735 451.344C556.916 451.259 557.044 451.144 557.119 451H557.839C557.748 451.336 557.546 451.6 557.231 451.792C556.922 451.984 556.546 452.08 556.103 452.08C555.831 452.08 555.586 452.04 555.367 451.96C555.154 451.88 554.97 451.765 554.815 451.616C554.666 451.467 554.548 451.285 554.463 451.072C554.383 450.859 554.343 450.621 554.343 450.36V449.232ZM556.103 448.128C555.783 448.128 555.527 448.229 555.335 448.432C555.148 448.629 555.055 448.896 555.055 449.232V449.416H557.151V449.232C557.151 448.896 557.055 448.629 556.863 448.432C556.676 448.229 556.423 448.128 556.103 448.128Z" fill="#1F1F1F"/>
    </g>
    <g class='dial'>
      <circle cx="530" cy="444" r="17" class='hifi__shimmer stroked' stroke-width="4"/>
      <circle class='dot' cx="530" cy="435" r="4" />
    </g>
    <g class='dial'>
      <circle cx="371.5" cy="444.5" r="9.5" class='hifi__shimmer stroked' stroke-width="4"/>
      <circle class='dot' cx="371.5" cy="440" r="2" />
    </g>
    <path d="M509 473H548" class='stroked' stroke-width="2" stroke-linecap="round"/>
    <circle cx="548" cy="473" r="4" class='button' />
    <rect x="418" y="491" width="58" height="14" class='stroked button' stroke-width="2"/>
    <rect x="417.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="427.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="437.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="477.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="447.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="407.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="457.5" y="463.5" width="9" height="9" class='stroked button'/>
    <rect x="467.5" y="463.5" width="9" height="9" class='stroked button'/>
  </g>
  <g class='note'>
    <path d="M22 57V124" stroke-width="6" stroke-linecap="round"/>
    <circle cx="12.5" cy="123.5" r="12.5"/>
  </g>
  <g class='note'>
    <path d="M100 36V103" stroke-width="6" stroke-linecap="round"/>
    <circle cx="90.5" cy="102.5" r="12.5"/>
  </g>
  <g class='note'>
    <path d="M65 19V86" stroke-width="6" stroke-linecap="round"/>
    <circle cx="55.5" cy="85.5" r="12.5"/>
  </g>
  <g class='note'>
    <path d="M877 63V130" stroke-width="6" stroke-linecap="round"/>
    <circle cx="867.5" cy="129.5" r="12.5"/>
  </g>
  <g class='note'>
    <path d="M855 3V70" stroke-width="6" stroke-linecap="round"/>
    <circle cx="845.5" cy="69.5" r="12.5"/>
  </g>
  <g class='note'>
    <path d="M806 13V80" stroke-width="6" stroke-linecap="round"/>
    <circle cx="796.5" cy="79.5" r="12.5"/>
  </g>
</svg>

              
            
!

CSS

              
                *
  box-sizing border-box

:root
  --body hsl(0, 0%, 20%)
  --body-shimmer hsla(0, 0%, 100%, 0.1)
  --stroke hsl(0, 0%, 15%)
  --button hsl(0, 0%, 60%)

body
  --saturation 40
  --hue 170
  background 'hsl(%s, %s, 30%)' % (var(--hue) calc(var(--saturation, 40) * 1%))
  display flex
  align-items center
  justify-content center
  min-height 100vh
  // animation party 5s infinite linear

@keyframes party
  for $frame in (0..100)
    {$frame * 1%}
      background 'hsl(%s, 40%, 40%)' % ($frame * 3.6)

.note
  path
    stroke 'hsl(%s, 60%, 60%)' % var(--hue, 0)
  circle
    fill 'hsl(%s, 60%, 60%)' % var(--hue, 0)

.dot
  fill hsl(0, 60%, 30%)

.hifi
  height 40vmin
  border-bottom 4px solid 'hsl(%s, %s, 25%)' % (var(--hue) calc(var(--saturation, 40) * 1%))

  &__body
    fill var(--body)
  &__shimmer
    fill var(--body-shimmer)

.shimmer
  fill var(--body-shimmer)

.stroked
  stroke var(--stroke)

.button
  fill var(--button)

.lcd__panel
  fill hsl(10, 40%, 50%)

.tweeter
  &__outer
    fill #313131
    stroke var(--button)
  &__inner
    fill var(--body-shimmer)
              
            
!

JS

              
                const {
  gsap: {
    to,
    timeline,
    set,
    utils: { random },
  },
} = window

set('.tweeter', { transformOrigin: '50% 50%' })

to('.tweeter', {
  duration: 0.2,
  scale: 1.1,
  yoyo: true,
  repeat: -1,
})
to('feGaussianBlur', {
  attr: {
    stdDeviation: 2,
  },
  yoyo: true,
  repeat: -1,
  duration: 0.2,
})

timeline({
  ease: 'none',
  repeat: -1,
})
  .to('#speaker', {
    transformOrigin: '50% 100%',
    scaleX: 1.05,
    scaleY: 0.95,
    duration: 0.2,
  })
  .to('#speaker', {
    transformOrigin: '50% 100%',
    scaleX: 0.95,
    scaleY: 1.05,
    duration: 0.2,
    y: -20,
  })
  .to('#speaker', {
    transformOrigin: '50% 100%',
    scaleX: 1,
    scaleY: 1,
    duration: 0.2,
    y: 0,
  })

timeline({ repeat: -1 })
  .add(
    timeline()
      .to(
        '.stack',
        {
          y: -10,
          repeat: 1,
          yoyo: true,
          duration: 0.1,
        },
        0
      )
      .to(
        '.stack',
        {
          duration: 0.2,
          x: '+=4',
        },
        0
      ),
    0.6
  )
  .add(
    timeline()
      .to(
        '.stack',
        {
          y: -10,
          repeat: 1,
          yoyo: true,
          duration: 0.1,
        },
        0
      )
      .to(
        '.stack',
        {
          duration: 0.2,
          x: '-=4',
        },
        0
      ),
    1.2
  )

const LIMIT = 150
set('.note', {
  '--hue': () => random(0, 360),
  transformOrigin: index => (index < 3 ? '100% 100%' : '0 100%'),
  scale: 0,
  opacity: 0,
  x: index => (index < 3 ? random(10, LIMIT) : random(-LIMIT, -10)),
  y: 90,
  rotation: random(-25, 25),
})

document.querySelectorAll('.note').forEach((note, index) =>
  to(note, {
    scale: random(0.75, 1.1),
    opacity: 1,
    repeat: -1,
    ease: 'sine.inOut',
    x: `${index < 3 ? '-' : '+'}=${random(10, 20)}`,
    y: 20,
    duration: random(0.5, 1.5),
  })
)

set('.lcd__text', { x: 200 })
set('.lcd__line', { x: 500 })
to('.lcd__text', { x: -200, repeat: -1, duration: 5, ease: 'none' })
to('.lcd__line', { x: -500, repeat: -1, duration: 3, ease: 'none' })

to('.slider__handle', {
  y: 'random(5, 45)',
  duration: random(0.1, 0.8),
  repeat: -1,
  yoyo: true,
  repeatRefresh: true,
})
to('.dial', {
  rotation: 'random(-355, 355)',
  duration: random(0.1, 0.8),
  repeat: -1,
  yoyo: true,
  transformOrigin: '50% 50%',
  repeatRefresh: true,
})

// GSDevTools.create()

              
            
!
999px

Console