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="corgi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130">
  <defs>
    <g id="party" class="corgi__party">
      <rect width="110" height="15.714" x="44.999" y="56.462" ry="0" />
      <rect ry="0" y="72.176" x="44.999" height="15.714" width="110" />
      <rect width="110" height="15.714" x="44.999" y="87.89" ry="0" />
      <rect ry="0" y="103.605" x="44.999" height="15.714" width="110" />
      <rect width="110" height="15.714" x="44.999" y="119.319" ry="0" />
      <rect ry="0" y="135.033" x="44.999" height="15.714" width="110" />
      <rect width="110" height="15.714" x="44.999" y="150.748" ry="0" />
    </g>
    <g id="block-party" class="party-set">
      <g>
        <use href="#party"></use>
      </g>
      <g>
        <use href="#party"></use>
      </g>
    </g>
    <clipPath id="shadow">
      <ellipse ry="8.139" rx="31.095" cy="151.24" cx="107.581"/>
    </clipPath>
    <clipPath id="body">
      <path d="M140.431 142.837c-1.166 15.003-21.912 14.401-31.71 9.678-4.36-2.102-4.045-.434-16.686-3.065-2.042-1.198-3.983-7.1-3.984-3.481-3.164-1.187-8.96-12.193-7.926-7.425 0 0-2.362-.466-6.038-11.998.426 8.274-3.08-2.66-.449-6.292 6.836-13.637 15.091-5.889 39.558-16.765 7.69 19.92 28.727 20.155 27.235 39.348z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    </clipPath>
    <clipPath id="face">
      <path class="corgi__fur corgi__stroke corgi__head" d="M70.364 65.315c-.95-.033-1.809.18-2.537.663-3.885 2.582-4.585 16.046.89 24.962 1.258 2.048 2.434 3.47 3.548 4.424-.862 2.11-1.812 8.058-1.812 8.058s2.675-3.244-.07 3.248c5.473 13.475 2.531 1.308 4.776 7.624 10.78 9.546 4.203 2.034 10.066 6.115 4.867.435 5.87 1.576 9.096 1.576 3.973-.414 2.406 1.18 9.097-1.576 5.282-3.335-1.647 4.727 7.429-4.298 2.777-5.71.18 6.964 5.008-6.375.603-5.217 3.08 4.576 1.174-7.64 1.736 1.182.525-2.605.263-3.806 1.905-1.252 3.938-3.486 6.108-7.019 5.476-8.916 4.61-20.556.725-23.137-3.885-2.581-11.473 2.554-16.949 11.47-.968 1.577-1.64 3.097-2.076 4.549-3.328-1.492-7.025-2.273-10.779-2.28-2.46.01-4.905.351-7.241 1.014-.36-1.648-1.089-3.458-2.304-5.437-4.45-7.245-10.293-11.993-14.412-12.135z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    </clipPath>
    <g id="cracker" class="corgi__cracker" transform="matrix(1.75408 0 0 1.75408 -55.023 -124.134)">
      <path class="corgi__cracker-stroke corgi__cracker-primary" d="M90.644 133.297h3.8l-1.588 1.036 1.587 1.036-1.587 1.035 1.587 1.036h-3.8l-1.058-2.071z" stroke-linecap="round" stroke-linejoin="round"/>
      <rect class="corgi__cracker-stroke corgi__cracker-primary" ry="0" y="133.297" x="79.432" height="4.143" width="10.154" stroke-width=".473" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="corgi__cracker-stroke corgi__cracker-primary" d="M78.373 133.297h-3.8l1.588 1.036-1.587 1.036 1.587 1.035-1.587 1.036h3.8l1.058-2.071z" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round"/>
      <path class="corgi__cracker-accent" d="M80.582 133.297v4.143h1.938v-4.143zM86.328 133.297v4.143h1.938v-4.143z" />
      <rect class="corgi__cracker-stroke corgi__clear" width="10.154" height="4.143" x="79.432" y="133.297" ry="0" fill="none" stroke-width=".473" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
  </defs>
  <g transform="translate(-34.999 -46.462)">
    <ellipse class="corgi__shadow" ry="8.139" rx="31.095" cy="151.24" cx="107.581" fill="gray"/>
    <path class="corgi__leg corgi__stroke corgi__white corgi__leg--front-right" d="M85.72 133.472h5.445a3.248 3.248 0 013.255 3.255v13.414a3.248 3.248 0 01-3.255 3.255H85.72c-1.804 0-4.203-1.72-3.256-3.255l1.407-2.28c.947-1.534.045-14.389 1.849-14.389z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__stroke corgi__fur corgi__body" d="M140.431 142.837c-1.166 15.003-21.912 14.401-31.71 9.678-4.36-2.102-4.045-.434-16.686-3.065-2.042-1.198-3.983-7.1-3.984-3.481-3.164-1.187-8.96-12.193-7.926-7.425 0 0-2.362-.466-6.038-11.998.426 8.274-3.08-2.66-.449-6.292 6.836-13.637 15.091-5.889 39.558-16.765 7.69 19.92 28.727 20.155 27.235 39.348z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <g clip-path="url(#body)">
      <use href="#block-party" />
    </g>
    <path class="corgi__white" d="M113.196 103.489c-24.467 10.876-32.722 3.128-39.558 16.766-2.632 3.631.875 14.564.449 6.29 3.676 11.533 6.038 11.999 6.038 11.999-1.033-4.767 4.762 6.238 7.926 7.425 0-3.619 1.942 2.283 3.984 3.481 1.167.243 2.19.439 3.15.615.188-.131.373-.262.54-.394 1.615-1.27 2.261-16.921 3.634-18.52-.15 2.62.272 2.51 1.831.22 2.79-4.694 4.2-3.42 6.901-8.346-.404 3.219-.393 3.285 1.359.867 2.071-3.158 5.473-13.205 5.735-16.152a33.672 33.672 0 01-1.989-4.251z"/>
    <path class="corgi__outline corgi__stroke" d="M140.431 142.837c-1.166 15.003-21.912 14.401-31.71 9.678-4.36-2.102-4.045-.434-16.686-3.065-2.042-1.198-3.983-7.1-3.984-3.481-3.164-1.187-8.96-12.193-7.926-7.425 0 0-2.362-.466-6.038-11.998.426 8.274-3.08-2.66-.449-6.292 6.836-13.637 15.091-5.889 39.558-16.765 7.69 19.92 28.727 20.155 27.235 39.348z" fill="none" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__stroke corgi__clear corgi__leg" d="M110.52 147.51l-4.352 6.995c-.953 1.531-1.639 2.157-3.44 2.07l-6.912-.332c-1.801-.087-.175-2.236.039-4.026l.835-6.995c.214-1.79 0 0 .745-5" stroke-width=".87704" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__white" d="M98.461 149.065c-.926 0-1.757.384-2.349 1l-.257 2.152c-.09.75-.42 1.557-.65 2.256v1.577c.133.108.325.178.611.192l6.912.334c1.801.086 2.487-.54 3.44-2.071l2.642-4.246a3.245 3.245 0 00-2.523-1.194z"/>
    <path class="corgi__stroke" d="M110.52 147.51l-4.352 6.995c-.953 1.531-1.639 2.157-3.44 2.07l-6.912-.332c-1.801-.087-.175-2.236.039-4.026l.835-6.995c.214-1.79 0 0 .745-5" fill="none" stroke-width=".87704" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__stroke corgi__clear" d="M131.136 154.182c-3.397 1.182-6.326 1.22-11.165 1.22-4.84 0-9.508-1.447-9.508-3.54s2.928-2.878 7.767-2.878c-3.762-.83-3.982-6.576-2.631-6.338" stroke-width=".839" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__white" d="M119.97 155.403c-4.838 0-9.507-1.448-9.507-3.541s2.928-2.878 7.767-2.878c4.29.292 2.938.054 4.29.292 1.35.239 1.704 2.402 2.9 2.807 4.118 3.516 2.591 2.92-5.45 3.32z" />
    <path class="corgi__stroke corgi__outline corgi__clear" d="M131.136 154.182c-3.397 1.182-6.326 1.22-11.165 1.22-4.84 0-9.508-1.447-9.508-3.54s2.928-2.878 7.767-2.878c-3.762-.83-3.982-6.576-2.631-6.338" fill="none" stroke-width=".839" stroke-linecap="round" stroke-linejoin="round"/>
    
    <g clip-path="url(#face)">
      <use href="#block-party" />
    </g>
    <g class="corgi__head-group">
<!--     <path class="corgi__fur corgi__stroke corgi__head" d="M70.364 65.315c-.95-.033-1.809.18-2.537.663-3.885 2.582-4.585 16.046.89 24.962 1.258 2.048 2.434 3.47 3.548 4.424-.862 2.11-1.812 8.058-1.812 8.058s2.675-3.244-.07 3.248c5.473 13.475 2.531 1.308 4.776 7.624 10.78 9.546 4.203 2.034 10.066 6.115 4.867.435 5.87 1.576 9.096 1.576 3.973-.414 2.406 1.18 9.097-1.576 5.282-3.335-1.647 4.727 7.429-4.298 2.777-5.71.18 6.964 5.008-6.375.603-5.217 3.08 4.576 1.174-7.64 1.736 1.182.525-2.605.263-3.806 1.905-1.252 3.938-3.486 6.108-7.019 5.476-8.916 4.61-20.556.725-23.137-3.885-2.581-11.473 2.554-16.949 11.47-.968 1.577-1.64 3.097-2.076 4.549-3.328-1.492-7.025-2.273-10.779-2.28-2.46.01-4.905.351-7.241 1.014-.36-1.648-1.089-3.458-2.304-5.437-4.45-7.245-10.293-11.993-14.412-12.135z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/> -->
    <path class="corgi__white corgi__snout" d="M94.321 81.874c-1.339.004-2.672.112-3.987.312.897 3.628.722 8.003.884 11.41.177 3.745-.828 6.374-1.581 9.3-8.875.523-9.129 4.408-9.602 5.359-.502 1.007-1.939-.199-2.359-.933-1.27-2.218-2.484-6.077-4.649-6.021-.627.016-1.645.106-2.266.37a210.51 210.51 0 00-.308 1.75s.168-.202.375-.404c.104-.102.218-.203.326-.28.109-.075.212-.125.293-.126h.001c.04 0 .075.013.103.041.056.057.083.178.065.387-.028.314-.157.828-.442 1.627-.094.267-.206.564-.337.897-.131.333-.281.7-.453 1.107a94.007 94.007 0 001.684 3.937c.224.485.422.89.597 1.228 1.222 2.367 1.323 1.411 1.44.824.017-.084.034-.16.054-.218a.312.312 0 01.035-.072c.037-.054.087-.056.16.031.048.059.107.156.18.306.145.298.345.799.625 1.589.674.596 1.28 1.126 1.825 1.596 1.091.941 1.94 1.643 2.605 2.163.665.52 1.145.856 1.5 1.067h.001c.531.314.782.345.945.28a.515.515 0 00.143-.091c.106-.09.198-.204.389-.231a.845.845 0 01.284.016c.058.012.121.029.191.052.281.092.668.282 1.221.625.277.172.595.382.961.637.305.027.594.057.87.09a25.82 25.82 0 013.297.6c.707.176 1.314.352 1.917.502.906.223 1.803.384 3.013.384 2.235-.233 2.717.169 3.902.075.263-.02.561-.066.92-.149.18-.04.376-.09.59-.152a22.8 22.8 0 001.536-.508c.606-.221 1.313-.498 2.15-.842.33-.209.612-.373.853-.499a4.64 4.64 0 01.61-.273c.334-.117.532-.11.65-.038.029.018.053.04.073.066.02.026.036.055.049.086.076.19.032.466.056.642.004.03.01.056.018.08.008.023.02.042.034.056a.109.109 0 00.056.031c.205.044.769-.348 2.32-1.81.69-.65 1.574-1.51 2.709-2.639.173-.356.326-.641.461-.865v-.001c.539-.897.791-.817.958-.456.146.317.227.848.375 1.13.022.041.045.076.07.105.195.23.504.05 1.127-1.235.468-.965 1.112-2.552 2.018-5.053.032-.275.069-.5.11-.697l.018-.09.027-.104c.015-.061.031-.123.048-.176.01-.034.022-.063.033-.094.018-.05.036-.097.055-.139l.025-.051c.024-.048.048-.09.073-.126.004-.006.009-.011.012-.017.72-.983 1.865 2.442 1.336-2.139a63.441 63.441 0 00-.16-1.253l-.005-.039c-1.399.279-3.65.796-4.873 1.513-.88.516-1.195 1.861-2.172 2.155-1.749.526-4.267.38-5.373-1.073-.698-.917-1.704-4.375-9.218-4.53-.387-2.808-.156-5.628.46-9.165.546-3.137 2.778-8.453 3.838-11.203a27.024 27.024 0 00-5.77-.634z"/>
    <path class="corgi__stroke corgi__clear" d="M70.364 65.315c-.95-.033-1.809.18-2.537.663-3.885 2.582-4.585 16.046.89 24.962 1.258 2.048 2.434 3.47 3.548 4.424-.862 2.11-1.812 8.058-1.812 8.058s2.675-3.244-.07 3.248c5.473 13.475 2.531 1.308 4.776 7.624 10.78 9.546 4.203 2.034 10.066 6.115 4.867.435 5.87 1.576 9.096 1.576 3.973-.414 2.406 1.18 9.097-1.576 5.282-3.335-1.647 4.727 7.429-4.298 2.777-5.71.18 6.964 5.008-6.375.603-5.217 3.08 4.576 1.174-7.64 1.736 1.182.525-2.605.263-3.806 1.905-1.252 3.938-3.486 6.108-7.019 5.476-8.916 4.61-20.556.725-23.137-3.885-2.581-11.473 2.554-16.949 11.47-.968 1.577-1.64 3.097-2.076 4.549-3.328-1.492-7.025-2.273-10.779-2.28-2.46.01-4.905.351-7.241 1.014-.36-1.648-1.089-3.458-2.304-5.437-4.45-7.245-10.293-11.993-14.412-12.135z" fill="none" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <g class="corgi__eyes">
      <circle class="corgi__feature" r="2.785" cy="99.145" cx="86.249"/>
      <circle class="corgi__feature" cx="99.841" cy="99.145" r="2.785"/>
    </g>
    <g class="corgi__stroke corgi__tongue" transform="matrix(1.75408 0 0 1.56156 -75.407 -62.93)" stroke-linecap="round">
      <rect width="3.508" height="5.479" x="93.912" y="109.711" ry="1.52" fill="red" stroke-width=".537" stroke-linejoin="round"/>
      <path d="M95.666 113.186v-3.34" fill="none" stroke-width=".265"/>
    </g>
    <g class="corgi__mouth-cracker">
      <use href="#cracker" />
    </g>
    <path class="corgi__stroke corgi__white" d="M84.751 107.57a4.22 4.22 0 004.22 4.22c1.348-.003 2.673-.248 3.465-1.339.789 1.125 2.017 1.395 3.39 1.397a4.22 4.22 0 004.22-4.22" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__feature" d="M97.305 104.499c0 1.648-2.135 4.392-4.973 4.392s-5.304-2.744-5.304-4.392c0-1.648 2.3-2.984 5.138-2.984s5.139 1.336 5.139 2.984z"/>
    <path class="corgi__stroke corgi__ear" d="M118.124 94.691c-4.805 2.604-1.897-2.316-8.424-6.622 5.905.168.634-2.034-.141-2.946-.775-.911 4.106-.532 3.628-1.334-4.058-2.966-4.079-1.726-1.729-4.87 4.259-6.042 9.667-9.561 12.08-7.86 2.413 1.7 2.146 14.743-5.414 23.632zM81.648 80.325c.936 1.632-.415 0-3.694 1.912 6.269 1.78 5.423 1.955.86 3.21 4.138 1.254 3.398.855 2.668 1.655-4.982 2.908-4.645 2.352-7.656 6.5-.89-.583-2.317-2.01-3.096-3.157-.778-1.147-1.49-2.592-2.106-4.37-2.47-7.113-2.513-16.862 1.335-18.199 3.849-1.336 7.893 5.833 11.689 12.449z" stroke-width=".877" stroke-linecap="round" stroke-linejoin="round"/>
    <path class="corgi__brows corgi__stroke corgi__clear" d="M82.817 92.92l7.032 3.047M103.796 92.92l-7.032 3.047" fill="none" stroke-width=".877"/>
    <g class="corgi__hat corgi__stroke" transform="matrix(1.75408 0 0 1.75408 -77.122 -82.85)" stroke-linecap="round" stroke-linejoin="round">
      <path class="corgi__hat-body corgi__fine-stroke" transform="matrix(.78167 -.62369 .67305 .7396 0 0)" d="M7.081 120.724l.77 12.242c.052.845-1.912.093-2.75-.002l-9.486-1.08c-.839-.096-2.132-.038-1.974-.884l.9-4.84c3.311-5.809 12.345-8.55 12.54-5.436z" stroke-width=".53"/>
      <rect class="corgi__fine-stroke corgi__hat-white" width="17.727" height="3.709" x="17.685" y="127.268" transform="matrix(.86555 -.50082 .51625 .85644 0 0)" ry="1.455" stroke-width=".612"/>
      <g class="corgi__hat-top" transform="rotate(-3.939 82.93 92.107)">
        <path class="corgi__fine-stroke corgi__hat-body" d="M83.337 95.664c-2.58 4.773-1.223 2.378-3.415 10.84-.828-.413-2.14-6.909-2.151-10.03-.022-6.047.66-7.218 2.478-9.316 2.293-2.644 3.046-4.266 6.145-2.68a2.52 2.52 0 011.24 1.652c.173.711.11 1.572-.17 2.548-.28.977-.776 2.07-1.47 3.245-.694 1.175-1.586 2.434-2.657 3.741z" stroke-width=".621"/>
        <circle class="corgi__fine-stroke corgi__hat-white" r="1.843" cy="106.547" cx="79.706" stroke-width=".5"/>
      </g>
    </g>
    </g>
    <g class="corgi__drop-cracker">
      <use href="#cracker" />
    </g>
  </g>
</svg>
              
            
!

CSS

              
                *
  box-sizing border-box

body
  display flex
  align-items center
  justify-content center
  min-height 100vh
  background hsl(130, 50%, 40%)

// #party
//   display none

.corgi
  height 50vmin
  // overflow visible

  &__shadow
    opacity 0.5
    fill hsl(0, 10%, 10%)

  &__stroke
    stroke hsl(0, 0%, 10%)
    stroke-width 1.25px

  &__drop-cracker
    display none

  &__cracker-primary
    fill hsl(280, 40%, 75%)

  &__cracker-accent
    fill hsl(45, 90%, 70%)

  &__hat-body
    fill hsl(10, 90%, 50%)

  &__fine-stroke
    stroke-width 0.65px

  &__cracker-stroke
    stroke-width 0.5px
    stroke hsl(0, 0%, 10%)

  &__brows
    display none

  &__hat-white
    fill hsl(0, 0%, 100%)

  &__ear
    fill hsl(35, 45%, 80%)

  &__fur
    fill hsl(38, 70%, 50%)

  &__tongue rect
    fill hsl(0, 95%, 50%)

  &__feature
    fill hsl(0, 0%, 10%)

  &__clear
    fill none

  &__white
    fill hsl(0, 0%, 100%)

  &__party
    rect
      fill 'hsl(%s, 80%, 50%)' % var(--hue)

    rect:nth-of-type(1)
      --hue 10
    rect:nth-of-type(2)
      --hue 40
    rect:nth-of-type(3)
      --hue 60
    rect:nth-of-type(4)
      --hue 80
    rect:nth-of-type(5)
      --hue 180
    rect:nth-of-type(6)
      --hue 260
    rect:nth-of-type(7)
      --hue 300

              
            
!

JS

              
                import gsap from 'https://cdn.skypack.dev/gsap'

gsap.set('.party-set g:nth-of-type(2)', { yPercent: 100 })
gsap.set('.party-set', {
  rotate: -45,
  transformOrigin: '50% 50%',
  xPercent: 50,
})

const partyTimeline = gsap
  .timeline({
    paused: true,
  })
  .to('.party-set g', {
    yPercent: '-=100',
    repeat: -1,
    duration: 2,
    ease: 'none',
  })


const eyeXBounds = 2;
const eyeYBounds = 1;
window.addEventListener('pointermove', ({ x, y }) => {
  const newX = gsap.utils.mapRange(0, window.innerWidth, -eyeXBounds, eyeXBounds, x);
  const newY = gsap.utils.mapRange(0, window.innerWidth, -eyeYBounds, eyeYBounds, y);
  gsap.set('.corgi__eyes', { x: newX, y: newY });
});

gsap.set('.corgi__head-group,#face', {
  transformOrigin: '60% 80%'
});


function nod() {
  const rDegree = gsap.utils.random(-15, 15);
  const delay = gsap.utils.random(1, 4);
  
  gsap
    .to('.corgi__head-group,#face', {
      delay,
      rotate: rDegree,
      onComplete: nod
    });
}

nod()

function drop() {
  gsap
    .timeline()
    .to('.corgi__head-group,#face', {
      rotate: 0,
      onComplete: () => {
        gsap.set('.corgi__drop-cracker', {
          display: 'initial'
        });
        gsap.set('.corgi__mouth-cracker', {
          display: 'none'
        })
      }
    })
    .to('.corgi__drop-cracker', {
      yPercent: 650
    })
}

// Speech Recognition stuff

window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition

const RECOG = new window.SpeechRecognition()
RECOG.lang = 'en-US'
// Continous results or not
RECOG.continuous = true
RECOG.interimResults = false

const STATE = {
  RUNNING: false,
  ACTIVATED: false,
  ROTATE: 0,
}

const START = () => {
  if (!STATE.RUNNING) {
    STATE.RUNNING = true
    document.body.style.backgroundColor = 'hsl(210, 50%, 50%)'
    RECOG.start()
  }
}

const COMMANDS = {
  PARTY: 'party',
  DROP: 'drop',
}
const LISTEN_FOR_ACTIVATION = res => {
  const TRANSCRIPT = res.results[res.results.length - 1][0].transcript
    .toLowerCase()
    .trim()
  console.info(TRANSCRIPT)
  if (STATE.ACTIVATED) {
    if (TRANSCRIPT === COMMANDS.PARTY) {
      partyTimeline.play()
    }
    
    if (TRANSCRIPT === COMMANDS.DROP) {
      drop()
    }
  }
  // Listen for a keyword that we can do something with??
  else if (TRANSCRIPT.trim() === KEYWORD) {
    // Go into active mode
    // On the fly change the listener???
    STATE.ACTIVATED = true
    document.body.style.backgroundColor = 'hsl(120, 50%, 50%)'
    setTimeout(() => {
      document.body.style.backgroundColor = 'hsl(210, 50%, 50%)'
      STATE.ACTIVATED = false
      partyTimeline.pause()
    }, 10000)
  }
}

const KEYWORD = 'corgi'
RECOG.onresult = LISTEN_FOR_ACTIVATION
RECOG.onend = () => {
  console.info('restarting')
  // Shouldn't end, restart.
  // Only restart if state is still running.
  if (STATE.RUNNING) RECOG.start()
}
START()

              
            
!
999px

Console