cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!-- svg art from http://www.iheartvector.com/2009/08/27/animal-silhouettes-vector-pack/ -->

<svg version="1.1"
	 id="svg2"  x="0px" y="0px" width="819.2px"
	 height="561.298px" viewBox="0 0 819.2 561.298" style="enable-background:new 0 0 819.2 561.298;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#ccc;}
</style>
<path id="hippo" class="st0" d="M13.833,231.876c4.154-55.746,24.442-104.83,60.85-147.292
	c41.031-47.948,92.453-71.909,154.224-71.909c23.493,0,58.398,3.714,104.745,11.058C380,31.148,414.891,34.778,438.411,34.778
	c35.955,0,87.816,13.426,155.586,40.18c12.009,4.566,26.513,17.056,43.554,37.315c9.683,11.967,24.669,30,44.943,53.975
	c4.608,3.246,10.62,8.068,18.005,14.56c7.374,6.408,12.435,9.201,15.171,8.28c0.935-2.792,3.261-6.677,6.947-11.738
	c1.842-1.858,2.978-2.78,3.431-2.78c1.418,0.922,2.779,1.844,4.168,2.78c1.375,0.935,1.829,3.672,1.375,8.28
	c-0.935,8.307-1.375,10.832-1.375,7.584c-0.496,4.637-1.148,7.6-2.083,9.032c-5.997,10.123-8.323,17.978-6.905,23.478
	c1.389,5.046,5.713,13.156,13.114,24.216c7.387,11.058,11.513,19.365,12.433,24.895c-0.453,4.141-0.652,10.803-0.652,20.048
	l-6.932,17.268c0,12.917,14.971,35.075,44.943,66.437c14.319,6.408,21.423,28.568,21.423,66.337
	c0,29.547-24.415,44.262-73.256,44.262c-6.465,0-13.37-0.197-20.756-0.708c-5.061-1.815-12.448-3.885-22.118-6.182
	c-11.511-1.417-19.365-5.302-23.491-11.796c-7.401-10.547-19.396-20.501-35.983-29.715c-2.766-1.333-6.806-6.408-12.108-15.199
	c-5.316-8.762-10.038-14.291-14.164-16.616c-4.126-2.269-10.136-2.751-17.992-1.333c-13.37,2.268-20.755,3.431-22.117,3.431
	c-3.246,0-7.967-0.907-14.178-2.779c-6.237-1.844-10.704-2.779-13.496-2.779c-3.206,14.773-3.929,29.063-2.07,42.873
	c0.453,3.715,2.779,6.72,6.918,8.988c6.479,4.622,9.911,7.146,10.393,7.657c4.125,3.204,8.521,8.506,13.114,15.851
	c0.935,2.806-0.794,7.514-5.189,14.177c-4.382,6.693-7.925,10.634-10.719,11.739c-2.751,1.192-8.749,1.787-17.978,1.787
	c-13.384,0-18.658,0.199-15.88,0.652c-18.43-2.779-28.808-4.367-31.134-4.792c-11.513-2.324-21.437-5.983-29.717-11.086
	c-4.183-2.751-8.974-15.681-14.503-38.734c-5.587-24.897-10.193-39.868-13.866-44.972c-0.907-1.36-2.056-2.012-3.431-2.012
	c-2.326,0-6.138,2.268-11.427,6.918c-5.302,4.537-8.889,7.06-10.704,7.6c-6.437,27.164-9.712,40.065-9.712,38.648
	c0,10.633,2.992,19.564,8.99,26.966c5.983,7.372,12.236,14.518,18.701,21.408c7.825,8.762,11.739,16.362,11.739,22.827
	c0,3.657-1.135,6.861-3.46,9.669c-9.683,11.966-25.832,17.978-48.417,17.978c-25.363,0-41.951-3.46-49.763-10.379
	c-10.165-8.762-16.616-18.005-19.367-27.617c-0.453-2.326-1.601-9.244-3.46-20.756c-0.922-6.947-3.005-11.058-6.195-12.42
	c-9.258-1.389-20.771-3.913-34.566-7.599c-2.793-1.844-5.784-6.465-9.017-13.837c-5.968-14.264-10.364-23.96-13.143-29.036
	c-13.852-6.919-35.968-14.717-66.408-23.451c-1.389,2.779-2.041,6.636-2.041,11.712c5.061,6.465,12.661,16.389,22.812,29.715
	c8.294,11.06,12.448,21.693,12.448,31.815c0,19.396-12.448,29.036-37.344,29.036c-18.898,0-31.8-1.333-38.732-4.112
	c-10.123-4.139-18.658-13.865-25.576-29.036c-11.527-25.406-17.978-39.696-19.367-42.9c-7.387-17.043-12.449-32.07-15.184-45
	c-1.871-9.188-4.65-23.294-8.323-42.193c-3.219-15.624-8.28-27.858-15.197-36.621C23.743,284.206,11.977,255.836,13.833,231.876z"/>
