css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section class="wrapper">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->

	<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="cat" class="kicking-cat" role="img" aria-labelledby="title" aria-describedby="desc" version="1.1">
		<title id="title">Cat and ball</title>
		<desc id="desc">Orange cat with a red ball close to its legs</desc>
  <defs
     id="defs4">
    <linearGradient
       x2="136.08"
       y2="44.1401"
       y1="44.1401"
       x1="119.07"
       id="LinearGradient_13"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-7.48217e-7,-17.1172)">
      <stop
         id="stop104"
         offset="0.0112782"
         stop-color="#999999" />
      <stop
         id="stop106"
         offset="0.165414"
         stop-color="#dedede" />
      <stop
         id="stop108"
         offset="0.37218"
         stop-color="#ffffff" />
      <stop
         id="stop110"
         offset="0.545113"
         stop-color="#f3f3f3" />
      <stop
         id="stop112"
         offset="0.740601"
         stop-color="#ffffff" />
      <stop
         id="stop114"
         offset="0.977444"
         stop-color="#cfcfcf" />
    </linearGradient>
    <linearGradient
       x2="129.9"
       y2="29.2977"
       y1="29.2977"
       x1="125.25"
       id="LinearGradient_12"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-7.48217e-7,-17.1172)">
      <stop
         id="stop93"
         offset="0"
         stop-color="#999999" />
      <stop
         id="stop95"
         offset="0.199248"
         stop-color="#dedede" />
      <stop
         id="stop97"
         offset="0.37218"
         stop-color="#ffffff" />
      <stop
         id="stop99"
         offset="0.808271"
         stop-color="#d5d5d5" />
      <stop
         id="stop101"
         offset="0.93985"
         stop-color="#f2f2f2" />
    </linearGradient>
    <linearGradient
       x2="128.148"
       y2="27.9886"
       y1="27.9886"
       x1="127.002"
       id="LinearGradient_11"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-7.48217e-7,-17.1172)">
      <stop
         id="stop84"
         offset="0"
         stop-color="#efefef" />
      <stop
         id="stop86"
         offset="0.281955"
         stop-color="#ffffff" />
      <stop
         id="stop88"
         offset="0.518797"
         stop-color="#dbdbdb" />
      <stop
         id="stop90"
         offset="1"
         stop-color="#f2f2f2" />
    </linearGradient>
    <linearGradient
       x2="127.964"
       y2="26.2494"
       y1="26.2494"
       x1="127.186"
       id="LinearGradient_10"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-7.48217e-7,-17.1172)">
      <stop
         id="stop79"
         offset="0"
         stop-color="#3d3d3d" />
      <stop
         id="stop81"
         offset="1"
         stop-color="#666666" />
    </linearGradient>
    <linearGradient
       x2="132.26"
       y2="39.8441"
       y1="39.5683"
       x1="128.7"
       id="LinearGradient_9"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.682914,0,0,0.772308,41.3398,5.35711)">
      <stop
         id="stop72"
         offset="0"
         stop-color="#9b9b91" />
      <stop
         id="stop74"
         offset="0.488722"
         stop-color="#555555" />
      <stop
         id="stop76"
         offset="1"
         stop-color="#2b2b2b" />
    </linearGradient>
    <linearGradient
       x2="130.41"
       y2="73.71"
       y1="56.7"
       x1="130.41"
       id="LinearGradient_8"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.682914,0,0,0.772308,41.35,5.52649)">
      <stop
         id="stop67"
         offset="0"
         stop-color="#dbe18c" />
      <stop
         id="stop69"
         offset="1"
         stop-color="#969d4b" />
    </linearGradient>
    <linearGradient
       x2="100.942"
       y2="222.88"
       y1="73.7676"
       x1="200.809"
       id="LinearGradient_7"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop62"
         offset="0"
         stop-color="#cdaaaa" />
      <stop
         id="stop64"
         offset="1"
         stop-color="#6a6a6a" />
    </linearGradient>
    <linearGradient
       x2="194.655"
       y2="133.244"
       y1="126.036"
       x1="144.394"
       id="LinearGradient_6"
       gradientUnits="userSpaceOnUse">
      <stop
         id="stop57"
         offset="0.0225564"
         stop-opacity="0.2103"
         stop-color="#6667ca" />
      <stop
         id="stop59"
         offset="1"
         stop-opacity="0.463519"
         stop-color="#e75f5f" />
    </linearGradient>
    <path
       transform="matrix(1 -0 -0 1 0 0)"
       d="M144.827+181.58C145.2+156.572+159.864+156.843+174.5+143.695C185.511+133.804+201.747+134.177+201.56+92.9337"
       id="TextPath" />
    <linearGradient
       x2="192.911"
       y2="92.6106"
       y1="157.979"
       x1="180.632"
       id="LinearGradient_5"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1.28968,0,0,1.28968,-60.2721,-21.1562)">
      <stop
         id="stop45"
         offset="0.0263158"
         stop-opacity="0.678112"
         stop-color="#dedede" />
      <stop
         id="stop47"
         offset="0.142857"
         stop-opacity="0.742489"
         stop-color="#f5f5f5" />
      <stop
         id="stop49"
         offset="0.454887"
         stop-opacity="0.802575"
         stop-color="#e9e9e9" />
      <stop
         id="stop51"
         offset="0.909774"
         stop-opacity="0.772532"
         stop-color="#fcfcfc" />
      <stop
         id="stop53"
         offset="1"
         stop-opacity="0.811159"
         stop-color="#e7e7e7" />
    </linearGradient>
    <linearGradient
       x2="204.12"
       y2="122.675"
       y1="122.675"
       x1="153.09"
       id="LinearGradient_4"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1.28968,0,0,1.28968,-60.2721,-21.1562)">
      <stop
         id="stop38"
         offset="0"
         stop-color="#b2b2b2" />
      <stop
         id="stop40"
         offset="0.270677"
         stop-color="#d5d5d5" />
      <stop
         id="stop42"
         offset="0.631579"
         stop-color="#fcfcfc" />
    </linearGradient>
    <linearGradient
       x2="195.615"
       y2="109.451"
       y1="109.451"
       x1="144.585"
       id="LinearGradient_3"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1.28968,0,0,1.28968,-49.3033,-42.3144)">
      <stop
         id="stop31"
         offset="0"
         stop-color="#b2b2b2" />
      <stop
         id="stop33"
         offset="0.270677"
         stop-color="#d5d5d5" />
      <stop
         id="stop35"
         offset="0.631579"
         stop-color="#fcfcfc" />
    </linearGradient>
    <radialGradient
       gradientUnits="userSpaceOnUse"
       cy="170.1"
       gradientTransform="matrix(0.65453,0,0,0.0865311,58.7644,160.458)"
       id="RadialGradient_2"
       r="46.2063"
       cx="170.1">
      <stop
         id="stop26"
         offset="0"
         stop-color="#fbf8ff" />
      <stop
         id="stop28"
         offset="1"
         stop-color="#d0d0d0" />
    </radialGradient>
    <radialGradient
       gradientUnits="userSpaceOnUse"
       cy="170.1"
       gradientTransform="matrix(0.578566,0,0,0.121455,71.6859,158.626)"
       id="RadialGradient"
       r="46.2063"
       cx="170.1">
      <stop
         id="stop21"
         offset="0"
         stop-color="#fbf8ff" />
      <stop
         id="stop23"
         offset="1"
         stop-color="#e8e8e8" />
    </radialGradient>
    <linearGradient
       x2="177.392"
       y2="144.808"
       y1="121.072"
       x1="153.655"
       id="LinearGradient_2"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(-51.8661,-11.1874)">
      <stop
         id="stop16"
         offset="0"
         stop-opacity="0"
         stop-color="#000000" />
      <stop
         id="stop18"
         offset="1"
         stop-opacity="0.317597"
         stop-color="#000000" />
    </linearGradient>
    <linearGradient
       x2="177.392"
       y2="144.808"
       y1="121.072"
       x1="153.655"
       id="LinearGradient"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(9.67543,-11.1874)">
      <stop
         id="stop11"
         offset="0"
         stop-opacity="0"
         stop-color="#000000" />
      <stop
         id="stop13"
         offset="1"
         stop-opacity="0.317597"
         stop-color="#000000" />
    </linearGradient>
  </defs>
  <g
     id="catLayer"
     transform="translate(0,-52.362183)">
    <g
       id="g3640">
      <path
         id="path2997"
				class="body"
         d="m 872.66857,476.10453 c 0,101.08585 -105.80913,163.73055 -274.64799,151.4994 -249.71747,-18.09024 -290.89732,-34.35812 -290.89732,-135.44395 0,-101.08583 119.74748,-179.821 283.3078,-179.821 163.56028,0 282.23751,14.51338 282.23751,163.76555 z" />
      <path
         id="path2987"
				class="face"
         d="m 507.04806,366.18333 c 0,67.49836 -87.92476,139.04266 -167.55765,139.04266 -79.63289,0 -121.12827,-102.23197 -105.9514,-168.00195 15.09939,-65.43425 51.5576,-76.43123 131.19049,-76.43123 79.63289,0 142.31856,37.89216 142.31856,105.39052 z" />
      <g     transform="matrix(0.75187629,0,0,0.75187629,237.15841,125.28848)"
         id="g3788">
        <path
           d="m 169.67034,374.97699 c -19.73823,0 -35.80067,-20.19063 -29.60736,-33.83877 8.15639,-17.97418 51.05831,-17.97418 59.2147,-10e-6 6.19331,13.64813 -9.86911,33.83877 -29.60734,33.83878 z"
           id="path3757" />
        <path
						class="mouth-right"
           d="m 169.625,410.08093 a 4.0004,4.0004 0 0 0 -3.3125,6.25 c 0,0 7.83038,12.0844 20.78125,18.40625 6.47544,3.16093 14.47571,4.85302 23.0625,2.5 8.58679,-2.35302 17.47126,-8.62274 26.21875,-20.3125 a 4.0004,4.0004 0 1 0 -6.40625,-4.78125 c -8.01828,10.71527 -15.47394,15.60381 -21.9375,17.375 -6.46356,1.77119 -12.22868,0.57389 -17.4375,-1.96875 C 180.17611,422.4644 173,411.92468 173,411.92468 a 4.0004,4.0004 0 0 0 -3.375,-1.84375 z"
           id="path3764" />
        <path
           class="mouth-left"
           d="m 169.5625,410.09375 a 4.0004,4.0004 0 0 0 -3.25,1.8125 c 0,0 -7.17611,10.53972 -17.59375,15.625 -5.20882,2.54264 -10.97394,3.77119 -17.4375,2 -6.46356,-1.77119 -13.91922,-6.65973 -21.9375,-17.375 a 4.0004,4.0004 0 1 0 -6.40625,4.78125 c 8.74749,11.68976 17.63196,17.95948 26.21875,20.3125 8.58679,2.35302 16.58706,0.62968 23.0625,-2.53125 C 165.16962,428.3969 173,416.34375 173,416.34375 a 4.0004,4.0004 0 0 0 -3.4375,-6.25 z"
           id="path3764-1" />
      </g>
      <g   transform="matrix(0.75187629,0,0,0.75187629,56.743375,55.48347)"
         id="g3832">
        <path
           id="path3794-7"
					class="right-ear"
           d="m 151.67829,30.230743 c 40.15826,1e-6 117.37992,203.308007 117.37992,203.308007 l -234.759856,-1e-5 c 0,0 76.090016,-203.307998 117.379936,-203.307997 z"             transform="matrix(0.77683995,0,0,1,375.0924,141.17792)" />
        <path
           id="path3794-7-4"
						class="left-ear"
           d="m 151.67829,30.230743 c 34.33281,1e-6 117.37992,203.308007 117.37992,203.308007 l -234.759856,-1e-5 c 0,0 75.976706,-203.307998 117.379936,-203.307997 z"           transform="matrix(0.77683995,0,0,1,208.49493,141.17792)" />
      </g>
      <g        transform="matrix(0.75187629,0,0,0.75187629,63.076963,55.48347)"
         id="g3937">
        <circle
					class="left-eye"
           id="path3836"         transform="matrix(1.2272727,0,0,1.2272727,-465.58179,-48.380113)"
           cx="646.49762"
           cy="344.79953"
           r="27.351822" />
        <circle
           id="path3836-8"
						class="inner-left-eye"
 transform="matrix(0.40909086,0,0,0.40909086,53.424707,225.02575)"
           cx="646.49762"
           cy="344.79953"
           r="27.351822" />
        <circle
           class="right-eye"
           id="path3836-82"
           transform="matrix(1.2272727,0,0,1.2272727,-318.87656,-48.380113)"
           cx="646.49762"
           cy="344.79953"
           r="27.351822" />
        <circle
           id="path3836-8-4"
            class="inner-right-eye" transform="matrix(0.40909086,0,0,0.40909086,200.12993,225.02576)"
           cx="646.49762"
           cy="344.79953"
           r="27.351822" />
      </g>
      <path
         id="path3774"
				class="whiskers-right"
         d="m 394.35264,387.64014 c 0,0 104.96424,3.0973 111.503,1.72072" />
      <path
         id="path3776"
						class="whiskers-right"
         d="m 394.69678,379.7248 c 0,0 68.14073,-15.48653 93.60746,-24.4343" />
      <path
         id="path3778"
				 class="whiskers-right"
         d="m 394.00849,396.58791 c 0,0 87.41285,8.60362 98.08135,14.79823" />
      <path
         id="path3784"
				 class="whiskers-left"
         d="m 334.85433,387.75823 c 0,0 -89.13357,-4.81803 -115.63273,0.68829" />
      <path
         id="path3786"
				 class="whiskers-left"
         d="m 337.858,394.29698 c 0,0 -55.0632,15.14238 -85.00383,12.04508" />
      <path
         id="path3788"
				 class="whiskers-left"
         d="m 337.31226,380.87533 c 0,0 -68.48487,-6.19462 -90.16601,-16.51897" />
      <path
         id="path-front-leg-right" class="front-leg-right"
         d="m 380.05542,564.53069 c 0,0 -2.8481,140.08413 -10.63522,163.44547 -7.78712,23.36133 0.97339,20.44117 -30.17507,12.65406" />
      <path
         id="path3792"
				 class="front-leg-left"
         d="m 443.39777,551.79272 c 0,0 -3.77844,155.90992 -7.7871,183.97055 -1.94678,13.62745 -16.54763,12.65407 -32.12186,13.62746" />
      <path
         id="path3794"
				 class="rear-leg-right"
         d="m 725.68065,589.75489 c 0,0 9.62482,156.83295 7.78711,175.21005 -0.97339,9.7339 -7.78711,13.62746 -17.521,13.62746" />
      <path
         id="path3796"
				 class="rear-leg-left"
         d="m 799.65823,568.34032 c 0,0 19.4678,208.3053 -1.94678,214.14563 0,0 2.92017,4.86695 -17.52101,6.81372" />
      <path
         id="path3802"
				 class="tail"
         d="m 775.9596,426.32134 c 0,0 63.94123,27.86219 99.28979,-40.11651 C 910.59802,318.22614 886.34505,262.414 835.67107,209.07277 784.99711,155.73155 916.36206,120.90659 950.18709,94.56289" />
      <path
         id="path3871"
				 class="stripes"
         d="m 575.21452,312.57177 c -11.47155,0.34725 -22.68272,1.10798 -33.65625,2.21875 8.44392,7.2691 39.55152,36.96042 39.5625,80.28125 l 0.0312,50.09375 c 0,0 23.78848,-79.12661 -3.40625,-128.875 -0.72061,-1.31824 -1.42702,-2.53287 -2.125,-3.71875 -0.13435,0.004 -0.27196,-0.004 -0.40625,0 z m 65.71875,0.4375 c 4.4294,13.88702 16.00812,54.25431 18.21875,103.625 2.74629,61.33381 4.59375,64.09375 4.59375,64.09375 0,0 14.80291,-109.0663 5.84375,-166.53125 -9.31824,-0.53623 -18.8903,-0.90426 -28.65625,-1.1875 z m 84.8125,6.84375 c 5.11578,19.99554 17.71582,71.87674 20.625,108.96875 3.66172,46.68693 2.75,32.03125 2.75,32.03125 0,0 12.25907,-81.64621 0.5,-136.5 -7.66958,-1.72981 -15.63822,-3.21797 -23.875,-4.5 z" />
    </g>
    <g
       id="g3669">   
      <circle
         id="path6591" class="ball"
         transform="scale(-1,1)"
         cx="-250"
         cy="845.76721"
         r="126.37884" />
    </g>
  </g>
