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

              
                <div id="icon">
  <svg id="like" viewBox="0 0 52 52">
  <g
     id="main">
    <circle
       r="13"
       cy="26"
       cx="26"
       id="small"
        />
    <circle
       r="14"
       cy="26"
       cx="26"
       id="big"
       />
  </g>
  <g
         id="fireworks"
         style="stroke-width:0.91058081">
        <path
           d="m 18.617543,16.616563 -0.124,-1.086 -0.786,0.759 -1.07,-0.22 0.477,0.982 -0.541,0.95 1.083,-0.149 0.737,0.808 0.191,-1.077 0.995,-0.45 z m 6.286,-1.842 0.877,0.653 -0.015,-1.094 0.889,-0.632 -1.043,-0.324 -0.327,-1.04 -0.629,0.892 -1.094,-0.012 0.656,0.874 -0.348,1.037 z m 7.1,2.274 -0.922,-0.057 -0.475,-0.789 -0.336,0.855 -0.898,0.209 0.711,0.586 -0.082,0.92 0.777,-0.496 0.85,0.36 -0.23,-0.892 z m -11.076,-0.472 c 0,0.378 0.309,0.687 0.687,0.687 0.378,0 0.686,-0.309 0.686,-0.687 0,-0.377 -0.308,-0.686 -0.686,-0.686 -0.378,0 -0.687,0.309 -0.687,0.686 z m 1.01,0 c -0.007,0.174 -0.15,0.31 -0.323,0.31 -0.174,0 -0.316,-0.136 -0.324,-0.31 0.008,-0.173 0.15,-0.309 0.324,-0.309 0.173,0 0.316,0.136 0.323,0.309 z m -2.573,3.372 c -0.378,0 -0.686,0.308 -0.686,0.686 0,0.378 0.308,0.687 0.686,0.687 0.378,0 0.686,-0.309 0.686,-0.687 0,-0.381 -0.308,-0.686 -0.686,-0.686 z m 0,1.007 c -0.173,-0.008 -0.31,-0.15 -0.31,-0.324 0,-0.173 0.137,-0.316 0.31,-0.323 0.173,0.007 0.31,0.15 0.31,0.323 0,0.174 -0.137,0.316 -0.31,0.324 z m 8.518,-4.799 c 0.378,0 0.686,-0.308 0.686,-0.686 0,-0.378 -0.308,-0.687 -0.686,-0.687 -0.378,0 -0.687,0.309 -0.687,0.687 0,0.381 0.309,0.686 0.687,0.686 z m 0,-1.007 c 0.173,0.008 0.309,0.15 0.309,0.324 0,0.173 -0.136,0.316 -0.309,0.323 -0.174,-0.007 -0.31,-0.15 -0.31,-0.323 0,-0.174 0.136,-0.316 0.31,-0.324 z m 0.91,5.443 c -0.378,0 -0.687,0.308 -0.687,0.686 0,0.378 0.309,0.687 0.687,0.687 0.378,0 0.686,-0.309 0.686,-0.687 -0.002,-0.378 -0.308,-0.684 -0.686,-0.686 z m 0,1.007 c -0.173,-0.008 -0.31,-0.15 -0.31,-0.324 0,-0.173 0.137,-0.316 0.31,-0.323 0.178,0 0.323,0.145 0.323,0.323 -0.003,0.179 -0.145,0.324 -0.323,0.324 z m -9.316,-3.737 c -0.109,-0.013 -0.203,0.066 -0.215,0.175 -0.012,0.109 0.067,0.206 0.172,0.218 0.003,0 0.448,0.054 1.056,0.384 0.559,0.305 1.379,0.916 2.092,2.095 0.036,0.061 0.103,0.094 0.169,0.094 0.034,0 0.07,-0.009 0.103,-0.027 0.094,-0.058 0.124,-0.179 0.067,-0.27 -1.476,-2.434 -3.366,-2.66 -3.444,-2.669 z m 9.645,0.196 c 0,-0.109 -0.087,-0.196 -0.196,-0.196 -0.024,0 -0.575,0.006 -1.267,0.344 -0.632,0.309 -1.515,0.968 -2.123,2.347 -0.026,0.06 -0.021,0.131 0.015,0.187 0.036,0.056 0.097,0.09 0.164,0.091 0.075,0 0.148,-0.043 0.181,-0.118 0.445,-1.013 1.092,-1.733 1.917,-2.144 0.614,-0.302 1.104,-0.314 1.116,-0.314 0.106,0 0.193,-0.088 0.193,-0.197 z m -4.224,-2.8 c -0.093,-0.055 -0.214,-0.024 -0.269,0.07 -0.012,0.021 -0.32,0.553 -0.538,1.521 -0.2,0.883 -0.354,2.322 0.024,4.148 0.018,0.094 0.1,0.157 0.194,0.157 0.012,0 0.027,0 0.039,-0.003 0.106,-0.021 0.175,-0.127 0.151,-0.232 -0.363,-1.748 -0.218,-3.121 -0.03,-3.965 0.202,-0.913 0.496,-1.421 0.499,-1.427 0.057,-0.093 0.024,-0.214 -0.07,-0.269 z m -5.973907,21.493261 -0.124,1.086 -0.786,-0.759 -1.07,0.22 0.477,-0.982 -0.541,-0.95 1.083,0.149 0.737,-0.808 0.191,1.077 0.995,0.45 z m 6.286,1.842 0.877,-0.653 -0.015,1.094 0.889,0.632 -1.043,0.324 -0.327,1.04 -0.629,-0.892 -1.094,0.012 0.656,-0.874 -0.348,-1.037 z m 7.1,-2.274 -0.922,0.057 -0.475,0.789 -0.336,-0.855 -0.898,-0.209 0.711,-0.586 -0.082,-0.92 0.777,0.496 0.85,-0.36 -0.23,0.892 z m -11.076,0.472 c 0,-0.378 0.309,-0.687 0.687,-0.687 0.378,0 0.686,0.309 0.686,0.687 0,0.377 -0.308,0.686 -0.686,0.686 -0.378,0 -0.687,-0.309 -0.687,-0.686 z m 1.01,0 c -0.007,-0.174 -0.15,-0.31 -0.323,-0.31 -0.174,0 -0.316,0.136 -0.324,0.31 0.008,0.173 0.15,0.309 0.324,0.309 0.173,0 0.316,-0.136 0.323,-0.309 z m -2.573,-3.372 c -0.378,0 -0.686,-0.308 -0.686,-0.686 0,-0.378 0.308,-0.687 0.686,-0.687 0.378,0 0.686,0.309 0.686,0.687 0,0.381 -0.308,0.686 -0.686,0.686 z m 0,-1.007 c -0.173,0.008 -0.31,0.15 -0.31,0.324 0,0.173 0.137,0.316 0.31,0.323 0.173,-0.007 0.31,-0.15 0.31,-0.323 0,-0.174 -0.137,-0.316 -0.31,-0.324 z m 8.518,4.799 c 0.378,0 0.686,0.308 0.686,0.686 0,0.378 -0.308,0.687 -0.686,0.687 -0.378,0 -0.687,-0.309 -0.687,-0.687 0,-0.381 0.309,-0.686 0.687,-0.686 z m 0,1.007 c 0.173,-0.008 0.309,-0.15 0.309,-0.324 0,-0.173 -0.136,-0.316 -0.309,-0.323 -0.174,0.007 -0.31,0.15 -0.31,0.323 0,0.174 0.136,0.316 0.31,0.324 z m 0.91,-5.443 c -0.378,0 -0.687,-0.308 -0.687,-0.686 0,-0.378 0.309,-0.687 0.687,-0.687 0.378,0 0.686,0.309 0.686,0.687 -0.002,0.378 -0.308,0.684 -0.686,0.686 z m 0,-1.007 c -0.173,0.008 -0.31,0.15 -0.31,0.324 0,0.173 0.137,0.316 0.31,0.323 0.178,0 0.323,-0.145 0.323,-0.323 -0.003,-0.179 -0.145,-0.324 -0.323,-0.324 z m -9.316,3.737 c -0.109,0.013 -0.203,-0.066 -0.215,-0.175 -0.012,-0.109 0.067,-0.206 0.172,-0.218 0.003,0 0.448,-0.054 1.056,-0.384 0.559,-0.305 1.379,-0.916 2.092,-2.095 0.036,-0.061 0.103,-0.094 0.169,-0.094 0.034,0 0.07,0.009 0.103,0.027 0.094,0.058 0.124,0.179 0.067,0.27 -1.476,2.434 -3.366,2.66 -3.444,2.669 z m 9.645,-0.196 c 0,0.109 -0.087,0.196 -0.196,0.196 -0.024,0 -0.575,-0.006 -1.267,-0.344 -0.632,-0.309 -1.515,-0.968 -2.123,-2.347 -0.026,-0.06 -0.021,-0.131 0.015,-0.187 0.036,-0.056 0.097,-0.09 0.164,-0.091 0.075,0 0.148,0.043 0.181,0.118 0.445,1.013 1.092,1.733 1.917,2.144 0.614,0.302 1.104,0.314 1.116,0.314 0.106,0 0.193,0.088 0.193,0.197 z m -4.224,2.8 c -0.093,0.055 -0.214,0.024 -0.269,-0.07 -0.012,-0.021 -0.32,-0.553 -0.538,-1.521 -0.2,-0.883 -0.354,-2.322 0.024,-4.148 0.018,-0.094 0.1,-0.157 0.194,-0.157 0.012,0 0.027,0 0.039,0.003 0.106,0.021 0.175,0.127 0.151,0.232 -0.363,1.748 -0.218,3.121 -0.03,3.965 0.202,0.913 0.496,1.421 0.499,1.427 0.057,0.093 0.024,0.214 -0.07,0.269 z m 9.6613,-5.293224 1.086,0.124 -0.759,0.786 0.22,1.07 -0.982,-0.477 -0.95,0.541 0.149,-1.083 -0.808,-0.737 1.077,-0.191 0.45,-0.995 z m 1.842,-6.286 -0.653,-0.877 1.093999,0.015 0.632,-0.889 0.324,1.043 1.04,0.327 -0.892,0.629 0.012,1.094 -0.874,-0.656 -1.036999,0.348 z m -2.274,-7.1 0.057,0.922 0.789,0.475 -0.855,0.336 -0.209,0.898 -0.586,-0.711 -0.92,0.082 0.496,-0.777 -0.36,-0.85 0.892,0.23 z m 0.472,11.076 c -0.378,0 -0.687,-0.309 -0.687,-0.687 0,-0.378 0.309,-0.686 0.687,-0.686 0.377,0 0.686,0.308 0.686,0.686 0,0.378 -0.309,0.687 -0.686,0.687 z m 0,-1.01 c -0.174,0.007 -0.31,0.15 -0.31,0.323 0,0.174 0.136,0.316 0.31,0.324 0.173,-0.008 0.309,-0.15 0.309,-0.324 0,-0.173 -0.136,-0.316 -0.309,-0.323 z m -3.372,2.573 c 0,0.378 -0.308,0.686 -0.686,0.686 -0.378,0 -0.687,-0.308 -0.687,-0.686 0,-0.378 0.309,-0.686 0.687,-0.686 0.381,0 0.686,0.308 0.686,0.686 z m -1.007,0 c 0.008,0.173 0.15,0.31 0.324,0.31 0.173,0 0.316,-0.137 0.323,-0.31 -0.007,-0.173 -0.15,-0.31 -0.323,-0.31 -0.174,0 -0.316,0.137 -0.324,0.31 z m 4.799,-8.518 c 0,-0.378 0.308,-0.686 0.686,-0.686 0.378,0 0.687,0.308 0.687,0.686 0,0.378 -0.309,0.687 -0.687,0.687 -0.381,0 -0.686,-0.309 -0.686,-0.687 z m 1.007,0 c -0.008,-0.173 -0.15,-0.309 -0.324,-0.309 -0.173,0 -0.316,0.136 -0.323,0.309 0.007,0.174 0.15,0.31 0.323,0.31 0.174,0 0.316,-0.136 0.324,-0.31 z m -5.443,-0.91 c 0,0.378 -0.308,0.687 -0.686,0.687 -0.378,0 -0.687,-0.309 -0.687,-0.687 0,-0.378 0.309,-0.686 0.687,-0.686 0.378,0.002 0.684,0.308 0.686,0.686 z m -1.007,0 c 0.008,0.173 0.15,0.31 0.324,0.31 0.173,0 0.316,-0.137 0.323,-0.31 0,-0.178 -0.145,-0.323 -0.323,-0.323 -0.179,0.003 -0.324,0.145 -0.324,0.323 z m 3.737,9.316 c 0.013,0.109 -0.066,0.203 -0.175,0.215 -0.109,0.012 -0.206,-0.067 -0.218,-0.172 0,-0.003 -0.054,-0.448 -0.384,-1.056 -0.305,-0.559 -0.916,-1.379 -2.095,-2.092 -0.061,-0.036 -0.094,-0.103 -0.094,-0.169 0,-0.034 0.009,-0.07 0.027,-0.103 0.058,-0.094 0.179,-0.124 0.27,-0.067 2.434,1.476 2.66,3.366 2.669,3.444 z m -0.196,-9.645 c 0.109,0 0.196,0.087 0.196,0.196 0,0.024 -0.006,0.575 -0.344,1.267 -0.309,0.632 -0.968,1.515 -2.347,2.123 -0.06,0.026 -0.131,0.021 -0.187,-0.015 -0.056,-0.036 -0.09,-0.097 -0.091,-0.164 0,-0.075 0.043,-0.148 0.118,-0.181 1.013,-0.445 1.733,-1.092 2.144,-1.917 0.302,-0.614 0.314,-1.104 0.314,-1.116 0,-0.106 0.088,-0.193 0.197,-0.193 z m 2.8,4.224 c 0.055,0.093 0.024,0.214 -0.07,0.269 -0.021,0.012 -0.553,0.32 -1.521,0.538 -0.883,0.2 -2.322,0.354 -4.148,-0.024 -0.094,-0.018 -0.157,-0.1 -0.157,-0.194 0,-0.012 0,-0.027 0.003,-0.039 0.021,-0.106 0.127,-0.175 0.232,-0.151 1.748,0.363 3.121,0.218 3.965,0.03 0.913,-0.202 1.421,-0.496 1.427,-0.499 0.093,-0.057 0.214,-0.024 0.269,0.07 z m -22.460872,-4.953145 -1.086,-0.124 0.759,-0.786 -0.22,-1.07 0.982,0.477 0.95,-0.541 -0.149,1.083 0.808,0.737 -1.077,0.191 -0.45,0.995 z m -1.842,6.286 0.653,0.877 -1.094,-0.015 -0.632,0.888999 -0.324,-1.042999 -1.0400003,-0.327 0.8920003,-0.629 -0.012,-1.094 0.874,0.656 1.037,-0.348 z m 2.274,7.099999 -0.057,-0.922 -0.789,-0.475 0.855,-0.336 0.209,-0.898 0.586,0.711 0.92,-0.082 -0.496,0.777 0.36,0.85 -0.892,-0.23 z m -0.472,-11.075999 c 0.378,0 0.687,0.309 0.687,0.687 0,0.378 -0.309,0.686 -0.687,0.686 -0.377,0 -0.686,-0.308 -0.686,-0.686 0,-0.378 0.309,-0.687 0.686,-0.687 z m 0,1.01 c 0.174,-0.007 0.31,-0.15 0.31,-0.323 0,-0.174 -0.136,-0.316 -0.31,-0.324 -0.173,0.008 -0.309,0.15 -0.309,0.324 0,0.173 0.136,0.316 0.309,0.323 z m 3.372,-2.573 c 0,-0.378 0.308,-0.686 0.686,-0.686 0.378,0 0.687,0.308 0.687,0.686 0,0.378 -0.309,0.686 -0.687,0.686 -0.381,0 -0.686,-0.308 -0.686,-0.686 z m 1.007,0 c -0.008,-0.173 -0.15,-0.31 -0.324,-0.31 -0.173,0 -0.316,0.137 -0.323,0.31 0.007,0.173 0.15,0.31 0.323,0.31 0.174,0 0.316,-0.137 0.324,-0.31 z m -4.799,8.517999 c 0,0.378 -0.308,0.686 -0.686,0.686 -0.378,0 -0.687,-0.308 -0.687,-0.686 0,-0.378 0.309,-0.687 0.687,-0.687 0.381,0 0.686,0.309 0.686,0.687 z m -1.007,0 c 0.008,0.173 0.15,0.309 0.324,0.309 0.173,0 0.316,-0.136 0.323,-0.309 -0.007,-0.174 -0.15,-0.31 -0.323,-0.31 -0.174,0 -0.316,0.136 -0.324,0.31 z m 5.443,0.91 c 0,-0.378 0.308,-0.687 0.686,-0.687 0.378,0 0.687,0.309 0.687,0.687 0,0.378 -0.309,0.686 -0.687,0.686 -0.378,-0.002 -0.684,-0.308 -0.686,-0.686 z m 1.007,0 c -0.008,-0.173 -0.15,-0.31 -0.324,-0.31 -0.173,0 -0.316,0.137 -0.323,0.31 0,0.178 0.145,0.323 0.323,0.323 0.179,-0.003 0.324,-0.145 0.324,-0.323 z m -3.737,-9.315999 c -0.013,-0.109 0.066,-0.203 0.175,-0.215 0.109,-0.012 0.206,0.067 0.218,0.172 0,0.003 0.054,0.448 0.384,1.056 0.305,0.559 0.916,1.379 2.095,2.092 0.061,0.036 0.094,0.103 0.094,0.169 0,0.034 -0.009,0.07 -0.027,0.103 -0.058,0.094 -0.179,0.124 -0.27,0.067 -2.434,-1.476 -2.66,-3.366 -2.669,-3.444 z m 0.196,9.644999 c -0.109,0 -0.196,-0.087 -0.196,-0.196 0,-0.024 0.006,-0.575 0.344,-1.267 0.309,-0.632 0.968,-1.515 2.347,-2.122999 0.06,-0.026 0.131,-0.021 0.187,0.015 0.056,0.036 0.09,0.097 0.091,0.164 0,0.075 -0.043,0.148 -0.118,0.181 -1.013,0.444999 -1.733,1.091999 -2.144,1.916999 -0.302,0.614 -0.314,1.104 -0.314,1.116 0,0.106 -0.088,0.193 -0.197,0.193 z m -2.8,-4.223999 c -0.055,-0.093 -0.024,-0.214 0.07,-0.269 0.021,-0.012 0.553,-0.32 1.521,-0.538 0.883,-0.2 2.322,-0.354 4.148,0.024 0.094,0.018 0.157,0.1 0.157,0.194 0,0.012 0,0.027 -0.003,0.039 -0.021,0.106 -0.127,0.175 -0.232,0.151 -1.748,-0.363 -3.121,-0.218 -3.965,-0.03 -0.913,0.202 -1.421,0.496 -1.427,0.499 -0.093,0.057 -0.214,0.024 -0.269,-0.07 z"
           style="fill:#f6a91c;stroke-width:0.91058081"
           id="path4688-5-2" />
      </g>
  
