<button>
  <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
    <!-- Sprinkles -->
    <g class="heart__fragments">
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
      <circle cx="20" cy="20" r="2" class="heart__fragment" />
    </g>
    <g class="heart__beat">
      <!-- First little stroke line -->
      <path d="M10.682 36.832a2.453 2.453 0 001.595-3.128 2.453 2.453 0 00-3.067-1.656 2.453 2.453 0 00-1.656 3.066 2.453 2.453 0 003.067 1.718z" class="heart__segment heart__segment--start"/>
      <path d="M11.202 36.895a2.446 2.446 0 002.14-2.751 2.446 2.446 0 00-2.752-2.201 2.446 2.446 0 00-2.2 2.812 2.446 2.446 0 002.812 2.14z" class="heart__segment heart__segment--start"/>
      <path d="M12.46 36.9a2.516 2.516 0 002.2-2.893 2.516 2.516 0 00-2.83-2.2 2.516 2.516 0 00-2.2 2.83 2.516 2.516 0 002.83 2.263z" class="heart__segment heart__segment--start"/>
      <path d="M13.993 36.706a2.584 2.584 0 002.261-2.907 2.584 2.584 0 00-2.907-2.262 2.584 2.584 0 00-2.326 2.908 2.584 2.584 0 002.972 2.26z" class="heart__segment heart__segment--start"/>
      <path d="M15.376 36.44a2.515 2.515 0 002.2-2.83 2.515 2.515 0 00-2.83-2.264 2.515 2.515 0 00-2.2 2.893 2.515 2.515 0 002.83 2.2z" class="heart__segment heart__segment--start"/>
      <path d="M16.556 36.184a2.521 2.521 0 002.143-2.9 2.521 2.521 0 00-2.899-2.142 2.521 2.521 0 00-2.143 2.899 2.521 2.521 0 002.9 2.143z" class="heart__segment heart__segment--start"/>
      <path d="M17.772 35.933a2.522 2.522 0 002.017-3.026 2.522 2.522 0 00-3.026-2.018 2.522 2.522 0 00-1.955 3.027 2.522 2.522 0 002.964 2.017z" class="heart__segment heart__segment--start"/>
      <path d="M18.976 35.641a2.443 2.443 0 001.833-3.054 2.443 2.443 0 00-3.054-1.771 2.443 2.443 0 00-1.772 3.054 2.443 2.443 0 003.054 1.771z" class="heart__segment heart__segment--start"/>
      <path d="M20.07 35.305a2.588 2.588 0 001.553-3.365 2.588 2.588 0 00-3.365-1.553 2.588 2.588 0 00-1.552 3.365 2.588 2.588 0 003.364 1.553z" class="heart__segment heart__segment--start"/>
      <path d="M21.368 34.712a2.599 2.599 0 001.3-3.509 2.599 2.599 0 00-3.38-1.3 2.599 2.599 0 00-1.364 3.444c.585 1.3 2.08 1.95 3.444 1.3z" class="heart__segment heart__segment--start"/>
      <!-- End little stroke line -->
      <path d="M12.297 30.225c1.073.975 2.682.975 3.706-.146.976-1.025.976-2.683-.097-3.658-1.073-.976-2.683-.976-3.707.097-.975 1.073-.975 2.683.098 3.707z" class="heart__segment heart__segment--middle"/>
      <path d="M11.224 29.103c.975 1.024 2.585 1.122 3.658.098 1.072-.976 1.121-2.585.146-3.658a2.585 2.585 0 00-3.707-.146 2.585 2.585 0 00-.146 3.706z" class="heart__segment heart__segment--middle"/>
      <path d="M10.151 27.884c.975 1.122 2.536 1.268 3.658.293 1.121-.976 1.268-2.536.341-3.658a2.585 2.585 0 00-3.706-.293 2.585 2.585 0 00-.293 3.658z" class="heart__segment heart__segment--middle"/>
      <path d="M9.127 26.665a2.585 2.585 0 003.706.439 2.585 2.585 0 00.39-3.707 2.585 2.585 0 00-3.657-.39 2.585 2.585 0 00-.44 3.658z" class="heart__segment heart__segment--middle"/>
      <path d="M8.2 25.445c.83 1.17 2.439 1.415 3.658.488 1.17-.829 1.414-2.438.536-3.609a2.585 2.585 0 00-3.657-.536c-1.17.878-1.463 2.438-.537 3.657z" class="heart__segment heart__segment--middle"/>
      <path d="M7.322 24.129c.78 1.219 2.341 1.56 3.56.731 1.22-.829 1.561-2.438.732-3.609a2.585 2.585 0 00-3.609-.731 2.585 2.585 0 00-.731 3.609z" class="heart__segment heart__segment--middle"/>
      <path d="M6.445 22.812a2.585 2.585 0 003.56.927 2.585 2.585 0 00.975-3.61 2.585 2.585 0 00-3.609-.926 2.585 2.585 0 00-.975 3.609z" class="heart__segment heart__segment--middle"/>
      <path d="M5.664 21.446a2.585 2.585 0 003.512 1.122 2.585 2.585 0 001.17-3.511 2.585 2.585 0 00-3.463-1.17 2.585 2.585 0 00-1.219 3.51z" class="heart__segment heart__segment--middle"/>
      <path d="M5.03 19.983c.537 1.317 2.049 1.951 3.414 1.463a2.585 2.585 0 001.463-3.413 2.585 2.585 0 00-3.414-1.463 2.585 2.585 0 00-1.463 3.413z" class="heart__segment heart__segment--middle"/>
      <path d="M4.543 18.472a2.585 2.585 0 003.218 1.755 2.585 2.585 0 001.805-3.218 2.585 2.585 0 00-3.268-1.805 2.585 2.585 0 00-1.804 3.268z" class="heart__segment heart__segment--middle"/>
      <path d="M4.152 16.911c.244 1.463 1.561 2.39 3.024 2.146a2.602 2.602 0 002.146-3.024 2.602 2.602 0 00-3.024-2.146c-1.463.244-2.39 1.56-2.146 3.024z" class="heart__segment heart__segment--middle"/>
      <path d="M4.006 15.35c0 1.463 1.22 2.536 2.731 2.439 1.463 0 2.536-1.22 2.439-2.682 0-1.464-1.22-2.585-2.683-2.488-1.463.05-2.584 1.22-2.487 2.731z" class="heart__segment heart__segment--middle"/>
      <path d="M4.006 13.741a2.587 2.587 0 002.439 2.78 2.512 2.512 0 002.78-2.341c.146-1.463-.976-2.731-2.39-2.829-1.463-.146-2.683.927-2.829 2.39z" class="heart__segment heart__segment--middle"/>
      <path d="M4.25 12.18c-.293 1.415.585 2.78 2 3.073 1.463.292 2.828-.537 3.12-1.95.293-1.464-.585-2.83-1.999-3.122-1.463-.341-2.828.536-3.121 1.95z" class="heart__segment heart__segment--middle"/>
      <path d="M4.689 10.62c-.488 1.365.146 2.828 1.512 3.414 1.365.487 2.877-.195 3.414-1.512.487-1.415-.196-2.878-1.512-3.414-1.415-.488-2.878.146-3.414 1.512z" class="heart__segment heart__segment--middle"/>
      <path d="M5.372 9.206a2.585 2.585 0 00.975 3.56 2.578 2.578 0 003.56-.927c.732-1.268.342-2.829-.975-3.56a2.585 2.585 0 00-3.56.927z" class="heart__segment heart__segment--middle"/>
      <path d="M6.347 7.889c-.975 1.121-.878 2.73.244 3.657 1.122.976 2.73.878 3.706-.243.976-1.073.83-2.731-.292-3.658a2.585 2.585 0 00-3.658.244z" class="heart__segment heart__segment--middle"/>
      <path d="M7.469 6.816a2.585 2.585 0 00-.39 3.609 2.585 2.585 0 003.657.487 2.585 2.585 0 00.44-3.706 2.585 2.585 0 00-3.707-.439z" class="heart__segment heart__segment--middle"/>
      <path d="M8.834 5.89a2.585 2.585 0 00-1.121 3.56 2.585 2.585 0 003.56 1.121 2.585 2.585 0 001.073-3.56 2.585 2.585 0 00-3.512-1.122z" class="heart__segment heart__segment--middle"/>
      <path d="M10.297 5.304A2.585 2.585 0 008.59 8.572a2.585 2.585 0 003.268 1.755 2.585 2.585 0 001.707-3.267 2.585 2.585 0 00-3.268-1.756z" class="heart__segment heart__segment--middle"/>
      <path d="M11.907 4.963c-1.463.195-2.439 1.463-2.341 2.926.195 1.463 1.463 2.438 2.926 2.292 1.463-.146 2.438-1.463 2.292-2.926-.195-1.463-1.463-2.439-2.926-2.292z" class="heart__segment heart__segment--middle"/>
      <path d="M13.467 4.963c-1.463-.098-2.633.975-2.78 2.438a2.587 2.587 0 002.439 2.78 2.587 2.587 0 002.78-2.439 2.587 2.587 0 00-2.439-2.78z" class="heart__segment heart__segment--middle"/>
      <path d="M15.077 5.206c-1.463-.34-2.78.488-3.122 1.951-.34 1.415.488 2.78 1.951 3.121 1.414.342 2.78-.487 3.121-1.95.342-1.463-.487-2.78-1.95-3.122z" class="heart__segment heart__segment--middle"/>
      <path d="M16.588 5.645c-1.365-.487-2.828.147-3.365 1.512-.487 1.366.147 2.878 1.463 3.414 1.415.488 2.927-.146 3.414-1.512.488-1.365-.146-2.877-1.463-3.414z" class="heart__segment heart__segment--middle"/>
      <path d="M18.052 6.328a2.585 2.585 0 00-3.56 1.073 2.585 2.585 0 001.072 3.56c1.317.683 2.878.195 3.56-1.073.683-1.316.196-2.877-1.072-3.56z" class="heart__segment heart__segment--middle"/>
      <path d="M19.417 7.157a2.585 2.585 0 00-3.658.683 2.585 2.585 0 00.683 3.658c1.22.829 2.829.487 3.658-.732.829-1.17.487-2.78-.683-3.609z" class="heart__segment heart__segment--middle"/>
      <path d="M20.636 8.133a2.585 2.585 0 00-3.657.292c-.976 1.122-.83 2.731.292 3.658 1.122.975 2.78.829 3.707-.293.975-1.121.829-2.73-.342-3.657z" class="heart__segment heart__segment--middle"/>
      <path d="M21.807 9.206a2.585 2.585 0 00-3.658-.05 2.585 2.585 0 00-.097 3.658c.975 1.073 2.633 1.073 3.706.098 1.024-1.024 1.073-2.634.049-3.706z" class="heart__segment heart__segment--middle"/>
      <path d="M22.83 10.425a2.585 2.585 0 00-3.657-.488 2.585 2.585 0 00-.487 3.658 2.585 2.585 0 003.657.487 2.585 2.585 0 00.488-3.657z" class="heart__segment heart__segment--middle"/>
      <path d="M23.757 11.693a2.585 2.585 0 00-3.56-.927 2.585 2.585 0 00-.975 3.56 2.585 2.585 0 003.56.976 2.585 2.585 0 00.975-3.56z" class="heart__segment heart__segment--middle"/>
      <path d="M24.391 13.156c-.487-1.366-1.95-2-3.316-1.512a2.6 2.6 0 101.805 4.877c1.365-.488 2.048-1.95 1.56-3.365z" class="heart__segment heart__segment--middle"/>
      <path d="M24.83 14.765c-.195-1.463-1.463-2.487-2.926-2.34-1.463.146-2.438 1.462-2.292 2.877.146 1.463 1.463 2.438 2.877 2.34 1.464-.195 2.439-1.463 2.341-2.926z" class="heart__segment heart__segment--middle"/>
      <path d="M24.782 16.375c.195-1.464-.78-2.732-2.244-2.927-1.463-.243-2.73.732-2.926 2.146a2.541 2.541 0 002.195 2.975c1.463.195 2.73-.731 2.926-2.194z" class="heart__segment heart__segment--middle"/>
      <path d="M24.343 17.935c.585-1.365 0-2.877-1.366-3.414a2.585 2.585 0 00-3.414 1.317 2.585 2.585 0 001.317 3.414c1.366.585 2.877 0 3.414-1.317z" class="heart__segment heart__segment--middle"/>
      <path d="M23.465 19.3c.975-1.121.878-2.73-.244-3.706a2.585 2.585 0 00-3.658.244c-.975 1.073-.877 2.731.195 3.658 1.122.975 2.731.878 3.707-.195z" class="heart__segment heart__segment--middle"/>
      <path d="M22.197 20.325a2.585 2.585 0 00.975-3.56 2.585 2.585 0 00-3.511-1.024 2.585 2.585 0 00-1.024 3.56 2.585 2.585 0 003.56.975z" class="heart__segment heart__segment--middle"/>
      <path d="M20.636 20.861c1.463-.244 2.439-1.56 2.146-3.023-.244-1.463-1.56-2.39-2.975-2.146-1.463.244-2.438 1.56-2.146 3.023.244 1.463 1.561 2.39 3.024 2.146z" class="heart__segment heart__segment--middle"/>
      <path d="M19.027 20.861c1.463.244 2.78-.683 3.024-2.146.243-1.414-.683-2.78-2.097-3.023-1.464-.244-2.78.683-3.024 2.097-.293 1.463.634 2.78 2.097 3.072z" class="heart__segment heart__segment--middle"/>
      <path d="M17.515 20.276a2.553 2.553 0 003.56-.975c.732-1.22.342-2.78-.926-3.512a2.585 2.585 0 00-3.56.927 2.585 2.585 0 00.926 3.56z" class="heart__segment heart__segment--middle"/>
      <path d="M16.247 19.203a2.585 2.585 0 003.707.341 2.585 2.585 0 00.34-3.657 2.585 2.585 0 00-3.657-.342 2.585 2.585 0 00-.39 3.658z" class="heart__segment heart__segment--middle"/>
      <path d="M15.418 17.838a2.708 2.708 0 003.414 1.463 2.585 2.585 0 001.463-3.414 2.585 2.585 0 00-3.414-1.463 2.585 2.585 0 00-1.463 3.414z" class="heart__segment heart__segment--middle"/>
      <path d="M15.028 16.277c.195 1.463 1.463 2.438 2.926 2.195 1.463-.196 2.438-1.463 2.243-2.927-.195-1.463-1.463-2.438-2.926-2.243-1.463.195-2.438 1.463-2.243 2.926z" class="heart__segment heart__segment--middle"/>
      <path d="M14.98 14.619c-.147 1.463.877 2.73 2.34 2.926 1.463.098 2.682-.878 2.829-2.34.195-1.464-.878-2.732-2.293-2.878-1.463-.147-2.73.878-2.926 2.34z" class="heart__segment heart__segment--middle"/>
      <path d="M15.37 13.107c-.488 1.317.097 2.829 1.462 3.365 1.366.488 2.926-.146 3.414-1.463a2.585 2.585 0 00-1.463-3.414 2.585 2.585 0 00-3.414 1.463z" class="heart__segment heart__segment--middle"/>
      <path d="M16.1 11.693a2.585 2.585 0 00.879 3.56c1.268.731 2.828.341 3.608-.927.732-1.268.342-2.828-.926-3.56a2.585 2.585 0 00-3.609.878z" class="heart__segment heart__segment--middle"/>
      <path d="M16.979 10.327a2.585 2.585 0 00.487 3.658 2.585 2.585 0 003.61-.39 2.585 2.585 0 00-.44-3.707 2.585 2.585 0 00-3.657.488z" class="heart__segment heart__segment--middle"/>
      <path d="M18.052 9.157c-1.025 1.024-1.025 2.633 0 3.706 1.072.976 2.682.976 3.706-.049a2.665 2.665 0 000-3.706 2.585 2.585 0 00-3.706 0z" class="heart__segment heart__segment--middle"/>
      <path d="M19.222 8.084a2.585 2.585 0 00-.341 3.657c.926 1.122 2.536 1.317 3.657.342a2.572 2.572 0 00.342-3.658 2.585 2.585 0 00-3.658-.341z" class="heart__segment heart__segment--middle"/>
      <path d="M20.49 7.108a2.585 2.585 0 00-.732 3.658c.83 1.17 2.439 1.512 3.61.732 1.219-.83 1.56-2.439.73-3.658a2.585 2.585 0 00-3.608-.732z" class="heart__segment heart__segment--middle"/>
      <path d="M21.855 6.328a2.585 2.585 0 00-1.121 3.512 2.585 2.585 0 003.511 1.121 2.585 2.585 0 001.122-3.511 2.585 2.585 0 00-3.512-1.122z" class="heart__segment heart__segment--middle"/>
      <path d="M23.319 5.694a2.609 2.609 0 101.853 4.877c1.317-.488 2-2 1.463-3.365-.488-1.366-1.95-2.048-3.316-1.512z" class="heart__segment heart__segment--middle"/>
      <path d="M24.83 5.206a2.585 2.585 0 00-1.95 3.122c.341 1.463 1.707 2.292 3.12 1.95 1.464-.292 2.293-1.706 1.952-3.12-.342-1.415-1.707-2.293-3.122-1.952z" class="heart__segment heart__segment--middle"/>
      <path d="M26.391 4.963c-1.463.097-2.487 1.365-2.39 2.828.147 1.463 1.366 2.487 2.829 2.39a2.561 2.561 0 002.39-2.829c-.098-1.463-1.366-2.487-2.829-2.39z" class="heart__segment heart__segment--middle"/>
      <path d="M28 4.963c-1.463-.147-2.73.877-2.877 2.34-.146 1.464.878 2.732 2.292 2.878 1.463.146 2.731-.878 2.926-2.341.147-1.463-.878-2.731-2.34-2.877z" class="heart__segment heart__segment--middle"/>
      <path d="M29.56 5.304c-1.365-.488-2.828.293-3.267 1.707-.487 1.365.293 2.829 1.659 3.267 1.463.488 2.877-.292 3.316-1.658.488-1.463-.293-2.877-1.707-3.316z" class="heart__segment heart__segment--middle"/>
      <path d="M31.073 5.938a2.585 2.585 0 00-3.56 1.073 2.585 2.585 0 001.073 3.511c1.268.732 2.828.244 3.51-1.024.732-1.317.245-2.877-1.072-3.56z" class="heart__segment heart__segment--middle"/>
      <path d="M32.39 6.816a2.585 2.585 0 00-3.658.439 2.585 2.585 0 00.439 3.657 2.585 2.585 0 003.657-.438 2.585 2.585 0 00-.438-3.658z" class="heart__segment heart__segment--middle"/>
      <path d="M33.56 7.889a2.585 2.585 0 00-3.706-.195 2.585 2.585 0 00-.196 3.706c.976 1.073 2.585 1.17 3.658.195 1.122-.975 1.22-2.585.244-3.706z" class="heart__segment heart__segment--middle"/>
      <path d="M34.535 9.206a2.585 2.585 0 00-3.609-.878 2.585 2.585 0 00-.877 3.609 2.585 2.585 0 003.609.829 2.585 2.585 0 00.877-3.56z" class="heart__segment heart__segment--middle"/>
      <path d="M35.218 10.62a2.585 2.585 0 00-3.414-1.463 2.585 2.585 0 00-1.463 3.414 2.682 2.682 0 003.414 1.463 2.585 2.585 0 001.463-3.414z" class="heart__segment heart__segment--middle"/>
      <path d="M35.706 12.18c-.293-1.463-1.707-2.34-3.121-1.95-1.463.292-2.293 1.658-1.951 3.072.292 1.463 1.658 2.292 3.121 1.95 1.414-.292 2.292-1.657 1.95-3.12z" class="heart__segment heart__segment--middle"/>
      <path d="M35.95 13.741c-.098-1.463-1.366-2.536-2.829-2.438-1.463.146-2.487 1.365-2.39 2.828.098 1.463 1.366 2.536 2.829 2.439 1.463-.147 2.487-1.366 2.39-2.829z" class="heart__segment heart__segment--middle"/>
      <path d="M35.998 15.302c.05-1.463-1.024-2.634-2.487-2.731a2.587 2.587 0 00-2.78 2.438c-.048 1.463 1.025 2.682 2.439 2.78 1.512.097 2.73-.976 2.828-2.439z" class="heart__segment heart__segment--middle"/>
      <path d="M35.755 16.911c.292-1.463-.634-2.78-2.049-3.072-1.463-.244-2.828.682-3.072 2.097-.293 1.463.634 2.78 2.097 3.023 1.463.293 2.78-.634 3.024-2.048z" class="heart__segment heart__segment--middle"/>
      <path d="M35.413 18.423c.39-1.366-.39-2.78-1.755-3.219-1.415-.439-2.83.341-3.268 1.756a2.532 2.532 0 001.756 3.218c1.414.44 2.828-.34 3.267-1.755z" class="heart__segment heart__segment--middle"/>
      <path d="M34.877 19.935a2.585 2.585 0 00-1.463-3.414A2.585 2.585 0 0030 17.984a2.585 2.585 0 001.463 3.414 2.585 2.585 0 003.414-1.463z" class="heart__segment heart__segment--middle"/>
      <path d="M34.243 21.398c.634-1.317.097-2.829-1.22-3.512a2.585 2.585 0 00-3.51 1.22 2.585 2.585 0 001.218 3.51c1.366.635 2.878.098 3.512-1.218z" class="heart__segment heart__segment--middle"/>
      <path d="M33.511 22.763c.732-1.268.293-2.78-.975-3.511a2.585 2.585 0 00-3.61.975 2.585 2.585 0 001.025 3.56c1.268.732 2.829.293 3.56-.975z" class="heart__segment heart__segment--middle"/>
      <path d="M32.682 24.129c.78-1.22.488-2.78-.78-3.56a2.585 2.585 0 00-3.609.78 2.585 2.585 0 00.78 3.609c1.268.78 2.829.439 3.61-.83z" class="heart__segment heart__segment--middle"/>
      <path d="M31.804 25.445a2.585 2.585 0 00-.634-3.608 2.585 2.585 0 00-3.609.585 2.585 2.585 0 00.634 3.657 2.585 2.585 0 003.61-.634z" class="heart__segment heart__segment--middle"/>
      <path d="M30.878 26.713a2.585 2.585 0 00-.488-3.657 2.585 2.585 0 00-3.658.488 2.585 2.585 0 00.488 3.657 2.585 2.585 0 003.658-.488z" class="heart__segment heart__segment--middle"/>
      <path d="M29.902 27.933c.976-1.073.78-2.731-.341-3.658a2.585 2.585 0 00-3.658.293c-.975 1.121-.829 2.73.293 3.706 1.122.927 2.73.78 3.706-.341z" class="heart__segment heart__segment--middle"/>
      <path d="M28.878 29.152c.976-1.073.927-2.682-.146-3.707-1.073-.975-2.731-.975-3.707.098-.975 1.122-.975 2.731.147 3.706 1.073.976 2.682.976 3.706-.097z" class="heart__segment heart__segment--middle"/>
      <path d="M27.757 30.225c1.024-.976 1.072-2.585.097-3.658a2.585 2.585 0 00-3.706-.097 2.585 2.585 0 00-.098 3.657c.975 1.073 2.634 1.122 3.707.147z" class="heart__segment heart__segment--middle"/>
      <path d="M26.537 31.298a2.572 2.572 0 00.342-3.658 2.585 2.585 0 00-3.658-.341 2.585 2.585 0 00-.341 3.657c.975 1.122 2.536 1.268 3.657.342z" class="heart__segment heart__segment--middle"/>
      <path d="M25.318 32.273c1.17-.878 1.414-2.438.537-3.658-.878-1.17-2.439-1.414-3.658-.536a2.585 2.585 0 00-.537 3.658c.878 1.17 2.439 1.414 3.658.536z" class="heart__segment heart__segment--middle"/>
      <path d="M24.001 33.15a2.585 2.585 0 00.78-3.56 2.585 2.585 0 00-3.608-.78 2.585 2.585 0 00-.78 3.61A2.585 2.585 0 0024 33.2z" class="heart__segment heart__segment--middle"/>
      <path d="M22.685 34.029a2.585 2.585 0 00.975-3.61 2.585 2.585 0 00-3.609-.974 2.585 2.585 0 00-.975 3.608 2.585 2.585 0 003.609.976z" class="heart__segment heart__segment--middle"/>
      <path d="M21.368 34.712a2.585 2.585 0 001.17-3.512 2.585 2.585 0 00-3.511-1.17 2.585 2.585 0 00-1.17 3.511 2.585 2.585 0 003.56 1.17z" class="heart__segment heart__segment--middle"/>
      <path d="M18.69 34.84c1.317.682 2.828.146 3.511-1.171a2.65 2.65 0 00-1.121-3.511 2.585 2.585 0 00-3.512 1.17 2.585 2.585 0 001.122 3.511z" class="heart__segment heart__segment--middle"/>
      <!-- Ending Overlap -->
      <path d="M17.076 33.785a2.438 2.438 0 003.414-.927c.731-1.219.341-2.73-.878-3.413a2.487 2.487 0 00-3.414.926 2.438 2.438 0 00.927 3.414z" class="heart__segment heart__segment--end"/>
      <path d="M16.003 33.15c1.22.781 2.829.489 3.61-.78a2.55 2.55 0 00-.732-3.608 2.585 2.585 0 00-3.61.78 2.585 2.585 0 00.732 3.609z" class="heart__segment heart__segment--end"/>
      <path d="M14.735 32.224a2.585 2.585 0 003.61-.536 2.585 2.585 0 00-.489-3.658 2.585 2.585 0 00-3.657.537 2.585 2.585 0 00.487 3.657z" class="heart__segment heart__segment--end"/>
      <path d="M13.467 31.249c1.122.975 2.731.829 3.707-.341.926-1.073.78-2.731-.342-3.658a2.585 2.585 0 00-3.657.341c-.976 1.122-.83 2.731.292 3.658z" class="heart__segment heart__segment--end"/>
      <!-- End that -->
      <path class="heart__stroke" d="M20 35.04c-4.16 0-16-10.752-16-20.928C4 9.248 8.032 4.96 12.576 4.96c3.648 0 6.144 2.56 7.424 4.352 1.28-1.856 3.776-4.352 7.424-4.352C31.968 4.96 36 9.248 36 14.112c0 10.176-11.84 20.864-16 20.928zM12.576 7.328c-3.264 0-6.208 3.2-6.208 6.784 0 9.152 11.2 18.496 13.632 18.56 2.432-.064 13.632-9.408 13.632-18.56 0-3.584-2.944-6.784-6.208-6.784-4.032 0-6.272 4.672-6.336 4.736-.32.896-1.792.896-2.176 0 0 0-2.304-4.736-6.336-4.736z"/>
      <path class="heart__fill" d="M20 35.052c-4.148-.119-16-10.785-16-20.919 0-4.918 4.03-9.185 8.593-9.185 3.674 0 6.103 2.548 7.407 4.385 1.304-1.837 3.733-4.385 7.407-4.385C31.97 4.948 36 9.215 36 14.133c0 10.074-11.852 20.8-16 20.919z"/>
    </g>
  </svg>
