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

              
                <audio id="player" src="https://ia800600.us.archive.org/0/items/nightmarexmas/1993%20-%2006%20-%20What%27s%20This.mp3"></audio>
<div id="player-container">
  <span id="play-button" onclick="togglePlay()">
    <svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>play_arrow</title>
      <desc>Created with Sketch.</desc>
      <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-753.000000, -955.000000)">
          <g id="AV" transform="translate(100.000000, 852.000000)">
            <g id="-Round-/-AV-/-play_arrow" transform="translate(646.000000, 98.000000)">
              <g>
                <rect id="Rectangle-Copy-50" x="0" y="0" width="24" height="24"></rect>
                <path d="M7,6.82 L7,17.18 C7,17.97 7.87,18.45 8.54,18.02 L16.68,12.84 C17.3,12.45 17.3,11.55 16.68,11.15 L8.54,5.98 C7.87,5.55 7,6.03 7,6.82 Z" id="icon-color" fill="#1D1D1D"></path>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg></span>
  <span id="mute-button" onclick="toggleMute()">
    <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>volume_up</title>
      <desc>Created with Sketch.</desc>
      <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-817.000000, -997.000000)">
          <g id="AV" transform="translate(100.000000, 852.000000)">
            <g id="-Round-/-AV-/-volume_up" transform="translate(714.000000, 142.000000)">
              <g transform="translate(0.000000, 0.000000)">
                <rect id="Rectangle-Copy-86" x="0" y="0" width="24" height="24"></rect>
                <path d="M3,10 L3,14 C3,14.55 3.45,15 4,15 L7,15 L10.29,18.29 C10.92,18.92 12,18.47 12,17.58 L12,6.41 C12,5.52 10.92,5.07 10.29,5.7 L7,9 L4,9 C3.45,9 3,9.45 3,10 Z M16.5,12 C16.5,10.23 15.48,8.71 14,7.97 L14,16.02 C15.48,15.29 16.5,13.77 16.5,12 Z M14,4.45 L14,4.65 C14,5.03 14.25,5.36 14.6,5.5 C17.18,6.53 19,9.06 19,12 C19,14.94 17.18,17.47 14.6,18.5 C14.24,18.64 14,18.97 14,19.35 L14,19.55 C14,20.18 14.63,20.62 15.21,20.4 C18.6,19.11 21,15.84 21,12 C21,8.16 18.6,4.89 15.21,3.6 C14.63,3.37 14,3.82 14,4.45 Z" id="icon-color" fill="#1D1D1D"></path>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg></span>
</div>

<div class="container">
  <div class="snowflake snow1"></div>
  <div class="snowflake snow2"></div>
  <div class="snowflake snow3"></div>
  <div class="snowflake snow4"></div>
  <div class="snowflake snow5"></div>
  <div class="snowflake snow6"></div>
    <div class="snowflake snow7"></div>
  <div class="snowflake snow8"></div>
  <div class="jack">
    <div class="head">
      <div class="head-copy">
        <div class="left-eye"></div>
        <div class="right-eye"></div>
        <div class="left-nostril"></div>
        <div class="right-nostril"></div>
        <div class="smile">
          <div class="stitch s1"></div>
          <div class="stitch s2"></div>
          <div class="stitch s3"></div>
          <div class="stitch s4"></div>
          <div class="stitch s5"></div>
          <div class="stitch s6"></div>
        </div>

      </div>
      <div class="hat-front">
        <div class="hat-lining"></div>
      </div>
      <div class="hat-tail"></div>
      <div class="hat-tip">
      </div>
      <div class="hat-ball"></div>
      <div class="beard"></div>
    </div>
    <div class="torso">
    </div>
    <div class="belt"></div>
    <div class="upper-arm lau"></div>
    <div class="lower-arm lal"></div>
    <div class="upper-arm rau"></div>
    <div class="arm-animate">
      <div class="lower-arm ral"></div>
      <div class="hand hand-right"></div>
      <div class="present">
        <div class="ribbon"></div>
        <div class="bow bow1"></div>
        <div class="bow bow2"></div>
      </div>
    </div>
    <div class="hand hand-left"></div>
    <div class="right-leg">
      <div class="boot"></div>
    </div>
    <div class="left-leg">
      <div class="boot"></div>
    </div>
    <div class="boot-bottom br"></div>
    <div class="boot-bottom bl"></div>
    <div class="boot-lining blr"></div>
    <div class="boot-lining bll"></div>
  </div>
  <div class="zero">
    <div class="head-zero">
      <div class="snout"></div>
      <div class="snout-cover"></div>
      <div class="zero-ear zel"></div>
      <div class="zero-ear zer"></div>
      <div class="zero-eye"></div>
      <div class="zero-nose"></div>
      <div class="zero-smile"></div>
      <div class="zero-collar"></div>
    </div>
    <div class="zero-body"></div>
  </div>
  <div class="ground"></div>