<path id="elephant" class="st0" d="M450.43,65.291c13.394,0,26.387,7.755,39.017,23.247c12.6,15.491,19.9,23.247,21.876,23.247
	h18.954c40.969,0,72.705,20.505,95.187,61.512c5.924,11.478,14.977,28.333,27.224,50.604c12.193,22.307,26.418,38.768,42.595,49.421
	c18.123,11.843,36.452,18.372,54.975,19.524c8.659,0.4,18.154-1.188,28.413-4.76c9.065-3.965,18.117-7.942,27.176-11.908
	l5.918,13.133c-29.165,22.386-56.959,33.931-83.383,34.731c-28.37,0.789-58.948-6.106-91.652-20.645
	c27.976,32.342,52.047,52.053,72.159,59.118l-4.73,4.766c-35.482-6.312-68.223-24.473-98.176-54.425l-23.659,14.14
	c0,1.588-1.473,3.256-4.432,5.02c-2.959,1.771-4.263,3.22-3.868,4.408c1.588,5.124,9.682,17.716,24.259,37.72
	c14.588,20.076,21.876,30.686,21.876,31.839c0,3.54-4.541,7.069-13.606,10.616c-9.059,3.535-13.976,7.471-14.764,11.799
	c-0.8,3.542,0.364,7.87,3.541,12.964c3.134,5.123,4.722,8.228,4.722,9.446c0,7.84-6.899,12.745-20.675,14.733
	c-2.395,0.364-9.896,0.582-22.494,0.582c-23.641,0-40.605-5.311-50.859-15.886c-8.27-9.021-14.8-25.52-19.53-49.452
	c-1.588-8.228-4.329-22.955-8.27-44.183c-40.206,10.247-81.612,15.377-124.212,15.377c-26.03,0-54.218-1.953-84.582-5.918
	c5.135,13.023,12.429,34.725,21.924,65.077c-19.718-2.77-43.394-6.706-70.976-11.835c-12.242,18.517-22.708,27.399-31.372,26.606
	c-15.377-1.159-37.471-8.846-66.242-23.028c-7.105-3.542-10.647-8.882-10.647-15.989c0-7.082,5.53-20.111,16.565-39.03
	c11.017-18.911,16.935-32.123,17.729-39.629c0.795-6.724-1.146-15.952-5.881-27.799c-5.918-15.383-9.277-25.405-10.066-30.171h2.377
	l-4.735-14.195c-18.153,19.712-34.718,34.112-49.7,43.176c-17.366,10.642-37.871,17.572-61.513,20.677
	c-4.729-4.693-7.869-7.064-9.458-7.064c29.17-12.635,57.978-32.529,86.347-59.753c1.195-1.188,8.665-6.487,22.496-15.989
	c7.864-5.117,12.593-11.186,14.187-18.292c9.841-39.417,29.952-67.254,60.312-83.425c24.835-13,59.747-19.493,104.681-19.493
	c20.506,0,40.037,1.371,58.554,4.116c8.67,2.377,22.488,5.161,41.406,8.295c1.588-15.692,7.112-29.625,16.57-41.794
	C422.642,72.367,435.454,65.291,450.43,65.291z"/>
  <path id="buffalo" class="st0" d="M526.991,49.247c17.28,0,39.159,1.076,65.703,3.161c37.488,2.966,61.505,9.949,72.025,20.933
	c5.478,5.518,12.228,16.322,20.221,32.36c8.019,17.345,14.755,29.185,20.234,35.506c4.624-5.894,8.394-9.909,11.373-11.982
	c8.848-6.761,15.35-11.192,19.547-13.265c0,10.946,0.752,17.152,2.242,18.628c1.45,1.451,7.487,2.617,18.006,3.459
	c34.51,2.124,51.803,33.278,51.803,93.515c0,11.373-0.622,24.223-1.891,38.551c-3.355,37.878-12.242,64.253-26.53,78.994
	c-2.552,2.487-9.392,5.116-20.571,7.863c-11.128,2.733-18.201,7.046-21.128,12.94c-3.822,7.178-7.59,21.063-11.36,41.738
	c-3.835,23.59-6.996,38.707-9.495,45.456l-9.496-12.604c-10.933-21.517-19.158-37.489-24.638-48.047
	c-11.387-20.221-22.747-30.74-34.12-31.594c-7.993-0.842-20.416,2.124-37.244,8.834c-12.668,5.493-25.079,10.96-37.294,16.426
	l-32.85,8.886c-11.375,4.612-19.16,13.019-23.382,25.247c-1.671,15.156-1.258,26.75,1.27,34.743
	c1.243,3.782,5.79,8.563,13.575,14.223c7.798,5.675,11.71,10.221,11.71,13.577c0,7.603-5.673,13.926-17.06,18.938
	c-9.301,4.235-18.369,6.322-27.177,6.322c-14.315-3.77-24.64-7.565-30.987-11.335c-5.039-1.698-7.538-7.605-7.538-17.695
	c0-4.637,0.375-11.373,1.23-20.248c0.842-8.796,1.269-15.584,1.269-20.221c0-5.466-0.427-10.182-1.269-14.184
	c-0.854-4.003-5.363-6.866-13.562-8.562c-8.214-1.658-12.98-3.536-14.211-5.661c-7.164-12.216-9.703-32.657-7.578-61.285h-79.603
	c-26.154-0.454-51.829-9.47-77.076-27.177c-2.979,4.637-8.874,9.145-17.695,13.614c-8.874,4.392-13.692,7.682-14.548,9.755
	c-0.856,4.21-4.21,10.454-10.104,18.628c-5.895,8.264-9.055,14.896-9.483,19.897c-3.355,33.318,19.82,71.416,69.524,114.37
	c-16.853,6.749-32.889,10.105-48.046,10.105c-3.77,0-7.605-0.195-11.373-0.609c0-3.368,0.22-9.872,0.647-19.6
	c0.427-7.979,0-13.874-1.269-17.656c-3.783-11.413-11.789-25.714-24.017-43.008c-13.459-18.913-22.099-32.812-25.881-41.673
	l6.943-45.508l-15.156,14.509c-8.433,13.886-17.087,27.748-25.908,41.633c-8.446,15.972-13.265,31.324-14.548,46.013
	c-1.683,22.281,12.009,46.039,41.077,71.247c-1.697-0.415-4.612,0.117-8.834,1.593c-4.21,1.464-6.322,2.811-6.322,4.08
	c-22.306-3.782-35.584-7.798-39.795-11.995c-5.48-7.538-9.068-18.693-10.751-33.421c-0.44-12.19-0.856-24.405-1.269-36.634
	c-0.44-5.466-1.244-15.727-2.527-30.935c-1.269-13.42-1.878-23.938-1.878-31.529c0-7.565,5.234-17.981,15.779-31.246
	c10.519-13.265,16.646-22.591,18.356-28.071c1.231-5.48-1.076-19.133-6.983-41.026c-7.19-25.649-10.726-43.343-10.726-52.981
	c0-5.907,0.816-10.726,2.487-14.534c-5.453,39.6-12.825,65.897-22.073,78.967C74,321.722,51.072,337.682,27.885,337.682
	c-6.749,0-11.607-2.073-14.534-6.322c-3.343-5.001-3.044-10.959,0.958-17.695c3.977-6.762,15.779-12.773,35.378-18.019
	c19.587-5.271,31.479-10.634,35.701-16.114c5.895-8.019,11.375-26.802,16.413-56.299c4.651-25.766,12.424-42.606,23.382-50.624
	c38.332-27.009,78.54-46.712,120.642-59.16c42.113-12.449,73.734-21.634,94.796-27.489
	C410.948,61.501,473.076,49.247,526.991,49.247z"/>
</svg>

            
          
!
            
              
svg {
  display: block;
 visibility:hidden;
  margin: auto;
  overflow: visible;
}
body {
  background: #1d1d1d;
}

#elephant, #buffalo{
  visibility:hidden;
}
            
          
!
            
              var hippo = $("#hippo").attr("d");

TweenLite.set("svg", {visibility:"visible"})

var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, delay:1});
tl.to("#hippo", 1, {morphSVG:"#buffalo" , ease:Back.easeInOut})
  .to("#hippo", 1, {morphSVG:"#elephant", ease:Back.easeOut}, "+=0.5")
  .to("#hippo", 1, {morphSVG:hippo,  ease:Back.easeOut}, "+=0.5")

//tl.timeScale(0.3)
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console