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

              
                <svg class="like" viewBox="0 0 100 100">
  <g id="dots"/>
  <g class="mamba-mentality">
    <path class="body" d="M52.2821 83.3933C47.1007 83.9762 36.4528 84.7543 33.9474 76.0068C32.1419 67.4204 38.3567 61.9678 47.1505 61.379C51.588 60.96 55.9027 61.3992 60.0782 61.6491C64.37 61.8418 68.6008 62.2554 72.2833 60.8295C74.2238 60.1232 74.9434 58.1655 74.8533 56.2181C75.6556 49.271 51.4873 57.0971 47.5158 57.7375C42.1778 58.9341 37.0059 60.1523 31.3975 59.8352C25.0187 59.6081 19.3254 55.3308 19.2869 48.5145C19.1374 44.3659 20.6505 39.9912 23.5608 36.9702C32.8057 27.7348 47.8458 29.3403 59.5958 26.2738C62.1415 25.4694 66.6034 23.9603 66.5356 18.7276C66.4782 14.2907 62.0962 13.257 57.324 13.3719C51.3186 14.4736 49.8323 5.52639 55.863 4.55776C60.4201 3.50416 65.3807 3.6348 69.6199 5.83424C74.8059 8.4218 77.5382 14.2486 77.6431 19.8635C78.7247 37.1395 59.0234 39.2601 46.2933 41.6198C42.7155 42.3169 38.9321 43.0246 35.6602 44.4849C34.3242 45.1588 33.2762 45.658 32.6681 46.8936C34.9826 47.6727 39.2119 46.9801 41.9139 46.7534C51.9227 45.9743 71.4947 40.7938 79.5367 47.4737C84.6804 51.7259 84.0516 60.4861 79.8167 65.152C72.4031 72.6927 58.1952 68.9632 48.6641 69.5631C46.3332 69.7593 43.5977 69.7116 41.847 71.4308C41.0763 72.406 40.9339 73.8923 41.0505 75.0903C41.1853 76.3796 42.0522 77.5779 43.2149 78.0397C50.1545 81.1353 57.3502 79.662 65.6903 77.8045C61.2504 81.4405 56.1885 83.0784 52.2821 83.3933Z" fill="#552583"/>
    <path class="shield" d="M37.2027 50.8493L40.9155 74.3534L42.5328 84.5763L44.1127 94.6634L44.1709 94.7114L48.1299 99.1869L48.0206 82.4226L47.9146 67.3814L47.8019 51.4966L47.7134 39.6513L37.2027 50.8493ZM51.8914 50.8331L51.8625 54.7465L51.6953 79.2789L51.558 99.1869L55.5602 94.6634L55.9079 92.476L59.0862 72.2661L62.4556 50.8493L51.9637 39.6513L51.8914 50.8331ZM15.8441 26.8222L34.265 44.7433L47.772 34.6108L13 17.9504L15.8441 26.8222ZM51.8914 34.6108L65.4133 44.7433L83.8239 26.8222L86.6818 17.9504L51.8914 34.6108ZM13.7845 12.1389L47.772 30.2838V18.9547L21.3224 9.51121L13.7845 12.1389ZM51.8914 18.9547V30.2838L85.8896 12.1389L78.3845 9.51121L51.8914 18.9547Z" fill="#FDB927"/>
    <g id="head">
      <g>
        <path class="open-mouth" d="M48.0893 8.07026C44.8588 7.46797 42.7079 8.92469 42.7079 8.92469C42.7079 8.92469 45.2819 13.9557 44.6166 16.9552C43.9513 19.9548 40.4057 23.7982 40.4057 23.7982C42.491 25.3042 43.6524 25.1675 45.2401 24.5741C45.2401 24.5741 50.484 18.4284 51.6418 17.1564C52.0599 16.697 54.7232 11.4517 54.7232 11.4517C54.7232 11.4517 51.3198 8.67254 48.0893 8.07026Z" fill="#552583"/>
        <path class="closed-mouth" d="M63 4.25551C49.4193 2.69531 44.7169 10.5971 43.1819 20.6885C42.4537 32.1446 48.4702 37.7448 46.8491 41.715C46.4763 42.6279 53.3183 34.6317 53.3183 34.6317C53.3183 34.6317 52.1133 29.9389 53.0517 21.9776C54.1775 12.4829 60.7984 13.5512 60.7984 13.5512C60.7984 13.5512 63 7.19098 63 4.25551Z" fill="#552583"/>
      </g>
      <g>
        <path class="open-top" d="M49.7627 1.39265C42.6149 1.34503 36.449 3.75999 30.8018 7.47604C30.9629 9.38794 31.7431 10.5091 33.1425 10.8397C33.1425 10.8397 41.2272 9.6522 44.165 9.71347C45.747 11.2332 50.024 12.3534 51.7393 12.4808C55.0707 12.7284 64.556 11.3658 64.556 11.3658C64.556 11.3658 63.0441 6.92619 59.0514 4.49936C55.747 2.49084 51.0003 1.72787 49.7627 1.39265Z" fill="#552583"/>
        <path class="closed-top" d="M42.6027 43.483C42.934 50.988 45.7973 57.3312 49.9983 63.0603C51.9961 62.7893 53.1311 61.9105 53.4033 60.4241C53.4033 60.4241 51.7258 52.0015 51.6334 48.9146C53.1438 47.1731 54.0913 42.6239 54.1335 40.8166C54.2156 37.3067 52.4973 30.1085 52.4973 30.1085C52.4973 30.1085 47.7177 30.996 45.2641 34.0037C43.5248 36.1359 42.8885 42.1661 42.6027 43.483Z" fill="#552583"/>
      </g>
      <g>
        <path class="open-bottom" d="M40.4057 23.7983C41.5364 26.1831 42.9942 26.4375 44.5819 25.8441C44.5819 25.8441 51.4157 19.5986 52.5735 18.3265C52.9916 17.8672 56.3301 15.5003 57.7771 14.7313C59.5457 13.7913 60.4135 10.0914 60.4135 10.0914C60.4135 10.0914 54.2732 10.6003 50.7877 11.9172C51.3244 12.5805 51.124 14.8654 50.6907 15.7332C49.1959 18.7268 44.7142 23.6276 44.1738 23.9893C42.9818 24.7871 40.4057 23.7983 40.4057 23.7983Z" fill="#552583"/>
        <path class="closed-bottom" d="M52.0944 62.3744C54.5369 61.0604 55.2187 57.9254 55.9636 53.9437C56.7086 49.962 57.515 43.3948 57.5857 41.5884C57.7422 37.5845 57.8499 36.3175 56.1741 33.4346C54.4984 30.5517 50.9805 31.0384 50.9805 31.0384C50.9805 31.0384 52.0248 38.2573 53.5928 41.8456C54.2601 41.2469 51.1104 46.4371 50.9268 49.0651C50.6819 52.5732 51.655 55.8262 52.0633 56.374C52.9643 57.5827 52.0944 62.3744 52.0944 62.3744Z" fill="#552583"/>
      </g>
      <g>
        <path class="open-eye" d="M42.4531 5.15761L49.7093 3.95298L48.2957 6.70953L42.4531 5.15761Z" fill="#FDB927"/>
        <path class="closed-eye" d="M46.9437 50.9545L45.2924 43.4025L48.2607 44.739L46.9437 50.9545Z" fill="#FDB927"/>
      </g>
    </g>
    <path class="open-tooth" d="M38.489 7.33501C38.2958 11.1368 38.5815 14.6765 40.2365 17.4665C37.4231 15.0963 35.9254 12.2526 35.7436 8.9352L38.489 7.33501Z" fill="#552583"/>
    <path class="open-tooth" d="M34.954 6.43127C34.7609 10.233 35.0464 13.7728 36.7014 16.5627C33.888 14.1926 32.3905 11.3487 32.2086 8.03135L34.954 6.43127Z" fill="#552583"/>
    <path class="open-mouth" d="M44.1501 9.75115C45.8285 10.9622 50.7178 12.2855 51.2026 11.8176C51.2026 11.8176 50.9173 14.3571 50.4481 15.4592C49.7608 17.0738 44.6918 23.0148 43.9497 23.3825C42.7825 23.9609 41.0956 22.9715 41.0956 22.9715C41.0956 22.9715 43.4243 23.4913 43.8401 22.9904C44.256 22.4894 48.5978 17.4211 49.1935 16.5617C49.7893 15.7023 50.7696 13.425 50.5209 13.1588C49.7439 12.3268 45.8655 11.5132 44.1501 9.75115Z" fill="#FDB927"/>
  </g>
  <path class="filled" d="M50.0025 75.0544H49.9677C43.5416 74.935 25 58.1821 25 42.3149C25 34.6922 31.2817 28 38.4416 28C44.1387 28 47.9699 31.9307 50 34.7917C52.0251 31.9357 55.8563 28 61.5559 28C68.7208 28 75 34.6922 75 42.3173C75 58.1796 56.4559 74.9325 50.0299 75.0495H50.0025V75.0544Z" fill="#E0245E"/>
  <path class="stroke" d="M50.0025 75.0544H49.9677C43.5416 74.935 25 58.1821 25 42.3149C25 34.6922 31.2817 28 38.4416 28C44.1387 28 47.9699 31.9307 50 34.7917C52.0251 31.9357 55.8563 28 61.5559 28C68.7208 28 75 34.6922 75 42.3173C75 58.1796 56.4559 74.9325 50.0299 75.0495H50.0025V75.0544ZM38.4441 31.7342C33.2695 31.7342 28.7342 36.68 28.7342 42.3198C28.7342 56.5999 46.2335 71.1685 50.005 71.3227C53.7815 71.1685 71.2758 56.6023 71.2758 42.3198C71.2758 36.68 66.7405 31.7342 61.5658 31.7342C55.2766 31.7342 51.7639 39.0384 51.734 39.1106C51.1618 40.5087 48.8581 40.5087 48.2834 39.1106C48.2486 39.0359 44.7383 31.7342 38.4466 31.7342H38.4441Z" fill="#8899A6"/>