</div>
              
            
!

CSS

              
                $jack: #e3e3e3;
$red: #A01A21;
$black: #171717;
$green: #005c1d;
$blue: #1a1354;
$zero: #f0f0f0;
$present: #d6aa3a;
$lighter-green: #067a5b;



* {
  padding: 0;
  margin: 0;
}

body {
  background: #9893bf;
  position: relative;
  height: 100%;
  width: 100%;
}

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background: $blue;
  border-radius: 48% 52% 49% 51% / 44% 44% 56% 56% ;
  margin: auto;
  margin-top: 12vh;
  margin-bottom: 2rem;
}

.ground {
  position: absolute;
  width: 70%;
  height: 18%;
  border-radius:43% 57% 33% 67% / 55% 42% 58% 45% ;
  background: white;
  z-index: 1;
  bottom: -1%;
  left: 15%;
}

.present {
  position: absolute;
  width: 9%;
  height: 9%;
  border-radius: 3px;
  background: $green;
  top: 25.5%;
  left: 40%;
  z-index: 3;
}

.ribbon {
  position: absolute;
  width: 28%;
  height: 100%;
  background: $present;
  left: 36%;
}

.bow {
  position: absolute;
  width: 30%;
  height: 30%;
  background: transparent;
  border: 4px solid $present;
  border-radius: 30% 70% 0% 100% / 30% 100% 0% 70%;
}

.bow1 {
  top: -35%;
  left: 5%;
  transform: rotate(-15deg);
}

.bow2{
  top: -35%;
  left: 45%;
  transform: rotate(10deg) scaleX(-1);
}

//MUSIC BUTTONS

svg {
  height: 22px;
  width: 22px;
  padding-top: 12px;
  padding-left: 3px;
}

svg:hover {
  cursor: pointer;
}

#pause {
  height: 19px;
  width: 19px;
  padding-bottom: 2px;
}


#icon-color {
  fill: $blue;
}

#player-container {
  position: absolute;
  width: 100px;
  height: 50px;
  background: white;
  border-radius: 49% 51% 71% 29% / 54% 42% 58% 46% ;
  right: 40px;
  top: -40px;
  text-align: center;
  z-index: 4;
}


//JACK

.jack {
  position: absolute;
  width: 95%;
  height: 95%;
  left: 18%;
  top: 7%;
  z-index: 3;
}

.head {
  position: absolute;
  width: 11%;
  height: 11%;
  background: $jack;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  top: 11%;
  left: 16%;
}

.head-copy {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  background: $jack;
  z-index: 2;
}

.left-eye {
  position: absolute;
  width: 30%;
  height: 36%;
  border-radius: 60% 40% 53% 47% / 50% 50% 50% 50%;
  background: $black;
  top: 32%;
  left: 16%;
  transform: rotate(10deg);
}

.right-eye {
  position: absolute;
  width: 30%;
  height: 36%;
  border-radius: 60% 40% 53% 47% / 50% 50% 50% 50%;
  background: $black;
  top: 32%;
  left: 60%;
  transform: rotate(-10deg) scaleX(-1);
}

.left-nostril {
  position: absolute;
  width: 5%;
  height: 8%;
  border-radius: 0% 100% 25% 75% / 0% 75% 25% 100%;
  background: $black;
  top: 65%;
  left: 48%;
  transform: scaleX(-1);
}

.right-nostril {
  position: absolute;
  width: 5%;
  height: 8%;
  border-radius: 0% 100% 25% 75% / 0% 75% 25% 100%;
  background: $black;
  top: 65.5%;
  left: 58%;
  transform: scaleX(1);
}

.smile {
  position: absolute;
  width: 90%;
  height: 60%;
  border-radius: 50%;
  border: 1px solid;
  background: transparent;
  border-color: transparent transparent $black transparent;
  top: 26%;
  left: 5%;
}