</button>

*
  box-sizing border-box

body
  min-height 100vh
  background hsl(214, 14%, 10%)
  display flex
  align-items center
  justify-content center

:root
  --size 100px

button
  height var(--size)
  width var(--size)
  border-radius 50%
  transition background-color 0.25s
  border 0
  display flex
  align-items center
  justify-content center
  cursor pointer
  background-color transparent
  outline transparent

  &:hover
    background-color hsla(339, 91%, 46%, 0.15)

    .heart__stroke
      fill hsl(339, 91%, 46%)

  &.active:hover
    background-color transparent

svg
  height 50%
  width 50%

.heart
  // These two handle the gradient
  overflow visible !important
  &__fragment
    opacity 0
    fill 'hsl(%s, 95%, 50%)' % var(--hue)
  &__stroke
    fill hsl(0, 0%, 50%)
  &__fill
    fill hsl(339, 91%, 46%)
    display none
  &__segment
    fill 'hsl(%s, 90%, %s)' % (var(--hue, 0) calc(var(--lightness, 50) * 1%))

const { gsap, Physics2DPlugin } = window
gsap.registerPlugin(Physics2DPlugin)

let timeline
const CLICK = new Audio('https://assets.codepen.io/605876/click.mp3')
const SPARKLE = new Audio('https://assets.codepen.io/605876/sparkle.mp3')
const BUTTON = document.querySelector('button')