</svg>

	<div class="buttons-holder">
		<a href="#" class="button play" role="button">Play</a>
		<a href="#" class="button pause" role="button">Pause</a>
		<a href="#" class="button restart" role="button">Restart</a>
	</div>
	<!--/.buttons-holder -->
</section>
            
          
!
            
              * {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
}

.wrapper {
	width: 100%;
	margin: 20px auto 0;
	padding: 0;
	overflow: hidden;
}

.buttons-holder {
	padding: 1em;
	display: flex;
	justify-content: center;
}

.buttons-holder .button {
	margin-right: 1em;
	text-decoration: none;
	font-size: 1.2em;
	padding: 0.5em;
	border-radius: 3px;
	text-transform: uppercase;
	background-color: red;
	color: white;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
	transition: all 0.5s;
}

.buttons-holder .button:last-child {
	margin-right: 0;
}

.buttons-holder .button:hover,
.buttons-holder .button:focus {
	background-color: darkred;
	transform: scale(1.1);
	box-shadow: 0px -2px 1px rgba(0, 0, 0, .7);
}


/* SVG styles */

svg {
	display: block;
	border-radius: 20px;
}

.body {
	fill: #ff9c00;
	stroke: none;
}

.face {
	fill: #ff9b00;
	stroke: none;
}