.stitch {
  position: absolute;
  width: 1px;
  height: 20%;
  background: $black;
}

.s1 {
  top: 76%;
  left: 15%;
}

.s2 {
  top: 83%;
  left: 28%;
}

.s3 {
  top: 88%;
  left: 41%;
}

.s4 {
  top: 90%;
  left: 54%;
}

.s5 {
  top: 87%;
  left: 67%;
}

.s6 {
  top: 80%;
  left: 80%;
}

.hat-front {
  position: absolute;
  width: 87%;
  height: 65%;
  background: $red;
  border-radius: 30% 70% 50% 50% / 100% 100% 0% 0%;
  top: -45%;
  left: 7%;
  z-index: 2;
}

.hat-tail {
  position: absolute;
  width: 70%;
  height: 140%;
  border-radius: 50%;
  background: $red;
  z-index: -1;
  left: -25%;
  top: -51%;
  transform: rotate(30deg);
  z-index: 1;
}

.hat-tip {
  position: absolute;
  width: 40%;
  height: 50%;
  background: $red;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  top: 58%;
  left: -60%;
  transform: rotate(45deg);
  z-index: 1;
}

.hat-ball {
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: white;
  left: -73%;
  top: 93%;
  z-index: 1;
}

.hat-lining {
  position: absolute;
  width: 115%;
  height: 45%;
  border-radius: 20px;
  background: white;
  top: 63%;
  left: -6%;
}

.beard {
  position: absolute;
  width: 100%;
  height: 115%;
  background: white;
  border-radius: 100% 0% 55% 45% / 55% 0% 100% 45%;
  transform: rotate(140deg);
  z-index: 1;
  top: 50%;
  left: 0%;
}

.torso {
  position: absolute;
  width: 10%;
  height: 17%;
  background: $red;
  clip-path: polygon(0 0, 100% 0, 83% 100%, 17% 100%);
  top: 25%;
  left: 16.5%;
}

.belt {
  position: absolute;
  width: 9%;
  height: 2.5%;
  background: $black;
  border-radius: 5px;
  top: 35%;
  left: 17%;
}

.left-leg {
  position: absolute;
  width: 3.3%;
  height: 45%;
  background: $red;
  top: 41.5%;
  left: 18.3%;
  border-right: 1px solid black;
  border-radius: 0 0 10px 10px;
  clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
}

.right-leg {
  position: absolute;
  width: 3.3%;
  height: 45%;
  background: $red;
  top: 41.5%;
  left: 21.5%;
  border-radius: 0 0 10px 10px;
  clip-path: polygon(0 0, 100% 0, 89% 100%, 11% 100%);
}

.upper-arm {
  position: absolute;
  width: 2.5%;
  height: 16%;
  border-radius: 10px;
  background: $red;
}

.lower-arm {
  position: absolute;
  width: 2.5%;
  height: 15%;
  border-radius: 10px;
  background: $red;
}

.lau {
  top: 23%;
  left: 10%;
  transform: rotate(50deg);
}

.lal {
  top: 32%;
  left: 9.5%;
  transform: rotate(-50deg);
}

.rau {
  top: 25%;
  left: 27%;
  transform: rotate(-20deg);
}

.ral {
  top: 30%;
  left: 35.4%;
  transform: rotate(-110deg);
}

.hand {
  position: absolute;
  background: $jack;
  width: 5.5%;
  height: 5.5%;
  border-radius: 15% 85% 0% 100% / 15% 100% 0% 85%;
}

.hand-right {
  left: 41%;
  top: 32%;
  transform: rotate(-40deg);
}

.hand-left {
  left: 14%;
  top: 43%;
  transform: rotate(30deg);
  z-index: 3;
}

.arm-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: arm-lift 3s linear 200ms infinite;
}

.boot {
  position: absolute;
  background: $black;
  width: 100%;
  height: 30%;
  bottom: 0%;
  z-index: 3;
  border-radius: 0 0 10px 10px;
}

.boot-bottom {
  position: absolute;
  width: 7%;
  height: 3%;
  border-radius: 50%;
  background: $black;
}

.br {
  top: 86%;
  left: 18%;
  transform: rotate(40deg);
}

.bl {
  top: 85%;
  left: 22%;
  transform: rotate(15deg);
}

.boot-lining {
  position: absolute;
  width: 3.5%;
  height: 1.5%;
  background: white;
  border-radius: 10px;
}

