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 id="fishVector" version="1.1"  width="502.5" height="415" viewBox="0 0 502.5 415">
  <defs id="defs3848"/>
 
  <g id="back-fin">
  <path d="m 198.97652,410.03955 c -32.9481,-22.74697 -59.88276,-53.09839 -86.28254,-82.91031 22.34568,6.24449 35.31656,27.30199 50.02841,43.94321 10.40109,10.1007 26.72704,29.59705 37.8895,29.62597 -4.13913,-9.15882 -25.67415,-26.59378 -5.78297,-22.05182 -3.58261,-16.95572 -25.14845,-38.52109 -5.51861,-52.34245 8.31682,-8.8124 34.65003,-33.05212 6.91824,-23.79604 -8.96323,2.31494 -42.7119,5.01708 -16.74159,-2.6707 12.172,-2.04862 17.18888,-10.19807 1.13488,-8.29545 -16.67003,-1.7338 -39.5132,16.65218 -38.289,-10.28254 C 110.1299,262.03286 84.301298,232.39158 68.75,198.26252 c 15.813925,-7.31305 14.507531,12.17297 20.915758,21.03129 14.057502,27.21837 36.657072,52.65035 68.170282,58.29558 21.04743,6.74375 45.5439,4.13029 63.32333,19.23745 -7.80115,15.7328 -18.14018,29.98586 -29.7512,43.09127 -0.83285,22.88756 17.39153,43.42074 20.62753,66.60018 3.78729,11.90537 -7.81134,6.15163 -13.05918,3.52126 z" id="path3887"/>
  <path d="m 104.9715,259.28755 c -20.183368,-16.65262 -41.918696,-37.69936 -49.230989,-62.8057 18.43389,4.00333 18.137386,37.85451 37.35078,48.31514 2.809012,3.49548 29.913659,27.42308 11.880209,14.49056 z" id="path3885"/>
  <path d="M 71.07326,239.0625 C 64.421848,227.35134 35.603046,207.39527 48.207158,197.11232 59.168554,214.31307 69.735078,234.71327 83.386865,251.25 79.056149,247.43292 75.139729,243.15527 71.07326,239.0625 Z" id="path3877"/>
  <path d="m 50.408482,230.9375 c -7.375703,-4.1253 -29.392788,-40.98171 -9.772302,-23.5698 2.186179,4.03913 24.870876,40.31085 9.772302,23.5698 z" id="path3875"/>
  </g>
  
	<g id="top-body">
  <path d="m 354.92024,263.30892 c -23.88047,-0.5585 -51.96364,-10.09228 -59.24478,-35.55582 -3.6252,-8.78313 -0.99393,-42.16788 1.77727,-16.74477 6.23367,34.86205 43.9565,51.20982 76.19311,50.23223 22.84383,0.1307 -13.68708,2.71512 -18.7256,2.06836 z" id="path3883"/>
  <path d="m 486.59725,261.22052 c -13.79914,-10.92796 -30.7183,-26.65176 -49.40033,-20.94173 8.1235,-21.59341 29.65359,-31.75315 51.66015,-35.57071 28.92112,-1.69411 -18.94368,3.92815 -24.90086,14.32743 -9.08402,6.93476 -23.3091,18.29314 -3.04612,20.513 12.68613,9.02912 24.05834,6.49432 33.24986,8.00565 8.71078,6.50243 3.22214,20.45221 -7.5627,13.66636 z" id="lips"/>
  <path d="m 426.05401,251.8927 c -26.87467,-6.17702 -57.32477,-5.07586 -80.71345,-21.0815 20.51183,6.20167 42.07584,9.31667 63.23006,12.95788 2.82748,0.18503 37.04408,14.57622 17.48339,8.12362 z" id="path3879"/>
  <path d="m 429.0625,214.15697 c 0.75707,-11.67014 32.4043,-10.07464 46.14477,-12.8274 -13.20019,0.39724 -25.3192,15.63435 -39.42758,14.68795 l -2.76735,-0.41746 -3.94984,-1.44308 0,-1e-5 z" id="path3873"/>
  <path d="m 420.77511,206.07291 c -4.25139,-24.70957 -10.66642,-53.27039 -35.17974,-65.64611 -14.56655,-16.34072 -47.24929,-12.94146 -58.5909,-17.64531 7.41577,-6.2221 25.96401,-6.84131 9.52255,-14.38865 C 290.65017,75.140713 234.03086,58.735122 177.56005,59.44891 117.07044,56.381924 51.337601,76.162811 13.903111,126.3703 8.2991591,133.94076 -4.264677,155.22506 6.8209565,133.83561 34.813042,81.64263 93.516565,51.348737 151.56992,48.91537 205.16453,44.917269 260.73544,51.546587 308.44929,77.705214 373.30215,109.29482 432.70071,151.06048 488.70095,196.25 c -22.36704,1.77188 -46.42748,0.13849 -66.94761,10.81631 l -0.97823,-0.9934 0,0 z" id="path3871"/>
  <path d="M 260.28955,191.83304 C 242.05517,170.19983 215.91671,157.12403 189.375,148.6264 c 29.23883,2.73262 59.62601,9.4336 83.29014,27.7589 -15.29685,3.74833 0.9482,35.14972 -12.37559,15.44774 z" id="path3869"/>
  <path d="M 243.09064,132.10867 C 188.4568,107.51346 125.68571,103.14978 67.593522,117.05716 c 16.048324,-8.38871 42.160018,-12.99039 62.905838,-13.77841 40.33383,-3.1602 82.38392,6.39207 115.74274,29.53375 l -0.49927,0.83704 -2.65219,-1.54086 0,-1e-5 z" id="path3867"/>
  <path d="M 224.375,47.398999 C 214.84778,43.113314 198.10021,13.019222 202.43154,15 c 2.40789,8.198187 31.04149,33.10963 21.94346,32.398999 z" id="path3865"/>
  <path d="M 213.125,46.267019 C 195.0322,43.558169 190.76751,17.232253 175.74782,11.5625 c 0.75169,-26.333162 20.28941,12.713257 24.73027,20.581255 -1.1093,5.777346 28.3501,17.905787 12.64691,14.123264 z" id="path3863"/>
  <path d="M 186.44376,42.677285 C 181.09506,30.579943 161.04219,15.577963 165.05711,8.4995774 174.65634,18.309371 188.55592,35.028647 192.4125,43.6254 l -3.00629,-0.329906 -2.96245,-0.618209 z" id="path3861"/>
  <path d="m 156.02897,41.613509 c -10.07773,-1.792373 -6.93536,-18.127073 -0.0915,-3.287477 0.28775,0.510922 9.28201,7.438284 0.0915,3.287477 z" id="path3859"/>
  <path d="m 171.68477,41.511446 c -6.7568,-15.19992 -27.9387,-15.836065 -37.97336,-9.961889 12.98477,-5.038723 17.26053,-28.3786875 28.7147,-7.692645 1.49047,3.587775 23.78923,20.763088 9.25866,17.654534 z" id="path3854"/>
	</g>
	
	
	
	