.mouth-right,
.mouth-left {
	fill: #2f2f2f;
	stroke: none;
}

.right-ear,
.left-ear {
	fill: #ff9b00;
	stroke: none;
}

.left-eye,
.right-eye {
	fill: #ffffff;
	stroke: none;
}

.whiskers-right,
.whiskers-left {
	fill: none;
	stroke: #ffffff;
	stroke-width: 3.75938153;
	stroke-linecap: round;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
	stroke-dasharray: none;
}

.front-leg-right,
.front-leg-left,
.rear-leg-right,
.rear-leg-left {
	fill: none;
	stroke: #ff9c00;
	stroke-width: 37.59381485;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 4;
}

.tail {
	fill: none;
	stroke: #ff9c00;
	stroke-width: 37.59381485;
	stroke-linecap: round;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
}

.stripes {
	fill: #ffbb50;
	fill-opacity: 1;
	stroke: none;
}

.ball {
	fill: #be0000;
	stroke: none;
}

@media (min-width: 600px) {
	.wrapper {
		width: 70%;
	}
	.kicking-cat {
		width: 100%;
		display: block;
		margin: 0 auto;
		border: 2px solid darkred;
	}
}
            
          
!
            
              var btnPlay = document.querySelector('.play'),
	btnPause = document.querySelector('.pause'),
	btnRestart = document.querySelector('.restart');

