123

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.

            
              <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();
	

});
            
          
!
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.

Console