<g id="back-fin-flap" class="hidden-g">
	<path id="path3887" d="M237.998,409.662c-5.813,0.825-18.638,2.595-11.263-7.489c10.436-20.949,34.242-34.625,40.728-56.59   c-6.844-16.116-12.115-32.916-14.51-50.313c21.658-8.672,44.055,1.593,66.153,1.89c31.673,4.664,61.186-12.266,83.165-33.604   c8.891-6.361,13.847-25.253,26.516-13.292c-25.593,27.416-59.504,47.31-96.148,55.303c-7.4,25.927-23.215,1.233-39.571-2.421   c-14.616-6.908-12.451,2.414-1.562,8.226c22.18,15.544-8.96,2.254-16.722-2.79c-23.352-17.592-6.089,13.763-1.005,24.762   c14.219,19.344-13.084,32.936-21.871,47.873c20.305,2.016-5.656,11.701-12.491,19.069c10.593,3.521,32.269-9.774,45.341-16.046   c19.238-11.101,38.23-26.943,61.402-25.761C311.652,378.353,276.467,398.568,237.998,409.662L237.998,409.662z"/>
	<path id="path3885" d="M390.916,286.647c21.543-3.811,32.022-36,50.771-33.936c-14.913,21.479-42.211,34.524-66.642,43.897   C353.838,303.14,387.142,289.069,390.916,286.647z"/>
	<path id="path3877" d="M398.066,295.851c18.201-11.34,34.704-27.323,50.564-40.147c8.681,13.756-24.986,23.517-35.016,32.506   C408.459,290.798,403.385,293.608,398.066,295.851z"/>
	<path id="path3875" d="M452.549,267.833c24.138-10.271-8.454,17.675-16.758,19.241   C416.154,298.147,449.192,270.968,452.549,267.833z"/>