var movingEyes = anime({
	targets: ['.inner-left-eye', '.inner-right-eye'],
	cy: 400,
	duration: 500,
	delay: function(el, index) {
		var singleDelay = index === 0 ? 300 : index * 500;
		return singleDelay;
	},
	autoplay: false
});

var movingTail = anime({
	targets: '.tail',
	transform: ['translate(10 2)', 'translate(0 0)'],
	delay: movingEyes.duration + 1000,
	autoplay: false
});

var kickingCat = anime({
	targets: '.front-leg-right',
	translateX: '-20px',
	duration: 300,
	delay: movingTail.duration + 300,
	easing: 'easeInCubic',
	autoplay: false
});

var movingBall = anime({
	targets: '.ball',
	cx: 50,
	easing: 'easeOutBounce',
	delay: kickingCat.duration + 100,
	autoplay: false
});

btnPlay.addEventListener('click', function(e) {
	e.preventDefault();
	movingEyes.play();
	movingTail.play();
	kickingCat.play();
	movingBall.play();
});

btnPause.addEventListener('click', function(e) {
	e.preventDefault();
	movingEyes.pause();
	movingTail.pause();
	kickingCat.pause();
	movingBall.pause();
});

btnRestart.addEventListener('click', function(e) {
	e.preventDefault();
	movingEyes.restart();
	movingTail.restart();
	kickingCat.restart();
	movingBall.restart();
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console