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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 194.05 120.82')
  g(transform='translate(58.03 -57.75)')
    rect.ground(ry='3.18' y='172.21' x='33.49' height='6.36' width='102.52' style='stroke:none;stroke-width:15.875;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    path.bear__jeans(d='M79.38 136.78a39.24 46.3 0 00-38.63 38.36h12.92a25.95 30.62 0 01.3-2.26 25.95 30.62 0 01.64-2.97 25.95 30.62 0 01.89-2.87 25.95 30.62 0 011.12-2.76 25.95 30.62 0 011.36-2.6 25.95 30.62 0 011.57-2.45 25.95 30.62 0 011.77-2.23 25.95 30.62 0 011.95-2.02 25.95 30.62 0 012.1-1.78 25.95 30.62 0 012.26-1.53 25.95 30.62 0 012.36-1.25 25.95 30.62 0 012.47-.96 25.95 30.62 0 012.53-.67 25.95 30.62 0 012.57-.37 25.95 30.62 0 011.84-.08 25.95 30.62 0 012.59.16 25.95 30.62 0 012.56.45 25.95 30.62 0 012.52.76 25.95 30.62 0 012.43 1.05 25.95 30.62 0 012.34 1.33 25.95 30.62 0 012.2 1.6 25.95 30.62 0 012.07 1.85 25.95 30.62 0 011.9 2.09 25.95 30.62 0 011.71 2.3 25.95 30.62 0 011.51 2.49 25.95 30.62 0 011.3 2.65 25.95 30.62 0 011.05 2.8 25.95 30.62 0 01.82 2.9 25.95 30.62 0 01.57 2.98 25.95 30.62 0 01.14 1.4h12.93a39.24 46.3 0 00-38.66-38.37z' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:14.61518764;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    rect.bear__belt(y='125.62' x='57.51' height='18.89' width='43.72' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:21.45877838;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    circle.bear__shoulder.bear__shoulder--left(r='11.34' cy='114.82' cx='49.51' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    rect.bear__tank(ry='4.85' y='106.5' x='54.9' height='33.43' width='48.95' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.10835218;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    g.bear__head
      rect.bear__fur.bear__face(ry='5.64' y='74.94' x='61.23' height='37.99' width='36.29' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.21629286;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      circle.bear__fur.bear__ear(r='7.94' cy='73.54' cx='64.03' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.28125;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      rect.bear__bandana(ry='0' y='82.08' x='59.15' height='9.83' width='40.44' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.12773705;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      path.bear__muzzle(d='M62.78 96.67c-.53 0-1.05.06-1.55.16v10.46a5.63 5.63 0 005.64 5.64h15.9v-6.65c0-5.32-3.76-9.6-8.43-9.6z' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.93559551;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      path.bear__bandana.bear__bandana-tie(d='M100.95 87.66h4.78c2.38 0 4.3 6.22 4.3 8.6h-9.08c-2.39 0-4.3-6.22-4.3-8.6h4.3z' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20.28494453;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      rect.bear__nose(ry='3.21' y='95.63' x='60.17' height='6.43' width='12.28' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.94184494;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
      circle.bear__fur.bear__ear(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.28125;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' cx='94.72' cy='73.54' r='7.94')
    g.bear__keyboard-arm
      g.keyboard(transform='rotate(12.57 341.33 136.91)')
        g(transform='matrix(1.0972 0 0 1.0972 -13.05 -63.96)')
          rect.keyboard__body(y='221.42' x='29.93' height='21.7' width='76.99' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:17.24043465;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
          g(transform='translate(1.98 21.96)')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.59976292;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='29.2' height='3.97' x='44.35' y='215.86' ry='0')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='29.27' y='205.81')
            rect.keyboard__key(y='205.81' x='64.46' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='59.43' y='205.81')
            rect.keyboard__key(y='205.81' x='54.4' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='49.38' y='205.81')
            rect.keyboard__key(y='205.81' x='44.35' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='34.3' y='205.81')
            rect.keyboard__key(y='205.81' x='39.32' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='64.46' y='210.83')
            rect.keyboard__key(y='210.83' x='59.43' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='54.4' y='210.83')
            rect.keyboard__key(y='210.83' x='49.38' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='44.35' y='210.83')
            rect.keyboard__key(y='210.83' x='39.32' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:19.56653404;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='9' height='3.97' x='29.27' y='210.83')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='74.51' y='205.81')
            rect.keyboard__key(y='210.83' x='69.49' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='74.51' y='210.83')
            rect.keyboard__key(y='215.86' x='39.32' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='34.3' y='215.86')
            rect.keyboard__key.keyboard__key--accented(y='215.86' x='29.27' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='69.49' y='205.81')
            rect.keyboard__key(y='210.83' x='89.59' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='79.54' y='210.83')
            rect.keyboard__key.keyboard__key--accented(y='210.83' x='84.57' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='89.59' y='215.86')
            rect.keyboard__key.keyboard__key--accented(y='215.86' x='84.57' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='79.54' y='215.86')
            rect.keyboard__key(y='205.81' x='79.54' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(y='205.81' x='84.57' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(y='205.81' x='89.59' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='74.51' y='215.86')
            rect.keyboard__key.keyboard__key--accented(y='200.78' x='29.27' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='64.46' y='200.78')
            rect.keyboard__key(y='200.78' x='59.43' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='54.4' y='200.78')
            rect.keyboard__key(y='200.78' x='49.38' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='44.35' y='200.78')
            rect.keyboard__key(y='200.78' x='34.3' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='39.32' y='200.78')
            rect.keyboard__key(y='200.78' x='74.51' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(y='200.78' x='69.49' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='79.54' y='200.78')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='84.57' y='200.78')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='89.59' y='200.78')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='94.62' y='210.83')
            rect.keyboard__key(y='215.86' x='94.62' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='94.62' y='205.81')
            rect.keyboard__key.keyboard__key--accented(y='200.78' x='94.62' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(y='210.83' x='99.65' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='99.65' y='215.86')
            rect.keyboard__key(y='205.81' x='99.65' height='3.97' width='3.97' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
            rect.keyboard__key.keyboard__key--accented(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12.99630928;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='3.97' height='3.97' x='99.65' y='200.78')
        rect.bear__paw.bear__paw--right(style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:17.53100395;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' width='17.21' height='9.35' x='32.05' y='196.97' ry='4.68')
      g.bear__arm
        path.bear__fur(d='M109.61 103.48a11.34 11.34 0 00-11.34 11.34 11.34 11.34 0 002.84 7.47v7.27H87.12a7.92 7.92 0 00-7.93 7.93c0 4.4 3.54 7.94 7.93 7.94h22.49a7.28 7.28 0 001.81-.23 7.92 7.92 0 005.17-4.1 11.47 11.47 0 001.53-5.8v-13a11.34 11.34 0 002.83-7.48 11.34 11.34 0 00-11.34-11.34z' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:18.89763832;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
        rect.bear__fur.bear__fur--light(ry='1.98' y='132.2' x='85.99' height='3.97' width='20.03' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
        circle.bear__fur.bear__fur--light(r='3.4' cy='111.22' cx='113.96' style='opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1')
    text#original-code-block.code-block(style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:12.28657341px;line-height:1.25;font-family:Impact;-inkscape-font-specification:'Impact, Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill-opacity:1;stroke:none;stroke-width:0.30716431" x='-12.91' y='107.23' transform='scale(.87741 1.13971)')
      tspan(x='-12.91' y='107.23' style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:condensed;font-size:12.28657341px;font-family:Impact;-inkscape-font-specification:'Impact, Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.30716431") &lt;/&gt;
    g.codepen
input#volume(type='checkbox')
label(for='volume', title='Toggle sound')
  //- On
  svg(viewBox="0 0 24 24")
    path(d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z")
  //- Off
  svg(viewBox="0 0 24 24")
    path(d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z")
              
            
!

CSS

              
                *
  box-sizing border-box

:root
  --jeans hsl(0, 0%, 45%)
  --ground-hue 190
  --belt hsl(0, 0%, 0%)
  --fur-dark hsl(25, 80%, 25%)
  --fur hsl(25, 80%, 30%)
  --fur-light hsl(25, 60%, 45%)
  --muzzle hsl(25, 60%, 75%)
  --tank hsl(0, 0%, 85%)
  --nose hsl(0, 0%, 5%)
  --bandana hsl(0, 90%, 50%)
  --keyboard-body hsl(0, 0%, 25%)
  --keyboard-key hsl(0, 0%, 55%)
  --keyboard-accent hsl(260, 30%, 50%)
  --bg 'hsl(%s, 60%, 95%)' % var(--ground-hue)

body
  min-height 100vh
  display flex
  align-items center
  justify-content center
  background var(--bg)

svg
  width 60vmin

.ground
  --alpha 0.5
  fill 'hsla(%s, 60%, 60%, %s)' % (var(--ground-hue) var(--alpha, 1))

.bear
  &__jeans
    fill var(--jeans)
  &__belt
    fill var(--belt)
  &__muzzle
    fill var(--muzzle)
  &__shoulder
    &--left
      fill var(--fur-dark)
  &__tank
    fill var(--tank)
  &__nose
    fill var(--nose)
  &__bandana
    fill var(--bandana)
  &__fur
  &__paw
    fill var(--fur)
    &--light
      fill var(--fur-light)

.keyboard
  &__body
    fill var(--keyboard-body)
  &__key
    fill var(--keyboard-key)
    &--accented
      fill var(--keyboard-accent)

.code-block
  fill 'hsl(%s, 100%, 50%)' % var(--hue)

label
  height 44px
  width 44px
  position fixed
  bottom 1rem
  right 1rem
  cursor pointer

  & > svg
    position absolute
    height 100%
    width 100%
    top 0
    left 0

  path
    fill 'hsl(%s, 60%, 60%)' % var(--ground-hue)

  svg:nth-of-type(1)
    display none

[type='checkbox']
  // opacity 0
  height 0
  width 0

:checked ~ label
  svg:nth-of-type(1)
    display block
  svg:nth-of-type(2)
    display none
              
            
!

JS

              
                const {
  gsap: { set, timeline },
} = window

const shared = {
  duration: 0.075,
}

const AUDIO = {
  CLACK_ONE: new Audio('https://assets.codepen.io/605876/clack-one.mp3'),
  CLACK_TWO: new Audio('https://assets.codepen.io/605876/clack-two.mp3'),
  WARZONE: new Audio('https://assets.codepen.io/605876/dial-up-warzone.mp3'),
}

const CLICK_RATE = 0.65

AUDIO.WARZONE.loop = true
AUDIO.WARZONE.volume = 0.1
AUDIO.CLACK_ONE.volume = AUDIO.CLACK_TWO.volume = 0.5
AUDIO.CLACK_ONE.playbackRate = AUDIO.CLACK_TWO.playbackRate = CLICK_RATE

AUDIO.WARZONE.muted = AUDIO.CLACK_ONE.muted = AUDIO.CLACK_TWO.muted = true
const toggleAudio = () => {
  AUDIO.WARZONE.muted = AUDIO.CLACK_ONE.muted = AUDIO.CLACK_TWO.muted = !AUDIO
    .WARZONE.muted
  if (!AUDIO.WARZONE.muted) AUDIO.WARZONE.play()
  else AUDIO.WARZONE.pause()
}

document.querySelector('#volume').addEventListener('input', toggleAudio)

set('#original-code-block', { x: 25, y: 15, scale: 0 })
const CODEPEN = document.querySelector('.codepen')
const TL = timeline({
  yoyo: true,
  repeat: -1,
  onStart: () => {
    // We want to fire a code block here!
    const block = document.querySelector('#original-code-block').cloneNode(true)
    block.removeAttribute('id')
    CODEPEN.appendChild(block)
    set(block, {
      transformOrigin: '50% 50%',
      scale: 0,
      x: 30,
      '--hue': 'random(0, 360)',
      y: 'random(15, 30)',
      display: 'block',
    })
    timeline({
      onComplete: () => block.remove(),
      onStart: () => {
        AUDIO[Math.random() > 0.5 ? 'CLACK_ONE' : 'CLACK_TWO'].play()
      },
    })
      .to(block, {
        x: 'random(-35, -5)',
        y: 'random(-30, 30)',
        scale: 'random(0.75, 1.5)',
        rotate: 'random(-15, 15)',
        duration: 'random(0.25, 1.25)',
      })
      .to(
        block,
        {
          opacity: 0,
        },
        '-=0.1'
      )
  },
})
  .to('.bear__head', {
    yPercent: 3,
    ...shared,
  })
  .to(
    '.bear__bandana-tie',
    {
      transformOrigin: '0 0',
      rotate: -30,
      ...shared,
    },
    0
  )
  .to(
    '.bear__keyboard-arm',
    {
      transformOrigin: '85% 20%',
      rotate: 4,
      ...shared,
    },
    0
  )
  .to(
    '.ground',
    {
      '--alpha': 0.25,
      ...shared,
    },
    0
  )
  .to(
    '.bear__tank',
    {
      transformOrigin: '50% 100%',
      scaleY: 0.99,
      ...shared,
    },
    0
  )

document.body.addEventListener('pointerdown', () => {
  // Need to also adjust the playbackRate
  TL.timeScale(0.1)
  AUDIO.WARZONE.playbackRate = AUDIO.CLACK_ONE.playbackRate = AUDIO.CLACK_TWO.playbackRate = 10
})
document.body.addEventListener('pointerup', () => {
  TL.timeScale(1)
  AUDIO.WARZONE.playbackRate = 1
  AUDIO.CLACK_ONE.playbackRate = AUDIO.CLACK_TWO.playbackRate = CLICK_RATE
})

              
            
!
999px

Console