GOOV logo/icon transition

by PhilQ

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 3851.124 2257.211"
  preserveAspectRatio="xMinYMid slice"
>
  <defs>
    <style>
      .st0 {
        fill: #083553; /* blue */
      }

      .st1, .st4 {
        fill: none;
      }

      .st3 {
        fill: #f4bf36; /* yellow */
      }

      .st4 {
        stroke: #083553; /* blue */
        stroke-width: 18.315px;
        stroke-miterlimit: 10;
      }
    </style>
    <clipPath id="clip-spot-inverse">
      <path class="st1" d="M0,0v2257.211h3851.124V0H0ZM74.836,2105.674L15.326,35.613l1975.771,2070.143-1916.261-.082Z"></path>
    </clipPath>
    <clipPath id="clip-spot">
      <path class="st1" d="M74.836,2105.674L15.326,35.613l1975.771,2070.143-1916.261-.082Z"></path>
    </clipPath>
    <path id="crown-path2" d="M1675.093,900.555C1794.516,222.323,1078.835-14.581,891.647,202.897" />
    <path id="crown-path-base" d="M1642.565,999.359C1791.138,276.436,907.112,114.272,880.215,360.684" />
    <path id="crown-path-quarter" d="M1655.714,948.366C1731.685,310.155,996.944,88.82,888.819,287.279" />
    <path id="crown-path" d="M1671.634,886.622C1747.606,248.412,996.944,0,888.819,198.459" />
  </defs>

  <!-- <use href="#crown-path" stroke="red" stroke-width="3" fill="none" /> -->

  <g id="Kroon_Logo2" style="display: none">
    <path class="st0" d="M1771.233,1021.973c-111.858-57.769-239.272-59.359-240.543-59.37l-.634-18.427c5.414.038,133.898,1.641,250.333,61.786l-9.157,16.011Z"></path>
    <path class="st0" d="M1538.241,998.058l-.911-18.429c4.924-.028,121.712-.113,217.295,53.698l-9.83,15.645c-90.479-50.929-205.406-50.923-206.554-50.915Z"></path>
    <path class="st0"...

CSS

body {
  padding: 100px;
}

svg {
  --ratio-logo: 3851.124/2257.211;
  --ratio-icon: 2002.0293/2250.9131;
  --duration: 0.5s;
  --duration-crown: 0.5s;
  --timing: ease-in-out;
  --timing-crown: ease-in-out;
  /* --scale-letters: 1.6710412485828627; */ /* from G-height */
  /* --scale-letters: 1.6715601792302401; */ /* from G+crown-height */
  --scale-letters: 1.6710410245432028; /* from G-width */
  
  /* Original crown */
  --origin-crown: 1675.0926px 900.5552px; /* First (M) coords from crown path */
  --scale-crown: 1.4541032968714833;
  --rotate-crown: -372.584deg;
  
  /* New crown */
  /* --origin-crown-base: 1642.565px 999.359px; */
  /* --origin-crown-quarter: 1655.714px 948.366px; */
  --origin-crown: 1671.634px 886.622px;
  --scale-crown: 1.392967;
  --rotate-crown: -374.45897066deg;


  max-width: 100%;
  height: 400px;
  /* width: 400px; */
  aspect-ratio: var(--ratio-logo);
  /* background-color: #f1f1f1; */
  transition: all var(--duration) linear;
}

svg.icon {
  /* height: 200px; */
  /* width: 100px; */
  aspect-ratio: var(--ratio-icon);
}

svg #Yellow,
svg #Blue {
  transform-origin: 116.3807px 1896.6492px; /* left-bottom of logo-G */
  transform: scale(1) translate(0, 0);
  transition: transform var(--duration) var(--timing);
}

svg.icon #Yellow,
svg.icon #Blue {
  /* difference with: left-bottom of icon-G */
  /* 129.2115-116.3807, 1880.1919-1896.6492 */
  transform: translate(12.8308px, -16.4573px) scale(var(--scale-letters));
}

/* TODO: Hide crown */
svg #Kroon_Logo {
  /* display: none; */
}

svg #Y_OOV_Muziektheater,
svg #B_OOV_Muziektheater {
  transition: opacity var(--duration) var(--timing);
  opacity: 1;
}
svg.icon #Y_OOV_Muziektheater,
svg.icon #B_OOV_Muziektheater {
  opacity: 0;
}

svg #Kroon_Logo {
  transform-origin: var(--origin-crown);
  transform: scale(1);
  transition: all var(--duration-crown) var(--timing-crown);
  /* offset-path:...

JavaScript

const svg = document.querySelector('svg');
svg.addEventListener('click', (e) => {
  e.preventDefault();
  svg.classList.toggle('icon');
}, { capture: true });