Play ⇄ pause morph

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/morph/play-pause-morph.html
  Desc   : Play ⇄ pause icon morph on click
  ============================================================
-->
<button class="sg-play-pause-morph" type="button" aria-pressed="false" aria-label="Play" style="--sg-color:#7F77DD; --sg-size:64px;">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M8 5 L13 7.1 L13 16.9 L8 19 Z" />
    <path d="M13 7.1 L18 9.2 L18 14.8 L13 16.9 Z" />
  </svg>
</button>
<script>
  document.querySelectorAll('.sg-play-pause-morph:not([data-sg-init])').forEach(function (btn) {
    btn.setAttribute('data-sg-init', '');
    var shapes = {
      play:  ['M8 5 L13 7.1 L13 16.9 L8 19 Z', 'M13 7.1 L18 9.2 L18 14.8 L13 16.9 Z'],
      pause: ['M7 5 L11 5 L11 19 L7 19 Z', 'M14.5 5 L18.5 5 L18.5 19 L14.5 19 Z']
    };
    btn.addEventListener('click', function () {
      var playing = btn.getAttribute('aria-pressed') !== 'true';
      btn.setAttribute('aria-pressed', playing);
      btn.setAttribute('aria-label', playing ? 'Pause' : 'Play');
      btn.querySelectorAll('path').forEach(function (p, i) {
        var d = shapes[playing ? 'pause' : 'play'][i];
        p.setAttribute('d', d);
        p.style.d = 'path("' + d + '")';
      });
    });
  });
</script>
<style>
  .sg-play-pause-morph {
    appearance: none;
    border: 2px solid var(--sg-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    width: var(--sg-size);
    height: var(--sg-size);
    display: inline-grid;
    place-items: center;
    transition: background 0.2s ease;
  }
  .sg-play-pause-morph:hover {
    background: rgba(127, 119, 221, 0.12);
  }
  .sg-play-pause-morph svg {
    width: 62%;
    height: 62%;
  }
  .sg-play-pause-morph path {
    fill: var(--sg-color);
    transition: d 0.35s ease;
  }
</style>