const STARTERS = document.querySelectorAll('.heart__segment--start')
const MIDS = [...document.querySelectorAll('.heart__segment--middle')].reverse()
const ENDERS = [...document.querySelectorAll('.heart__segment--end')].reverse()
const SEGMENTS = [...STARTERS, ...MIDS, ...ENDERS]

gsap.set(SEGMENTS, {
  '--lightness': index =>
    gsap.utils.mapRange(0, SEGMENTS.length, 94, 60, index),
})

gsap.set(SEGMENTS, { opacity: 0 })
gsap.set('.heart__beat', { transformOrigin: '50% 50%', yPercent: 5 })
gsap.set('.heart__fragment', { opacity: 0 })

const LIKE = () =>
  gsap
    .timeline({
      onStart: () => {
        gsap.set([SEGMENTS, '.heart__fragments'], { display: 'block' })
        gsap.set('.heart__stroke', { display: 'none' })
        gsap.set('.heart__fragment', {
          opacity: 0,
          '--hue': () => gsap.utils.random(0, 359),
        })
      },
      onComplete: () => {
        gsap.set([SEGMENTS, '.heart__fragments'], { display: 'none' })
      },
    })
    .set('.heart__beat', { '--hue': 180 })
    .set('.heart__segment--start', { opacity: 1 })
    .to([MIDS, ENDERS], {
      stagger: 0.005,
      opacity: 1,
      duration: 0.05,
    })
    .to(
      '.heart__beat',
      {
        duration: 0.5,
        '--hue': 360,
        ease: 'power1.in',
      },
      0
    )
    .to(
      STARTERS,
      {
        stagger: 0.025,
        opacity: 0,
        duration: 0.05,
      },
      0.2
    )
    .to(
      '.heart__beat',
      {
        scale: 1.5,
        duration: 0.25,
      },
      '>-0.15'
    )
    .to('.heart__beat', {
      scale: 1,
      duration: 0.35,
      ease: 'back.out(5)',
    })
    .to(
      '.heart__fill',
      {
        display: 'block',
      },
      '>-0.25'
    )
    .to(SEGMENTS, { opacity: 0 }, '>-0.25')
    .fromTo(
      '.heart__fragment',
      {
        opacity: 1,
      },
      {
        onStart: () => {
          SPARKLE.play()
        },
        ease: 'power4.in',
        opacity: 0,
        physics2D: {
          velocity: 90,
          angle: gsap.utils.distribute({
            base: 0,
            amount: 360,
            from: 'start',
          }),
          gravity: 0,
        },
        duration: () => gsap.utils.random(0.15, 0.65),
      },
      '>-0.725'
    )
    .timeScale(1.15)

BUTTON.addEventListener('click', () => {
  CLICK.play()
  BUTTON.classList.toggle('active')
  if (BUTTON.className.includes('active')) timeline = LIKE()
  else {
    gsap.set('.heart__stroke', { display: 'block' })
    gsap.set([SEGMENTS, '.heart__fragments'], { display: 'none' })
    timeline.pause()
    timeline.time(0)
  }
})