<g id="heart">
<path d=" M 25.493 38.661 C 25.493 41.564 27.126 45.299 27.126 49.541 C 27.129 52.321 24.747 55.991 24.747 55.991" fill="none" vector-effect="non-scaling-stroke" stroke-width="3.424" stroke="rgb(120,139,156)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10"/>
    <path d=" M 24.12 42.297 L 25.034 38.873 L 27.883 38.873 L 28.797 42.297 L 24.12 42.297 Z " fill="rgb(247,143,143)"/>
    <path d=" M 29.197 37.161 L 23.719 37.161 L 21.895 44.009 L 31.022 44.009 L 29.197 37.161 L 29.197 37.161 Z " fill="rgb(199,67,67)"/>
    <path d=" M 26.458 38.873 C 20.826 38.873 7.628 22.984 7.628 16.206 C 7.628 9.718 12.401 4.637 18.492 4.637 C 21.005 4.637 23.391 5.483 25.39 7.085 L 26.458 7.944 L 27.526 7.085 C 29.477 5.501 31.913 4.636 34.425 4.637 C 40.516 4.637 45.288 9.718 45.288 16.206 C 45.288 22.984 32.09 38.873 26.458 38.873 Z " fill="rgb(247,143,143)"/><path d=" M 34.425 6.349 C 39.557 6.349 43.576 10.676 43.576 16.206 C 43.576 22.416 30.642 37.161 26.458 37.161 C 22.275 37.161 9.34 22.416 9.34 16.206 C 9.34 10.676 13.36 6.349 18.492 6.349 C 20.614 6.349 22.627 7.064 24.315 8.42 L 26.458 10.142 L 28.602 8.42 C 30.247 7.081 32.303 6.349 34.425 6.349 Z  M 34.425 2.925 C 31.419 2.925 28.656 3.987 26.458 5.753 C 24.205 3.926 21.393 2.928 18.492 2.925 C 11.34 2.925 5.917 8.872 5.917 16.206 C 5.917 23.539 19.69 40.585 26.458 40.585 C 33.227 40.585 47 23.539 47 16.206 C 47 8.872 41.577 2.925 34.425 2.925 Z " fill="rgb(199,67,67)"/></g>
  
  