.blr {
  top: 73%;
  left: 18%;
}

.bll {
  top: 73%;
  left: 21.5%;
}

//ZERO

.zero {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: float 5s linear .1s infinite;
  z-index: 3;
}

.head-zero {
  position: absolute;
  width: 7%;
  height: 7%;
  background: $zero;
  border-radius: 50%;
  left: 63%;
  top: 62%;
  transform: scaleX(-1) rotate(10deg);
  z-index: 4;
}

.snout {
  position: absolute;
  width: 145%;
  height: 50%;
  border-radius: 50%;
  border-bottom: 1.1rem solid $zero;
  background: transparent;
  left: -50%;
  top: 10%;
  transform: rotate(-15deg);
}

.snout-cover {
  position: absolute;
  width: 65%;
  height: 20%;
  border-radius: 50%;
  border-bottom: 0.5rem solid $zero;
  background: transparent;
  left: -48%;
  top: 42%;
  transform: rotate(-30deg);
}

.zero-ear {
  position: absolute;
  width: 75%;
  height: 75%;
  background: $zero;
  border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
}

.zel {
  top: -40%;
  left: 85%;
  transform: rotate(15deg);
}

.zer {
  top: -60%;
  left: 40%;
}

.zero-body {
  position: absolute;
  width: 17%;
  height: 9%;
  background: $zero;
  border-radius: 76% 24% 27% 73% / 69% 74% 26% 31%;
  top: 67%;
  left: 50%;
  z-index: 3;
  transform: rotate(5deg);
}

.zero-nose {
  position: absolute;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background: $red;
  right: 140%;
  top: 60%;
}

.zero-eye {
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: $black;
  right: 61%;
  top: 24%;
}

.zero-smile {
  position: absolute;
  width: 80%;
  height: 40%;
  border-radius: 50%;
  background: transparent;
  border: 2px solid;
  border-color: transparent transparent $black transparent;
  top: 51%;
  right: 60%;
  transform: rotate(-20deg);
}

.zero-collar {
  position: absolute;
  background: transparent;
  width: 50%;
  height: 10%;
  border-radius: 50%;
  border: 4px solid;
  border-color: transparent transparent $red transparent;
  transform: rotate(-45deg);
  top: 64%;
  left: 47%;
}

.snowflake {
  position: absolute;
  width: 2%;
  height: 2%;
  border-radius: 50%;
  background: white;
}

.snow1 {
  right: 10%;
  top: 20%;
  animation: snowfall 3s linear 50ms infinite;
}

.snow2 {
  right: 20%;
  top: 12%;
  animation: snowfall 2.5s linear 400ms infinite;
}

.snow3 {
  right: 35%;
  top: 5%;
    animation: snowfall 3s linear 100ms infinite;
}

.snow4 {
  right: 50%;
  top: 4%;
    animation: snowfall 2.8s linear 1ms infinite;
}

.snow5 {
  right: 67%;
  top: 7%;
  animation: snowfall 3s linear 500ms infinite;
}

.snow6 {
  right: 25%;
  top: 30%;
  animation: snowfall 3s linear 100ms infinite;
}

.snow7 {
  right: 40%;
  top: 20%;
    animation: snowfall 3s linear 600ms infinite;
}

.snow8 {
  right: 5%;
  top: 30%;
    animation: snowfall 3s linear 180ms infinite;
}


//ANIMATIONS


@keyframes snowfall {
  0% {
    filter: opacity(100%);
    transform: translate(0,0);
  }
   100% {
    filter: opacity(0%);
     transform: translate(-1000%, 2500%);
  }
}

@keyframes float {
  0% {
    transform: translate(0%, 0%);
  }
  25% {
    transform: translate(-1%, 1%);
    color: pink;
  }
  50% {
    transform: translate(-1%, 0%);
  }
    75% {
    transform: translate(0%, 1%);
  }
    100% {
    transform: translate(0%, 0%);
  }
  
}

@keyframes arm-lift {
  0% {
    transform: rotate(0);
  }
  
  50% {
    transform: rotate(-12deg) translateY(-4%) translateX(3%);
  }
  
  100% {
    transform: rotate(0);
  }
}
              
            
!