</svg>

<!-- hashflag-gallery - dribbble - twitter -->
<a class="hashflag" href="https://hashflaggallery.com" target="_blank" rel="noopener">
  <img src="https://hashflaggallery.com/favicon-96x96.png"/>
</a>
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>
              
            
!

CSS

              
                :root {
  --size: 100px;  
}

html {
  background-color: #15202B;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

[class^=open-], [class^=closed-] {
  opacity: 0;
}

.like {
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  border-radius: 999px;
  overflow: visible;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  > * {
    opacity: 0;
  }
  .stroke {
    opacity: 1;
  }
}

.ball path:last-child {
  transform-origin: 23.5% 23.5%;
}

@media (hover: hover) {
  svg:hover {
    background-color: #E1255E15;
    .stroke {
      fill: #E1255E;
    }
  }
}

// hashflag-gallery - dribbble - twitter
.hashflag {
  position: fixed;
  display: block;
  right: 114px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
  svg {
    width: 32px;
    height: 32px;
    fill: #1da1f2;
  }
}

              
            
!

JS

              
                gsap.registerPlugin(MorphSVGPlugin);

const svg = document.querySelector('.like');
const dots = document.querySelector('#dots');
const mambaMentality = document.querySelector('.mamba-mentality');
const openPaths = document.querySelectorAll('.mamba-mentality > [class^=open-]');
const shield = document.querySelector('.shield');
const filled = document.querySelector('.filled');
const stroke = document.querySelector('.stroke');

const dotArr = [
  { r: 7, x: -10, y: -5 },
  { r: 4, x: 8, y: -10 },
  { r: 2.5, x: 100, y: -8 },
  { r: 5, x: 115, y: -2 },
  { r: 8, x: 110, y: 90 },
  { r: 6, x: 100, y: 115 },
  { r: 3, x: 85, y: 100 },
  { r: 3, x: 14, y: 115 },
  { r: 7.5, x: -5, y: 100 },
  { r: 5, x: 20, y: 95 },
].map(dot => {
  const el = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');
  document.querySelector('#dots').appendChild(el);
  return {...dot, el};
});
console.log(dots);

const headPaths = [...document.querySelectorAll('#head > g')].map(group => {
  const open = group.querySelector('path:first-child');
  const closed = group.querySelector('path:last-child');
  const animated = open.cloneNode()
  animated.setAttribute('class', '');
  group.appendChild(animated);
  return [animated, open, closed];  
});

console.log(headPaths);

let liked = false;

const toggle = () => {
  if (liked) {
    gsap.set(mambaMentality, { opacity: 0 });
    gsap.fromTo(stroke, { opacity: 0 }, { opacity: 1, duration: 0.2 });    
    gsap.to(filled, { opacity: 0, duration: 0.2 });    
  } else {
    gsap.set(mambaMentality, { scale: 0.9, opacity: 1, svgOrigin: '50 50' });
    gsap.set(stroke, { opacity: 0 });
    gsap.set(openPaths, { opacity: 1 });
    gsap.set(openPaths, { opacity: 0, delay: 0.25 });
    gsap.set(filled, { scale: 0, svgOrigin: '50 50' });
    gsap.set(shield, { fill: '#FDB927' });
    gsap.set(dots, { opacity: 1 });
    dotArr.forEach(dot => gsap.set(dot.el, { rx: dot.r, ry: dot.r, cx: 50, cy: 50, fill: '#FDB927', delay: 0.15, opacity: 1 }));
    headPaths.forEach(group => gsap.fromTo(group[0], { morphSVG: group[1] }, { morphSVG: group[2], duration: 0.6, ease: 'power3.in' }));
    gsap.to(mambaMentality, { scale: 1, duration: 0.45, ease: 'back.out(3)' });
    gsap.to(mambaMentality, { scale: 0.3, duration: 0.25, delay: 0.45, ease: 'sine.in' });
    gsap.to(shield, { fill: '#E0245E', duration: 0.3, delay: 0.4 });
    gsap.set(filled, { opacity: 1, delay: 0.6 });
    gsap.to(filled, { scale: 1, duration: 0.6, delay: 0.4, ease: 'back.out(2)' });
    dotArr.forEach(dot => gsap.to(dot.el, { cx: dot.x, cy: dot.y, duration: 0.7, delay: 0.15 + Math.random() * 0.1, ease: 'sine.out' }));
    dotArr.forEach(dot => gsap.to(dot.el, { rx: 1, ry: 1, opacity: 0, duration: 0.25 + Math.random() * 0.1, delay: 0.55 + Math.random() * 0.1 }));
  }
  svg.style.pointerEvents = 'none';
  setTimeout(() => { svg.style.pointerEvents = ''; }, liked ? 200 : 700);
  liked = !liked;
};

svg.addEventListener('click', toggle);

toggle();

              
            
!
999px

Console