HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs 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 its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="animation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -100 800 800" preserveAspectRatio="xMidYMid meet"><style><![CDATA[
.st0{fill:#463E37;}
.st1{fill:#E0CCA9;}
.st2{fill:#E9DAC2;}
.st3{fill:#B21F29;}
.st4{fill:#B2421F;}
.st5{fill:#B72D0D;}
.st6{fill:#598209;}
.st7{fill:#F4C708;}
.st8{fill:#287F04;}
.st9{fill:#F7FCB6;}
.st10{fill:#F9ECC5;}
.st11{fill:#C6350E;}
.st12{fill:#9AAF77;}
.st13{fill:#6B07A0;}
.st14{fill:#D4582A;}
.st15{fill:#729E07;}
.st16{fill:#789344;}
]]></style><g id="Calque_2"><circle class="st12" cx="412.5" cy="297.5" r="342.5"/><circle class="st10" cx="74.05" cy="208.982" r="18"/><circle class="st10" cx="67.644" cy="243.391" r="18"/><circle class="st10" cx="99.083" cy="232.969" r="18"/><circle class="st7" cx="79.386" cy="226.759" r="10.5"/><path class="st8" d="M112.73 160s6.393 12.833 3.05 25.76c-3.344 12.925-15.156 21.05-15.156 21.05s-6.392-12.833-3.05-25.76c3.345-12.926 15.157-21.05 15.157-21.05z"/><path class="st8" d="M135 186.31s-2.856 9.053-10.394 13.673-16.9 3.06-16.9 3.06 2.856-9.054 10.393-13.674c7.537-4.622 16.9-3.06 16.9-3.06z"/><circle class="st10" cx="227.3" cy="599.436" r="20.663"/><circle class="st10" cx="260.095" cy="622.647" r="20.663"/><circle class="st10" cx="264.335" cy="584.864" r="20.663"/><circle class="st7" cx="248.398" cy="602.415" r="12.053"/><path class="st8" d="M194.82 535.575s16.448-.498 28.318 9.198c11.87 9.696 14.665 25.913 14.665 25.913s-16.45.5-28.32-9.197c-11.87-9.697-14.664-25.915-14.664-25.915z"/><path class="st8" d="M232.948 525s8.065 7.327 9.26 17.405-4.93 19.09-4.93 19.09-8.066-7.33-9.262-17.406c-1.195-10.08 4.932-19.09 4.932-19.09z"/><circle class="st10" cx="569.701" cy="27.975" r="18"/><circle class="st10" cx="603.258" cy="37.92" r="18"/><circle class="st10" cx="596.157" cy="5.568" r="18"/><circle class="st7" cx="587.936" cy="24.513" r="10.5"/><path class="st8" d="M525-15.583s13.428-5.025 25.937-.357S570.3 1.318 570.3 1.318s-13.427 5.025-25.937.357C531.853-2.992 525-15.583 525-15.583zM553.48-35s8.707 3.78 12.52 11.757c3.813 7.976 1.287 17.126 1.287 17.126s-8.707-3.78-12.52-11.757S553.48-35 553.48-35z"/><circle class="st6" cx="211.294" cy="13.544" r="18"/><circle class="st6" cx="178.005" cy="24.354" r="18"/><circle class="st6" cx="202.18" cy="46.995" r="18"/><circle class="st13" cx="198.226" cy="26.725" r="10.5"/><g><circle class="st6" cx="653.001" cy="91.459" r="18.001"/><circle class="st6" cx="674.445" cy="119.121" r="18"/><circle class="st6" cx="687.562" cy="88.707" r="18.001"/><circle class="st13" cx="669.829" cy="99.292" r="10.5"/><path class="st15" d="M642.128 30s13.836 3.757 21.27 14.848 5.648 25.315 5.648 25.315-13.836-3.756-21.27-14.848C640.345 44.225 642.13 30 642.13 30zM676.587 30.857s4.863 8.152 3.304 16.854-8.95 14.66-8.95 14.66-4.863-8.153-3.304-16.855c1.56-8.702 8.95-14.658 8.95-14.658zM698.275 111.905s12.214-7.507 25.387-5.325c13.17 2.183 22.313 13.226 22.313 13.226s-12.214 7.507-25.386 5.324c-13.174-2.182-22.315-13.225-22.315-13.225z"/></g><g><circle class="st6" cx="69.385" cy="397.862" r="14.64"/><circle class="st6" cx="86.825" cy="420.36" r="14.639"/><circle class="st6" cx="97.493" cy="395.625" r="14.64"/><circle class="st13" cx="83.071" cy="404.233" r="8.539"/><path class="st15" d="M60.542 347.878s11.253 3.056 17.298 12.076 4.595 20.59 4.595 20.59-11.253-3.056-17.298-12.077c-6.046-9.02-4.595-20.59-4.595-20.59zM88.567 348.574s3.956 6.63 2.687 13.71c-1.27 7.075-7.28 11.92-7.28 11.92s-3.956-6.63-2.687-13.708 7.28-11.922 7.28-11.922zM106.206 414.49s9.934-6.105 20.647-4.33C137.565 411.936 145 420.917 145 420.917s-9.934 6.104-20.646 4.33c-10.714-1.774-18.148-10.756-18.148-10.756z"/></g><g><path class="st6" d="M426.284 636.83c10.362-.966 19.542 6.648 20.507 17.01.97 10.363-6.647 19.54-17.01 20.51-10.36.964-19.54-6.65-20.507-17.012-.964-10.362 6.65-19.542 17.01-20.51z"/><path class="st6" d="M462.76 633.43c10.36-.966 19.54 6.647 20.508 17.01.966 10.36-6.65 19.54-17.01 20.51-10.362.965-19.542-6.65-20.51-17.01-.964-10.365 6.65-19.544 17.012-20.51z"/><circle class="st6" cx="445.016" cy="623.52" r="18.841"/><circle class="st13" cx="444.402" cy="645.126" r="10.99"/><path class="st15" d="M367.646 630.668s11.09-10.11 25.06-10.442c13.972-.335 25.53 9.23 25.53 9.23s-11.09 10.11-25.06 10.442c-13.97.336-25.53-9.23-25.53-9.23z"/><path class="st15" d="M387.76 600.716s9.932.285 16.742 6.55c6.808 6.266 7.915 16.14 7.915 16.14s-9.93-.284-16.74-6.55c-6.808-6.265-7.918-16.14-7.918-16.14zM471.522 627.09s.23-15.006 9.557-25.413c9.325-10.406 24.213-12.276 24.213-12.276s-.23 15.005-9.557 25.412c-9.327 10.407-24.214 12.277-24.214 12.277z"/></g><g><path class="st16" d="M126.03 450s-1.737 4.107-2.92 10.152c-5.795-2.083-10.213-2.696-10.213-2.696s-.742 4.397-.498 10.552c-6.122-.69-10.562-.268-10.562-.268s1.358 20.854 15.027 32.488c13.667 11.635 34.47 9.644 34.47 9.644s8.153-19.242 1.165-35.775C145.512 457.563 126.03 450 126.03 450z"/><path class="st3" d="M183.063 480.404c18.78 25.61 25.148 68.363 5.107 83.06-20.04 14.697-58.904-4.228-77.684-29.837-18.78-25.608-10.364-48.202 9.677-62.9 20.042-14.697 44.12-15.93 62.9 9.677z"/><circle class="st9" cx="121.239" cy="510.241" r="2.5"/><circle class="st9" cx="176.074" cy="525.832" r="2.5"/><circle class="st9" cx="169.623" cy="474.76" r="2.5"/><circle class="st9" cx="150.27" cy="507.554" r="2.5"/><circle class="st9" cx="160.484" cy="487.662" r="2.5"/><circle class="st9" cx="166.667" cy="563.733" r="2.5"/><circle class="st9" cx="110.487" cy="487.125" r="2.5"/><circle class="st9" cx="140.593" cy="477.448" r="2.5"/><circle class="st9" cx="126.884" cy="543.304" r="2.5"/><circle class="st9" cx="183.332" cy="501.909" r="2.5"/><circle class="st9" cx="150.001" cy="532.552" r="2.5"/><circle class="st9" cx="187.902" cy="541.96" r="2.5"/></g><g><path class="st16" d="M556.69 543.752s1.642 3.82 4.944 8.515c-5.143 2.555-8.406 5.13-8.406 5.13s2.478 3.337 6.774 7.144c-4.413 3.673-6.996 6.93-6.996 6.93s14.9 12.548 31.544 10.864c16.645-1.683 28.732-16.956 28.732-16.956s-7.677-17.9-23.306-23.87c-15.624-5.974-33.285 2.244-33.285 2.244z"/><path class="st3" d="M613.945 525.024c29.34 3.9 62.2 27.21 59.146 50.17-3.05 22.964-40.856 36.88-70.197 32.98-29.34-3.897-39.102-24.14-36.052-47.1 3.055-22.96 17.764-39.95 47.105-36.05z"/><circle class="st9" cx="594.107" cy="585.853" r="2.33"/><circle class="st9" cx="639.98" cy="559.043" r="2.33"/><circle class="st9" cx="601.475" cy="530.419" r="2.331"/><circle class="st9" cx="611.036" cy="564.598" r="2.331"/><circle class="st9" cx="604.252" cy="544.892" r="2.33"/><circle class="st9" cx="659.395" cy="589.829" r="2.33"/><circle class="st9" cx="571.624" cy="578.164" r="2.33"/><circle class="st9" cx="584.547" cy="551.675" r="2.331"/><circle class="st9" cx="619.981" cy="603.396" r="2.331"/><circle class="st9" cx="628.578" cy="538.723" r="2.33"/><circle class="st9" cx="627.672" cy="580.911" r="2.33"/><circle class="st9" cx="658.459" cy="561.498" r="2.33"/></g><g><path class="st16" d="M775.828 199.92s-3.313.293-7.707 1.628c-.655-4.547-1.796-7.67-1.796-7.67s-3.155 1.05-7.123 3.363c-1.686-4.27-3.516-7.05-3.516-7.05s-13.26 8.188-16.143 21.258c-2.882 13.07 5.704 26.075 5.704 26.075s15.523-1.36 23.97-11.743c8.444-10.384 6.614-25.86 6.614-25.86z"/><path class="st3" d="M775.747 248.115c-10.3 21.323-36.23 40.468-52.917 32.408-16.688-8.06-17.813-40.27-7.514-61.595 10.298-21.323 28.12-23.68 44.81-15.623 16.687 8.06 25.92 23.487 15.62 44.81z"/><circle class="st9" cx="734.478" cy="217.831" r="1.864"/><circle class="st9" cx="743.384" cy="259.396" r="1.864"/><circle class="st9" cx="774.764" cy="237.289" r="1.865"/><circle class="st9" cx="746.399" cy="236.01" r="1.865"/><circle class="st9" cx="763.071" cy="235.782" r="1.864"/><circle class="st9" cx="715.133" cy="266.454" r="1.864"/><circle class="st9" cx="745.942" cy="202.666" r="1.864"/><circle class="st9" cx="762.843" cy="219.11" r="1.864"/><circle class="st9" cx="714.676" cy="233.11" r="1.865"/><circle class="st9" cx="761.678" cy="255.811" r="1.864"/><circle class="st9" cx="729.842" cy="244.575" r="1.864"/><circle class="st9" cx="736.898" cy="272.826" r="1.864"/></g><g><path class="st16" d="M85 125.34s3.47.83 8.395.962c-.877 4.85-.778 8.417-.778 8.417s3.567.004 8.39-1.002c.266 4.92 1.183 8.368 1.183 8.368s16.275-3.823 23.65-16.143c7.374-12.32 3.057-28.47 3.057-28.47s-16.257-3.892-28.38 3.805C88.398 108.97 85 125.34 85 125.34z"/><path class="st3" d="M101.46 76.33c17.726-18.197 50.616-28.866 64.855-14.994 14.243 13.872 4.44 47.03-13.285 65.227-17.724 18.2-36.662 14.54-50.902.67-14.24-13.872-18.394-32.706-.668-50.904z"/><circle class="st9" cx="133.161" cy="121.168" r="2"/><circle class="st9" cx="138.223" cy="75.848" r="2"/><circle class="st9" cx="98.78" cy="87.679" r="2"/><circle class="st9" cx="127.208" cy="98.619" r="2.001"/><circle class="st9" cx="110.166" cy="93.186" r="2"/><circle class="st9" cx="169.367" cy="78.267" r="2"/><circle class="st9" cx="116.342" cy="132.703" r="2"/><circle class="st9" cx="104.733" cy="110.228" r="2"/><path class="st9" d="M157.067 110.956c.772-.792 2.038-.81 2.83-.04.79.772.807 2.037.037 2.83-.77.79-2.038.807-2.83.036-.79-.77-.806-2.036-.037-2.826z"/><circle class="st9" cx="118.39" cy="73.28" r="2"/><circle class="st9" cx="146.966" cy="95.53" r="2"/><circle class="st9" cx="149.386" cy="64.386" r="2"/></g><g><path class="st16" d="M690.662 457.446s-2.502 1.44-5.472 4.102c-2.18-3.34-4.222-5.38-4.222-5.38s-2.1 1.98-4.376 5.253c-2.89-2.745-5.348-4.262-5.348-4.262s-7.442 11.298-4.928 22.64 14.032 18.44 14.032 18.44 11.722-6.752 14.568-18.017c2.85-11.262-4.254-22.774-4.254-22.774z"/><path class="st3" d="M708.234 495.41c-.304 20.555-13.708 45.114-29.792 44.876-16.087-.236-28.76-25.18-28.456-45.734.302-20.554 13.47-28.933 29.553-28.696 16.085.238 28.998 9 28.694 29.555z"/><circle class="st9" cx="664.667" cy="486.676" r="1.618"/><circle class="st9" cx="686.889" cy="516.136" r="1.619"/><circle class="st9" cx="703.5" cy="487.249" r="1.618"/><circle class="st9" cx="680.704" cy="496.624" r="1.619"/><circle class="st9" cx="693.744" cy="490.342" r="1.618"/><circle class="st9" cx="667.234" cy="532.029" r="1.618"/><circle class="st9" cx="668.142" cy="470.543" r="1.618"/><circle class="st9" cx="687.463" cy="477.303" r="1.619"/><circle class="st9" cx="654.671" cy="505.949" r="1.619"/><circle class="st9" cx="699.977" cy="506.618" r="1.618"/><circle class="st9" cx="670.805" cy="509.425" r="1.618"/><circle class="st9" cx="686.7" cy="529.081" r="1.619"/></g><g><path class="st16" d="M495-50.708s-3.623-2.04-9.097-3.768c2.537-5.15 3.568-9.18 3.568-9.18s-3.993-1.147-9.72-1.565c1.28-5.598 1.357-9.754 1.357-9.754s-19.457-.93-31.665 10.508c-12.208 11.438-12.547 30.913-12.547 30.913s16.965 9.57 33.01 4.83C485.95-33.46 495-50.708 495-50.708z"/><path class="st3" d="M460.858-1.08C435.17 13.627 394.908 15.04 383.4-5.06c-11.51-20.103 10.095-54.107 35.782-68.813 25.686-14.708 45.728-4.542 57.236 15.557 11.51 20.104 10.127 42.533-15.56 57.24z"/><circle class="st9" cx="439.712" cy="-61.465" r="2.33"/><circle class="st9" cx="419.521" cy="-12.318" r="2.33"/><circle class="st9" cx="467.497" cy="-12.934" r="2.331"/><circle class="st9" cx="439.156" cy="-34.298" r="2.331"/><circle class="st9" cx="456.506" cy="-22.751" r="2.33"/><circle class="st9" cx="385.408" cy="-25.005" r="2.33"/><circle class="st9" cx="462.248" cy="-68.998" r="2.33"/><circle class="st9" cx="468.051" cy="-40.101" r="2.331"/><path class="st9" d="M409.66-57.685c-1.12.64-2.543.254-3.184-.863-.638-1.118-.252-2.54.865-3.182 1.118-.638 2.542-.25 3.182.867.64 1.116.25 2.54-.863 3.178z"/><circle class="st9" cx="440.916" cy="-3.086" r="2.33"/><circle class="st9" cx="416.033" cy="-37.168" r="2.33"/><circle class="st9" cx="403.344" cy="-3.055" r="2.33"/></g><g><circle class="st6" cx="747.259" cy="279.712" r="14.756"/><circle class="st6" cx="736.25" cy="306.208" r="14.755"/><path class="st6" d="M776.862 308.88c-3.127 7.525-11.762 11.09-19.288 7.964-7.526-3.128-11.093-11.762-7.964-19.29 3.128-7.525 11.762-11.09 19.288-7.963 7.53 3.13 11.092 11.763 7.964 19.29z"/><circle class="st13" cx="748.504" cy="294.876" r="8.607"/><path class="st15" d="M786.635 247.04s2.936 11.38-1.952 21.173c-4.888 9.794-15.744 14.293-15.744 14.293s-2.938-11.38 1.95-21.175c4.887-9.793 15.745-14.29 15.745-14.29z"/><path class="st15" d="M800 271.937s-3.835 6.77-10.668 9.188c-6.832 2.418-14.072-.433-14.072-.433s3.835-6.77 10.667-9.188 14.073.433 14.073.433zM751.056 320.258s10.302 5.657 14.09 15.928c3.785 10.27-.373 21.26-.373 21.26s-10.302-5.658-14.09-15.927c-3.787-10.27.373-21.262.373-21.262z"/></g><g><circle class="st10" cx="751.995" cy="404.76" r="18"/><circle class="st10" cx="737.277" cy="373.004" r="18"/><circle class="st10" cx="717.694" cy="399.716" r="18"/><circle class="st7" cx="737.344" cy="393.363" r="10.5"/><path class="st8" d="M748.853 467.095s-12.646-6.755-17.41-19.228c-4.766-12.472.153-25.937.153-25.937s12.646 6.754 17.41 19.226c4.765 12.473-.153 25.94-.153 25.94z"/><path class="st8" d="M715.457 458.556s-2.917-9.033.55-17.166c3.464-8.134 12-12.285 12-12.285s2.918 9.033-.548 17.166-12.003 12.286-12.003 12.286z"/></g><g><circle class="st10" cx="326.787" cy="-2.561" r="21.743"/><circle class="st10" cx="355.684" cy="-33.42" r="21.742"/><circle class="st10" cx="316.904" cy="-43.256" r="21.743"/><circle class="st7" cx="332.915" cy="-24.128" r="12.683"/><path class="st8" d="M255.558 22.144s1.84-17.22 13.65-28.203c11.81-10.982 29.114-11.57 29.114-11.57s-1.838 17.22-13.647 28.2c-11.81 10.986-29.117 11.574-29.117 11.574z"/><path class="st8" d="M250-19.12s8.795-7.357 19.472-7.158c10.677.198 19.19 7.877 19.19 7.877s-8.793 7.357-19.47 7.158C258.515-11.442 250-19.12 250-19.12z"/></g><g><circle class="st6" cx="736.144" cy="171.943" r="12.358"/><circle class="st6" cx="722.222" cy="152.359" r="12.358"/><circle class="st6" cx="712.358" cy="172.847" r="12.358"/><circle class="st13" cx="724.824" cy="166.092" r="7.208"/></g><g><circle class="st6" cx="571.294" cy="593.544" r="18"/><circle class="st6" cx="538.005" cy="604.354" r="18"/><circle class="st6" cx="562.181" cy="626.995" r="18"/><circle class="st13" cx="558.226" cy="606.725" r="10.5"/></g><g><circle class="st6" cx="338.86" cy="641.603" r="13.588"/><circle class="st6" cx="329.701" cy="616.819" r="13.588"/><circle class="st6" cx="313.353" cy="635.737" r="13.588"/><circle class="st13" cx="328.523" cy="632.144" r="7.926"/></g><g><circle class="st6" cx="94.462" cy="289.593" r="20.275"/><circle class="st6" cx="55.275" cy="285.287" r="20.274"/><circle class="st6" cx="69.623" cy="319.724" r="20.274"/><circle class="st13" cx="74.943" cy="297.08" r="11.826"/></g><g><circle class="st6" cx="515.327" cy="-22.191" r="14.068"/><circle class="st6" cx="491.502" cy="-35.631" r="14.068"/><circle class="st6" cx="491.258" cy="-9.746" r="14.068"/><circle class="st13" cx="500.832" cy="-22.741" r="8.206"/></g></g><g id="renard"><g id="queue"><path class="st5" d="M442.41 193.4c6.235 4.676 12.47 9.352 20.264 14.028 15.586 10.91 26.497 23.38 38.967 38.967 12.47 17.146 18.705 34.29 24.94 54.555 14.028 54.553 1.558 107.55-31.174 154.31-3.118 3.118-4.676 6.234-7.794 10.91-18.704 21.822-38.967 42.086-63.906 52.996 3.118-3.118 3.118-7.794 6.234-12.47v-4.677c9.353-18.704 7.794-42.085 0-60.79-17.145-37.408-60.788-45.2-95.08-65.465-7.794-4.675-12.47-9.352-20.263-14.027-15.587-10.91-26.498-23.38-38.967-38.967-12.47-17.145-18.704-34.29-24.94-54.554-14.027-54.554-1.558-107.55 31.175-154.31 3.117-3.118 4.676-6.235 7.793-10.912C308.363 81.174 328.626 60.91 353.565 50c-3.117 3.117-3.117 7.793-6.234 12.47v4.676c-9.352 18.705-7.793 42.085 0 60.79 17.146 37.407 60.79 46.76 95.08 65.464z"/><path class="st1" d="M340.6 98.152l.32-.135c-.262-10.68 1.663-21.378 6.41-30.872V62.47c2.71-4.067 3.07-8.132 5.166-11.173-.077-.238-.158-.468-.242-.687-12.677 5.752-24.147 13.91-34.822 23.443.013 4.273.152 6.73.152 6.73s4.02-1.043 10.587-3.48c.23 7.837.74 12.48.74 12.48s3.928-1.294 10.313-4.143c.632 7.87 1.376 12.512 1.376 12.512z"/></g><path class="st11" d="M350 543.255c-51.076-20.188-57.168-64.802-36.507-109.415C333.14 389.227 379.54 344.614 410 324.426c30.46 20.188 76.86 64.8 96.507 109.415 20.66 44.613 14.57 89.227-36.507 109.415H350z" id="corps"/><g id="bras_gauche"><path class="st14" d="M352.752 455.538c-2.727 46.52 17.483 84.445 12.14 88.902-4.362 5.533-43.03-30.386-44.8-90.28-1.125-29.132 8.285-54.7 18.746-70.287 10.498-15.892 22.046-21.805 26.054-18.613 8.763 7.224-11.083 44.053-12.14 90.278z"/><path class="st0" d="M357.772 526.793c-3.126-1.922-5.06-2.886-5.06-2.886s-.345 2.17-.617 5.888c-3.225-1.74-5.208-2.596-5.208-2.596s-.14 1.36-.234 3.74c8.606 10.884 16.417 15.813 18.24 13.5 2.252-1.88-.043-9.728-3.242-21.646-1.848-1.22-2.942-1.848-2.942-1.848s-.464 2.15-.936 5.847z"/></g><g id="bras_droit"><path class="st14" d="M469.367 455.538c2.727 46.52-17.482 84.445-12.14 88.902 4.362 5.533 43.03-30.386 44.8-90.28 1.125-29.132-8.285-54.7-18.746-70.287-10.497-15.892-22.045-21.805-26.053-18.613-8.762 7.224 11.084 44.053 12.14 90.278z"/><path class="st0" d="M464.348 526.793c3.127-1.922 5.06-2.886 5.06-2.886s.345 2.17.616 5.888c3.227-1.74 5.21-2.596 5.21-2.596s.138 1.36.233 3.74c-8.607 10.884-16.417 15.813-18.24 13.5-2.252-1.88.043-9.728 3.242-21.646 1.847-1.22 2.94-1.848 2.94-1.848s.466 2.15.938 5.847z"/></g><path class="st1" d="M495.73 324.426c26.67 59.83-34.588 135.17-83.313 195-48.725-59.83-109.982-135.17-83.313-195H495.73z" id="cou"/><g id="tete"><path class="st2" d="M544.874 309.374c.388.242-21.424 8.315-47.41 17.874-26.54 9.32-57.257 20.124-87.464 20.297-30.207-.174-60.924-10.978-87.464-20.297-25.987-9.56-47.797-17.632-47.41-17.874.525.244 7.272-21.502 29.72-44.7 21.755-22.965 59.21-47.38 105.154-47.128 45.942-.253 83.398 24.163 105.153 47.13 22.45 23.196 29.196 44.942 29.72 44.698z" id="visage3"/><path class="st2" d="M520 239.426c34.823 36.22-72.522 137.78-108.784 174-36.26-36.22-143.608-137.78-108.785-174H520z" id="visage2"/><path class="st14" d="M520 239.426c-30.745 27.96-73.228 100.98-108.784 174-35.557-73.02-78.04-146.04-108.785-174 60.08-60.08 157.49-60.08 217.57 0z" id="visage1"/><circle id="oeil_gauche" class="st0" cx="335" cy="309.426" r="10"/><circle id="oeil_droit" class="st0" cx="489" cy="309.426" r="10"/><circle id="nez" class="st0" cx="410" cy="409.426" r="10"/><g id="oreille_gauche"><path class="st14" d="M316.39 227.55c-15.907-35.11 5-73.017 30.31-88.124 13.306 32.01 34.213 49.87 30.31 61.875l-60.62 26.25z"/><path class="st4" d="M330.833 217.3c-9.544-21.066 3-43.81 18.187-52.874 7.983 19.206 20.527 29.922 18.187 37.125l-36.374 15.75z"/></g><g id="oreille_droite"><path class="st14" d="M442.99 201.3c-3.902-12.005 17.005-29.863 30.31-61.874 25.31 15.107 46.218 53.013 30.312 88.125L442.99 201.3z"/><path class="st4" d="M455.474 201.55c-2.34-7.202 10.203-17.918 18.187-37.124 15.187 9.064 27.73 31.808 18.188 52.875l-36.374-15.75z"/></g></g></g></svg>
</div>
<div class="help">Click and hover me !</div>
.animation {
width:60%;
height:700px;
margin:0 auto;
}
.animation svg {
width:100%;
height:100%;
}
#renard {
cursor:pointer;
}
#bras_droit {
-webkit-transform-origin: 442px 442px;
-moz-transform-origin: 442px 442px;
transform-origin: 442px 442px;
}
#bras_gauche {
-webkit-transform-origin: 312px 442px;
-moz-transform-origin: 312px 442px;
transform-origin: 312px 442px;
}
.help {
font-weight:bold;
text-align:center;
font-size:18px
}
$( document ).ready(function() {
var renard = Snap('#renard');
var tete = Snap.select("#tete");
var queue = Snap.select("#queue");
var bras_droit = Snap.select("#bras_droit");
var bras_gauche = Snap.select("#bras_gauche");
var hoverIn = function renardHover() {
bras_droit.animate({transform: 'r12,0,0'}, 500, mina.easein);
bras_gauche.animate({transform: 'r-12,20,-20'}, 500, mina.easein);
tete.animate({transform: 'r-3,440,350'}, 500, mina.easein);
queue.animate({transform: 'r3,440,350'}, 500, mina.easein);
};
var hoverOut = function renardOut() {
bras_droit.animate({transform: 'r-12,0,0'}, 500, mina.easein);
bras_gauche.animate({transform: 'r12,20,-20'}, 500, mina.easein);
tete.animate({transform: 'r0,440,350'}, 500, mina.easein);
queue.animate({transform: 'r0,440,350'}, 500, mina.easein);
};
var saut = function renardSaute() {
renard.animate({transform: 't0 -20'}, 200, mina.easeinout, function (){
// This animation triggers once the other has finished
renard.animate({transform: 'r0 t0 0'}, 600, mina.elastic);
});
};
renard.hover( hoverIn, hoverOut );
renard.click(saut);
/* Animate eyes */
var oeil_gauche = Snap.select("#oeil_gauche");
var oeil_droit = Snap.select("#oeil_droit");
var mask_oeil_gauche = renard.rect(315,290, 40,40).attr({fill: '#ffffff', id: 'mask_oeil_gauche'});
var mask_oeil_droit = renard.rect(465,290, 40,40).attr({fill: '#ffffff', id: 'mask_oeil_droit'});
oeil_gauche.attr({
mask: mask_oeil_gauche
});
oeil_droit.attr({
mask: mask_oeil_droit
});
function OuvreOeil(){
mask_oeil_gauche.stop().animate({transform: 't0 -40'}, 400, mina.easeout, FermeOeil);
mask_oeil_droit.stop().animate({transform: 't0 -40'}, 400, mina.easeout);
}
function FermeOeil(){
mask_oeil_droit.stop().animate({transform: 'r0t0 0'}, 400, mina.easeout);
mask_oeil_gauche.stop().animate({transform: 'r0t0 0'}, 400, mina.easeout, function () {
setTimeout(OuvreOeil, 5000);
});
}
OuvreOeil();
});
Also see: Tab Triggers