</svg>
</div>
              
            
!

CSS

              
                originCenter = 50% // 26px
backgroundColor = #31D29D

body
  background: backgroundColor

#icon
  width: 200px
  
#small 
  animation: grow 1s ease-in-out forwards
  transform-origin: originCenter originCenter !important
  fill: #ffc100 
  fill-opacity: 1
   
#big
  animation: grow 1s ease-in-out forwards
  animation-delay: .3s
  transform-origin: originCenter originCenter !important
  fill: backgroundColor
  fill-opacity:1

@keyframes grow {
  0% { 
    transform: scale(0);

  }
  100% {
    transform: scale(1)

  }
}
  
#heart
  transform-origin: originCenter originCenter !important
  transform: scale(.2)
  animation: showHeart 1.3s ease-in-out forwards
  
@keyframes showHeart {
  0%,76% { 
    opacity: 0
    transform: scale(0, 0)
  }
  80%, 100% {
    opacity: 1
    transform: scale(.2, .2)
  }
}

#fireworks
  opacity: 0
  transform: scale(1)
  transform-origin: originCenter originCenter !important
  animation: showFireworks 1.3s ease-out forwards 

@keyframes showFireworks {
  0%, 60% { 
    opacity: 0
  }
  60.1% { 
    opacity: 1
    transform: scale(.5, .5)
  } 
  85%, 100% {
    transform: scale(1, 1)
    opacity: 0
  }
}
              
            
!

JS

              
                /*
Assets
- 2 circles
- fireworks
- heart
*/
              
            
!
999px

Console