JSFiddle - React, Tailwind, and code Playground

cone svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="71px" height="81px" viewBox="0 0 71 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>Cone</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M26.0379521,4 C26.5231324,2.40623509 28.8413387,4.55850008e-13 34.6953636,4.54747351e-13 C40.5493886,4.54747351e-13 42.8036028,2.53819687 43.3527751,4 L54.8959904,53.7706235 C54.9645814,54.3670418 54.5855929,54.955688 53.7590249,55.536562 C47.6285278,59.5367487 41.3561683,60.5368421 34.9419465,60.5368421 C28.6713276,60.5368421 22.3969648,59.6253032 16.118858,55.8022255 C14.8325506,55.0440702 14.2911769,54.3668695 14.4947368,53.7706235 L26.0379521,4 Z" id="path-1"></path>
        <path d="M23.3762907,16.0084978 C27.1195015,18.1514769 30.8191689,19.2229665 34.4752928,19.2229665 C38.1314167,19.2229665 42.0211809,18.1159216 46.1445854,15.9018318 L48.4442964,25.7500817 C43.3381177,27.9096764 38.7171633,28.9894737 34.5814334,28.9894737 C30.4457034,28.9894737 25.9465695,27.9479553 21.0840314,25.8649185 L23.3762907,16.0084978 Z" id="path-2"></path>
        <path d="M19.1429924,34.1161039 C23.1349586,36.6926088 28.2457254,37.9808612 34.4752928,37.9808612 C40.7048602,37.9808612 45.9759598,36.6104098 50.2885916,33.869507 L52.5987718,43.8717703 C48.0054049,47.0239234 41.9996254,48.6 34.5814334,48.6 C27.1632413,48.6 21.2433102,47.0481703 16.8216398,43.944511 L19.1429924,34.1161039 Z" id="path-3"></path>
    </defs>
    <g id="Error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-125.000000, -114.000000)">
        <g id="Cone-container" transform="translate(125.000000, 114.000000)">
            <ellipse id="shadow" fill="#E0E0E0" cx="35" cy="64.5" rx="35" ry="12.5"></ellipse>
            <g id="Cone">
                <polygon id="Path-10-Copy" stroke="#333333" fill="#B2D1F8"...

SCSS

body.animate {
  
  #Cone {
    animation: 0.25s dropCone linear;
  }

  #shadow {
    animation: 0.25s showShadow;
    transform-origin: 37px 60px;
  }
  
}

@keyframes dropCone {
  0% { transform: translate3d(0, -100px, 0); }
  60% { transform: translate3d(0, 0, 0); }
  80% { transform: translate3d(0, -20px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes showShadow {
  from { transform: scale3d(0, 0, 0); }
  to { transform: scale3d(1, 1, 1); }
}

JavaScript

document.querySelector('button').addEventListener('click', function () {
	var $this = this;
  
	$this.disabled = true;
	document.body.classList.toggle('animate');
  window.setTimeout(function () {
  	$this.disabled = false;
  	document.body.classList.toggle('animate');
  }, 1000);
});