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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="container">
<svg class="heart" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none" rx="0" ry="0"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0227 5.64824C11.9859 5.60894 11.9482 5.57009 11.9098 5.53171C9.95722 3.57909 6.7914 3.57909 4.83877 5.53171C2.88615 7.48433 2.88615 10.6502 4.83877 12.6028C4.9581 12.7221 5.08195 12.8341 5.20978 12.9389L5.19233 12.9563L11.2229 19.8766C11.6192 20.3314 12.3251 20.3343 12.7252 19.8828L19.0132 12.7864C19.0789 12.7272 19.1434 12.666 19.2067 12.6028C21.1593 10.6502 21.1593 7.48433 19.2067 5.53171C17.254 3.57909 14.0882 3.57909 12.1356 5.53171C12.0972 5.57009 12.0596 5.60894 12.0227 5.64824Z" fill="#b477aa"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M16.1116 10.655C16.4812 10.2446 17.1135 10.2114 17.5239 10.581V10.581C17.9343 10.9505 17.9675 11.5828 17.5979 11.9933L15.1482 14.7139L14.2523 15.709C13.8827 16.1194 13.2504 16.1526 12.84 15.783V15.783C12.4296 15.4135 12.3964 14.7812 12.766 14.3707L14.6054 12.3279L16.1116 10.655Z" fill="#48DBFB" fill-opacity="0.3"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7.35738 14.52C7.35611 14.5199 7.35483 14.5197 7.35356 14.5195L7.70905 14.9124C7.95571 15.185 7.93356 15.6063 7.65966 15.8515C7.38629 16.0963 6.96613 16.0726 6.72203 15.7986L4.18947 12.9563C2.04159 10.8084 2.04159 7.32603 4.18947 5.17814C6.33735 3.03026 9.81976 3.03026 11.9676 5.17814C14.1155 3.03026 17.5979 3.03026 19.7458 5.17814C21.8937 7.32603 21.8937 10.8084 19.7458 12.9563L12.7187 20.8868C12.3199 21.337 11.6168 21.3357 11.2195 20.8842L8.91682 18.2672C8.67108 17.9879 8.69469 17.5632 8.96986 17.3128C9.229 17.0771 9.62033 17.0784 9.87751 17.3042L11.5969 19.2037C11.7954 19.423 12.1398 19.423 12.3383 19.2037L18.9595 11.8889C20.3901 10.3084 20.3298 7.88356 18.8224 6.37611L18.6851 6.23884C17.123 4.67674 14.5904 4.67674 13.0283 6.23884L11.9676 7.2995L10.907 6.23884C9.34485 4.67674 6.81219 4.67674 5.2501 6.23884L5.11282 6.37611C3.60538 7.88356 3.54507 10.3084 4.97572 11.8889L7.35738 14.52Z" fill="#6c1970"></path></svg>
  </div>
              
            
!

CSS

              
                body {
	background-color: #16181D;
	background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
  height: 100vh;
}

.container {
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
  position: relative;
}
svg{
  width: 200px;
}
              
            
!

JS

              
                gsap.to(".heart", { 
  keyframes: [
    //<-- an array of keyframes!
    { scaleX: 1.8, scaleY:2, duration: 1, yoyo: true, repeat: 3, ease: "elastic(1, 0.5)"}, 
     {rotateY: 960, duration: 0.3, delay: 0.1, ease: "back.in(1.7)" }, //create a 0.2 second gap
    { scale: 0, translateY: 100, duration: 1, delay: -0.1, ease: "back.in(1.7)"} //overlap by 0.1 seconds
  ]
});


              
            
!
999px

Console