JS

              
                const mute = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>volume_up</title>
    <desc>Created with Sketch.</desc>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-817.000000, -997.000000)">
            <g id="AV" transform="translate(100.000000, 852.000000)">
                <g id="-Round-/-AV-/-volume_up" transform="translate(714.000000, 142.000000)">
                    <g transform="translate(0.000000, 0.000000)">
                        <rect id="Rectangle-Copy-86" x="0" y="0" width="24" height="24"></rect>
                        <path d="M3,10 L3,14 C3,14.55 3.45,15 4,15 L7,15 L10.29,18.29 C10.92,18.92 12,18.47 12,17.58 L12,6.41 C12,5.52 10.92,5.07 10.29,5.7 L7,9 L4,9 C3.45,9 3,9.45 3,10 Z M16.5,12 C16.5,10.23 15.48,8.71 14,7.97 L14,16.02 C15.48,15.29 16.5,13.77 16.5,12 Z M14,4.45 L14,4.65 C14,5.03 14.25,5.36 14.6,5.5 C17.18,6.53 19,9.06 19,12 C19,14.94 17.18,17.47 14.6,18.5 C14.24,18.64 14,18.97 14,19.35 L14,19.55 C14,20.18 14.63,20.62 15.21,20.4 C18.6,19.11 21,15.84 21,12 C21,8.16 18.6,4.89 15.21,3.6 C14.63,3.37 14,3.82 14,4.45 Z" id="icon-color" fill="#1D1D1D"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>`;

const unmute = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="9px" height="14px" viewBox="0 0 9 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
    <title>volume_mute</title>
    <desc>Created with Sketch.</desc>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-754.000000, -999.000000)">
            <g id="AV" transform="translate(100.000000, 852.000000)">
                <g id="-Round-/-AV-/-volume_mute" transform="translate(646.000000, 142.000000)">
                    <g>
                        <rect id="Rectangle-Copy-84" x="0" y="0" width="24" height="24"></rect>
                        <path d="M8,10 L8,14 C8,14.55 8.45,15 9,15 L12,15 L15.29,18.29 C15.92,18.92 17,18.47 17,17.58 L17,6.41 C17,5.52 15.92,5.07 15.29,5.7 L12,9 L9,9 C8.45,9 8,9.45 8,10 Z" id="icon-color" fill="#1D1D1D"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>`;

const pauseSVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="pause" width="15px" height="15px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>pause [#1006]</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icon-color" transform="translate(-227.000000, -3765.000000)" fill="#000000">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M172,3605 C171.448,3605 171,3605.448 171,3606 L171,3612 C171,3612.552 171.448,3613 172,3613 C172.552,3613 173,3612.552 173,3612 L173,3606 C173,3605.448 172.552,3605 172,3605 M177,3606 L177,3612 C177,3612.552 176.552,3613 176,3613 C175.448,3613 175,3612.552 175,3612 L175,3606 C175,3605.448 175.448,3605 176,3605 C176.552,3605 177,3605.448 177,3606" id="pause-[#1006]"></path>
            </g>
        </g>
    </g>
</svg>`

const playSVG = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="14px" viewBox="0 0 11 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
    <title>play_arrow</title>
    <desc>Created with Sketch.</desc>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rounded" transform="translate(-753.000000, -955.000000)">
            <g id="AV" transform="translate(100.000000, 852.000000)">
                <g id="-Round-/-AV-/-play_arrow" transform="translate(646.000000, 98.000000)">
                    <g>
                        <rect id="Rectangle-Copy-50" x="0" y="0" width="24" height="24"></rect>
                        <path d="M7,6.82 L7,17.18 C7,17.97 7.87,18.45 8.54,18.02 L16.68,12.84 C17.3,12.45 17.3,11.55 16.68,11.15 L8.54,5.98 C7.87,5.55 7,6.03 7,6.82 Z" id="icon-color" fill="#1D1D1D"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>`

const player = document.getElementById("player");
const playButton = document.getElementById("play-button");
const muteButton = document.getElementById("mute-button");
let isPlaying = false;

function togglePlay() {
  isPlaying ? player.pause() : player.play();
}

player.onplaying = function () {
  isPlaying = true;
  playButton.innerHTML = pauseSVG;
};

player.onpause = function () {
  isPlaying = false;
  playButton.innerHTML = playSVG;
};

function toggleMute() {
  player.muted = !player.muted;
  player.muted
    ? (muteButton.innerHTML = unmute)
    : (muteButton.innerHTML = mute);
}

              
            
!
999px

Console