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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <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>
              
            
!

CSS

              
                *
  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%))
              
            
!

JS

              
                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)
  }
})

              
            
!
999px

Console