</g>
<g id="top-body-flap" class="hidden-g">
	<path id="path3883" d="M128.854,178.423c-4.659-2.026-34.713-22.953-15.024-11.366c27.187,17.349,67.96,22.625,91.168-4.126   c15.399-20.416,0.562,9.605-7.049,15.293C178.653,196.366,149.65,190.172,128.854,178.423L128.854,178.423z"/>
	<path id="lips" d="M17.327,93.583c8.668,3.408,17.138,11.41,32.658,10.152c18.542,8.469,12.14-8.57,7.889-19.18   c0.209-11.982-38.023-41.325-14.051-25.059c16.948,14.55,30.236,34.302,26.155,57.01c-13.121-14.474-35.706-9.632-53.155-7.313   C4.085,109.499,6.514,94.708,17.327,93.583z"/>
	<path id="path3879" d="M73.602,132.188c-20.105-4.475,16.653,0.687,19.177,1.977c20.035,7.705,40.151,16.073,60.945,21.25   C125.438,157.186,99.848,140.646,73.602,132.188L73.602,132.188z"/>
	<path id="path3873" d="M90.342,98.236l-4.131-0.785l-2.59-1.057c-12.603-6.413-15.208-25.707-26.342-32.808   C67.67,72.987,95.67,87.824,90.342,98.236L90.342,98.236z"/>
	<path id="path3871" d="M101.602,95.537L101.602,95.537l-1.349,0.352c-12.156-19.68-33.66-30.599-51.963-43.576   c71.242-10.135,143.65-15.587,215.531-9.508c54.378,1.968,105.504,24.734,149.487,55.613   c48.617,31.822,83.525,87.905,80.838,147.069c-1.434,24.049-1.322-0.667-2.26-10.039c-6.441-62.295-52.77-112.947-106.295-141.292   c-48.137-29.533-105.17-44.438-161.604-39.373c-17.987-1.938-2.373,8.093,0.811,17.236c-12.149-1.768-38.482-21.426-59.361-14.851   C138.044,55.245,117.908,76.49,101.602,95.537L101.602,95.537z"/>
	<path id="path3869" d="M244.019,145.888c29.709-3.62,59.242,6.187,85.754,18.813c-27.146-6.294-56.295-8.448-83.035,0.793   C225.203,175.594,255.237,156.941,244.019,145.888z"/>
	<path id="path3867" d="M292.096,123.004l-3.066-0.034l-0.001-0.976c40.504-2.792,81.513,10.537,114.537,33.908   c17.416,11.302,37.486,28.625,46.975,44.049C407.767,158.257,351.616,129.858,292.096,123.004L292.096,123.004z"/>
	<path id="path3865" d="M386.993,43.241c4.734,0.517-25.063,17.788-35.441,16.59C343.374,55.782,380.725,49.048,386.993,43.241z"/>
	<path id="path3863" d="M379.89,58.966c7.844-4.483,44.621-28.015,31.781-5.013c-15.803-2.822-32.948,17.605-49.876,10.667   C346.37,59.827,377.884,64.496,379.89,58.966z"/>
	<path id="path3861" d="M386.55,75.201l-2.861-0.987l-2.751-1.256c7.714-5.409,28.216-12.65,41.485-16.161   C422.245,64.934,397.339,67.548,386.55,75.201L386.55,75.201z"/>
	<path id="path3859" d="M414.981,87.087c13.479-9.243,7.811,6.398-1.764,2.775C403.198,88.722,414.472,87.378,414.981,87.087z"/>
	<path id="path3854" d="M399.823,81.758c-14.071-4.772,13.877-8.104,16.994-10.422c20.432-11.902,12.15,10.335,20.725,21.313   C431.931,82.464,413.411,72.162,399.823,81.758L399.823,81.758z"/>
</g>
</svg>
              
            
!

CSS

              
                body {
 margin:0;
 background: #333;
  perspective: 800px;
}

svg {
  display: block;
  margin: 20px auto;
  width:400px;
}

path {
	fill: #000000;
}

.hidden-path, .hidden-g {
  visibility: hidden;
}

#breath-start {
  opacity: 0;
}

#breath-start, #breath-end {
  fill: #777;
}

.nose-hole {
    fill: #333;
}

.eye-reflect {
    fill: #667;
}
              
            
!

JS

              
                watchSVGs();

function watchSVGs() {
  var fish = new function() {     
    this.TL = {
      //blink: new TimelineMax({ repeat:-1, repeatDelay: 2.4, delay: 3, onRepeat: this.resetBlink }),
      flap: new TimelineMax({ repeat:-1, delay: 3 })
    }
    this.$vector = $("#fishVector");  
    this.$ = {
      backFin: this.$vector.find("#back-fin"),
			topBody: this.$vector.find("#top-body"),
      breathEnd: this.$vector.find("#breath-end"),
      head: this.$vector.find(".fishHead"),
      eyes: this.$vector.find(".eye"),
      eyeReflects: this.$vector.find(".eye-reflect"),
      leftEar: this.$vector.find("#left-ear"),
      rightEar: this.$vector.find("#right-ear"),
      nose: this.$vector.find("#nose"),
      jaw: this.$vector.find("#jaw"),
      fly: this.$vector.find("#fly")
    }
  };
console.log(fish)
  
  var gBefore = document.getElementById("top-body").children,
    gAfter = document.getElementById("top-body-flap").children;
	for (var i=0; i < gBefore.length; ++i) {
					fish.TL.flap.to(gBefore[i], 0.8, {
					morphSVG: gAfter[i]
			}, 0)
	}
	
	
	gBefore = document.getElementById("back-fin").children;
 	gAfter = document.getElementById("back-fin-flap").children;
	for (var i=0; i < gBefore.length; ++i) {
					fish.TL.flap.to(gBefore[i], 0.8, {
					morphSVG: gAfter[i]
			}, 0)
	}
	
	console.log('backfin', fish.$.backFin, fish.TL.flap);
  };
              
            
!
999px

Console