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 id="container">
  <svg id="lion-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250" xml:space="preserve">
                <path fill-rule="evenodd" fill="#D1242A" d="M335.581,247.972c-11.071,0-21.884,0.024-32.696-0.049c-0.836-0.006-2.124-0.481-2.432-1.114c-4.206-8.649-13.155-14.178-15.541-24.129c-0.674-2.809-0.646-4.59,0.696-7.21c3.445-6.727,7.004-13.59,8.981-20.818c1.98-7.239,0.229-9.332-6.781-11.833c-9.043-3.226-18.01-7.614-27.353-8.799c-10.046-1.273-20.495,0.5-30.749,1.213c-0.973,0.068-2.657,2.113-2.584,3.138c0.805,11.265,1.532,22.557,3.012,33.745c1.363,10.31,9.865,14.35,18.095,18.063c3.908,1.765,8.294,2.436,12.335,3.947c5.324,1.991,9.661,8.381,9.317,13.861c-1.739,0-3.522,0-5.306,0c-9.666,0-19.337-0.186-28.995,0.089c-4.047,0.115-6.729-0.622-8.639-4.669c-3.633-7.697-11.102-10.733-18.498-13.412c-3.208-1.161-4.382-2.72-4.135-6.142c0.831-11.49-2.635-21.004-12.023-28.549c-7.896-6.345-14.983-13.714-22.248-20.814c-2.124-2.075-3.982-2.177-6.117-0.584c-2.928,2.184-5.965,4.285-8.579,6.811c-8.684,8.39-18.699,14.305-30.375,17.505c-7.049,1.932-14.005,4.206-21,6.339c-8.628,2.631-17.355,2.344-26.21,1.355c-7.071-0.789-10.082,2.192-10.435,9.298c-0.461,9.262,2.534,13.94,11.01,17.812c3.162,1.443,6.624,2.862,8.977,5.249c2.001,2.03,2.607,5.437,4.312,9.334c-12.35,0-22.976,0.144-33.589-0.162c-1.516-0.043-3.41-1.981-4.376-3.517c-3.965-6.295-7.69-12.746-11.357-19.222c-0.447-0.789-0.261-2.162,0.057-3.124c4.164-12.594,8.571-25.109,12.515-37.771c1.035-3.321,3.181-3.238,5.609-3.583c9.217-1.31,18.579-2.044,27.58-4.245c4.502-1.102,9.09-4.191,12.358-7.607c15.051-15.731,25.406-34.476,33.383-54.605c0.489-1.235,0.879-2.514,1.258-3.789c0.139-0.464,0.112-0.978,0.233-2.189c-2.565,0.357-4.941,0.605-7.285,1.028c-12.407,2.239-23.995,6.587-34.853,13.067c-7.854,4.688-15.931,9.01-24.006,13.312c-12.532,6.675-25.738,7.303-39.295,3.91c-5.319-1.331-10.676-2.574-15.895-4.236C3.274,131.473-2.42,120.173,0.984,109.004c9.929,3.854,20.234,6.83,25.522,17.577c0.792,1.61,3.144,2.897,5.033,3.452c12.842,3.768,24.716,1.122,35.632-6.194c14.661-9.825,29.154-19.9,43.832-29.7c10.349-6.909,21.769-11.269,33.889-14.169c9.193-2.198,18.118-5.492,27.238-8.026c15.292-4.249,30.662-2.877,46.063-0.403c23.645,3.798,47.385,4.177,71.167,1.393c2.131-0.249,4.276-0.729,6.303-1.427c4.343-1.493,4.528-2.146,2.263-6.518c6.691-5.501,13.437-11.046,21.026-17.285c-2.729-1.067-4.187-1.638-7.111-2.782c10.054-5.014,19.26-9.604,28.695-14.311c-0.666-1.192-1.273-2.281-2.139-3.831c5.353-2.238,10.521-4.403,15.69-6.562c2.745-1.146,4.653-2.655,1.866-6.628c7.989-1.692,15.396-3.325,22.829-4.821c12.04-2.421,24.091-4.796,36.154-7.094c3.429-0.652,6.922-0.967,10.385-1.444c11.391-1.57,19.8,5.213,28.876,10.21c2.226,1.226,4.746,1.916,7.131,2.852c0.409-0.369,0.817-0.738,1.227-1.108c1.953,5.249,4.331,10.387,5.736,15.777c1.339,5.139,5.495,7.231,8.918,10.259c1.544,1.365,3.64,2.823,4.082,4.591c1.827,7.297,7.402,11.7,12.152,16.725c2.727,2.885,5.693,5.597,8.835,8.019c3.218,2.481,3.146,5.231,1.278,8.195c-2.684,4.259-5.648,8.34-8.38,12.57c-0.582,0.902-0.792,2.101-0.978,3.195c-0.895,5.277-4.262,8.504-8.883,10.572c-0.83,0.372-2.138,0.094-3.076-0.27c-2.679-1.035-5.188-2.603-7.931-3.359c-6.521-1.799-9.815-0.193-12.925,5.922c-1.266,2.489-2.33,5.081-4.091,8.96c-1.062-1.798-1.692-2.862-2.343-3.961c-4.956,7.882-9.763,15.525-15.483,24.623c-0.89-2.266-1.237-3.151-2.116-5.39c-7.768,7.956-14.58,15.064-21.552,22.014c-3.167,3.157-3.6,6.634-1.819,10.438c1.257,2.687,2.631,5.402,4.428,7.739c11.576,15.053,23.39,29.924,34.881,45.039c3.308,4.351,7.312,7.385,12.463,8.558c9.514,2.166,16.538,8.203,23.05,14.766c1.648,1.662,1.633,5.468,1.41,8.21c-0.072,0.889-3.238,2.15-4.997,2.164c-5.817,0.045-11.677-0.096-17.442-0.797c-2.61-0.317-5.506-1.605-7.456-3.36c-4.555-4.097-9.545-6.849-15.403-8.778c-4.739-1.562-8.948-4.76-13.348-7.311c-2.3-1.334-4.329-3.36-6.779-4.163c-6.569-2.154-10.823-6.512-14.191-12.36c-4-6.943-9.88-11.966-17.213-15.42c-7.22-3.4-14.213-7.278-21.37-10.817c-1.05-0.52-2.532-0.661-3.683-0.399c-9.344,2.132-18.672,4.338-27.964,6.687c-1.774,0.448-3.782,1.24-4.972,2.529c-7.218,7.819-14.13,15.921-21.346,23.741c-4.605,4.991-3.088,11.169,3.427,13.956c5.134,2.196,10.108,4.786,15.054,7.392C336.16,240.352,337.036,243.497,335.581,247.972z"/>
            </svg>

  <svg id="lion-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 250" xml:space="preserve">
                <path fill-rule="evenodd" fill="#D1242A" d="M335.581,247.972c-11.071,0-21.884,0.024-32.696-0.049c-0.836-0.006-2.124-0.481-2.432-1.114c-4.206-8.649-13.155-14.178-15.541-24.129c-0.674-2.809-0.646-4.59,0.696-7.21c3.445-6.727,7.004-13.59,8.981-20.818c1.98-7.239,0.229-9.332-6.781-11.833c-9.043-3.226-18.01-7.614-27.353-8.799c-10.046-1.273-20.495,0.5-30.749,1.213c-0.973,0.068-2.657,2.113-2.584,3.138c0.805,11.265,1.532,22.557,3.012,33.745c1.363,10.31,9.865,14.35,18.095,18.063c3.908,1.765,8.294,2.436,12.335,3.947c5.324,1.991,9.661,8.381,9.317,13.861c-1.739,0-3.522,0-5.306,0c-9.666,0-19.337-0.186-28.995,0.089c-4.047,0.115-6.729-0.622-8.639-4.669c-3.633-7.697-11.102-10.733-18.498-13.412c-3.208-1.161-4.382-2.72-4.135-6.142c0.831-11.49-2.635-21.004-12.023-28.549c-7.896-6.345-14.983-13.714-22.248-20.814c-2.124-2.075-3.982-2.177-6.117-0.584c-2.928,2.184-5.965,4.285-8.579,6.811c-8.684,8.39-18.699,14.305-30.375,17.505c-7.049,1.932-14.005,4.206-21,6.339c-8.628,2.631-17.355,2.344-26.21,1.355c-7.071-0.789-10.082,2.192-10.435,9.298c-0.461,9.262,2.534,13.94,11.01,17.812c3.162,1.443,6.624,2.862,8.977,5.249c2.001,2.03,2.607,5.437,4.312,9.334c-12.35,0-22.976,0.144-33.589-0.162c-1.516-0.043-3.41-1.981-4.376-3.517c-3.965-6.295-7.69-12.746-11.357-19.222c-0.447-0.789-0.261-2.162,0.057-3.124c4.164-12.594,8.571-25.109,12.515-37.771c1.035-3.321,3.181-3.238,5.609-3.583c9.217-1.31,18.579-2.044,27.58-4.245c4.502-1.102,9.09-4.191,12.358-7.607c15.051-15.731,25.406-34.476,33.383-54.605c0.489-1.235,0.879-2.514,1.258-3.789c0.139-0.464,0.112-0.978,0.233-2.189c-2.565,0.357-4.941,0.605-7.285,1.028c-12.407,2.239-23.995,6.587-34.853,13.067c-7.854,4.688-15.931,9.01-24.006,13.312c-12.532,6.675-25.738,7.303-39.295,3.91c-5.319-1.331-10.676-2.574-15.895-4.236C3.274,131.473-2.42,120.173,0.984,109.004c9.929,3.854,20.234,6.83,25.522,17.577c0.792,1.61,3.144,2.897,5.033,3.452c12.842,3.768,24.716,1.122,35.632-6.194c14.661-9.825,29.154-19.9,43.832-29.7c10.349-6.909,21.769-11.269,33.889-14.169c9.193-2.198,18.118-5.492,27.238-8.026c15.292-4.249,30.662-2.877,46.063-0.403c23.645,3.798,47.385,4.177,71.167,1.393c2.131-0.249,4.276-0.729,6.303-1.427c4.343-1.493,4.528-2.146,2.263-6.518c6.691-5.501,13.437-11.046,21.026-17.285c-2.729-1.067-4.187-1.638-7.111-2.782c10.054-5.014,19.26-9.604,28.695-14.311c-0.666-1.192-1.273-2.281-2.139-3.831c5.353-2.238,10.521-4.403,15.69-6.562c2.745-1.146,4.653-2.655,1.866-6.628c7.989-1.692,15.396-3.325,22.829-4.821c12.04-2.421,24.091-4.796,36.154-7.094c3.429-0.652,6.922-0.967,10.385-1.444c11.391-1.57,19.8,5.213,28.876,10.21c2.226,1.226,4.746,1.916,7.131,2.852c0.409-0.369,0.817-0.738,1.227-1.108c1.953,5.249,4.331,10.387,5.736,15.777c1.339,5.139,5.495,7.231,8.918,10.259c1.544,1.365,3.64,2.823,4.082,4.591c1.827,7.297,7.402,11.7,12.152,16.725c2.727,2.885,5.693,5.597,8.835,8.019c3.218,2.481,3.146,5.231,1.278,8.195c-2.684,4.259-5.648,8.34-8.38,12.57c-0.582,0.902-0.792,2.101-0.978,3.195c-0.895,5.277-4.262,8.504-8.883,10.572c-0.83,0.372-2.138,0.094-3.076-0.27c-2.679-1.035-5.188-2.603-7.931-3.359c-6.521-1.799-9.815-0.193-12.925,5.922c-1.266,2.489-2.33,5.081-4.091,8.96c-1.062-1.798-1.692-2.862-2.343-3.961c-4.956,7.882-9.763,15.525-15.483,24.623c-0.89-2.266-1.237-3.151-2.116-5.39c-7.768,7.956-14.58,15.064-21.552,22.014c-3.167,3.157-3.6,6.634-1.819,10.438c1.257,2.687,2.631,5.402,4.428,7.739c11.576,15.053,23.39,29.924,34.881,45.039c3.308,4.351,7.312,7.385,12.463,8.558c9.514,2.166,16.538,8.203,23.05,14.766c1.648,1.662,1.633,5.468,1.41,8.21c-0.072,0.889-3.238,2.15-4.997,2.164c-5.817,0.045-11.677-0.096-17.442-0.797c-2.61-0.317-5.506-1.605-7.456-3.36c-4.555-4.097-9.545-6.849-15.403-8.778c-4.739-1.562-8.948-4.76-13.348-7.311c-2.3-1.334-4.329-3.36-6.779-4.163c-6.569-2.154-10.823-6.512-14.191-12.36c-4-6.943-9.88-11.966-17.213-15.42c-7.22-3.4-14.213-7.278-21.37-10.817c-1.05-0.52-2.532-0.661-3.683-0.399c-9.344,2.132-18.672,4.338-27.964,6.687c-1.774,0.448-3.782,1.24-4.972,2.529c-7.218,7.819-14.13,15.921-21.346,23.741c-4.605,4.991-3.088,11.169,3.427,13.956c5.134,2.196,10.108,4.786,15.054,7.392C336.16,240.352,337.036,243.497,335.581,247.972z"/>
            </svg>

  <svg id="solo-lyon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2270 400">
                <g id="lyon">
                    <g id="lyon-l">
                        <path fill="#555555" d="M1274.98,307c-11.046,0-20-8.953-20-20V113c0-11.045,8.954-20,20-20s20,8.955,20,20v174C1294.98,298.047,1286.026,307,1274.98,307z"/>
                        <path fill="#d1242a" d="M1377.98,307h-103c-11.046,0-20-8.953-20-20c0-11.045,8.954-20,20-20h103c11.046,0,20,8.955,20,20C1397.98,298.047,1389.026,307,1377.98,307z"/>
                        <path fill="#FFFFFF" d="M1377.98,282.748h-98.748V113c0-2.348-1.903-4.252-4.252-4.252s-4.252,1.904-4.252,4.252v174	c0,2.35,1.903,4.252,4.252,4.252h103c2.349,0,4.252-1.902,4.252-4.252C1382.232,284.652,1380.329,282.748,1377.98,282.748z"/>
                    </g>
                    <g id="lyon-y">
                        <path fill="#555555" d="M1535.466,244.001c-6.183,0-12.279-2.856-16.193-8.24l-80.703-111c-6.495-8.934-4.519-21.441,4.416-27.938c8.935-6.494,21.441-4.519,27.938,4.416l80.703,111c6.495,8.934,4.519,21.441-4.416,27.938C1543.659,242.758,1539.544,244.001,1535.466,244.001z"/>
                        <path fill="#d1242a" d="M1535.433,244.001c-4.078,0-8.193-1.243-11.744-3.824c8.935-6.496-10.911-19.004-4.416-27.938l80.701-111c6.496-8.935,19.004-10.91,27.938-4.416c8.935,6.496,10.911,19.004,4.416,27.938l-80.701,111C1547.712,241.145,1541.615,244.001,1535.433,244.001z"/>
                        <path fill="#d1242a" d="M1535.449,307c-11.046,0-20-8.954-20-20v-63c0-11.046,8.954-20,20-20s20,8.954,20,20v63C1555.449,298.046,1546.495,307,1535.449,307z"/>
                        <path fill="#FFFFFF" d="M1618.65,109.561c-1.9-1.381-4.559-0.959-5.939,0.939l-77.262,106.27l-77.264-106.27c-1.381-1.898-4.039-2.32-5.939-0.939c-1.899,1.381-2.32,4.04-0.939,5.939l79.891,109.883V287c0,2.349,1.903,4.252,4.252,4.252s4.252-1.903,4.252-4.252v-61.617L1619.59,115.5C1620.971,113.601,1620.55,110.942,1618.65,109.561z"/>
                    </g>
                    <g id="lyon-o">
                        <path fill="#d1242a" d="M1692.691,220c-11.046,0-20-8.953-20-20c0-62.48,50.832-113.312,113.312-113.312c11.046,0,20,8.954,20,20c0,11.047-8.954,20-20,20c-40.425,0-73.312,32.889-73.312,73.312C1712.691,211.047,1703.737,220,1692.691,220z"/>
                        <path fill="#555555" d="M1786.004,313.312c-62.48,0-113.312-50.832-113.312-113.312c0-11.045,8.954-20,20-20s20,8.955,20,20c0,40.426,32.888,73.312,73.312,73.312c11.046,0,20,8.955,20,20C1806.004,304.359,1797.05,313.312,1786.004,313.312z"/>
                        <path fill="#d1242a" d="M1786.004,313.312c-11.046,0-20-8.953-20-20c0-11.045,8.954-20,20-20c40.426,0,73.314-32.887,73.314-73.312c0-11.045,8.954-20,20-20s20,8.955,20,20C1899.318,262.48,1848.485,313.312,1786.004,313.312z"/>
                        <path fill="#555555" d="M1879.318,220c-11.046,0-20-8.953-20-20c0-40.424-32.889-73.312-73.314-73.312c-11.046,0-20-8.953-20-20c0-11.046,8.954-20,20-20c62.481,0,113.314,50.832,113.314,113.312C1899.318,211.047,1890.364,220,1879.318,220z"/>
                        <path fill="#FFFFFF" d="M1786.004,102.436c-53.797,0-97.564,43.768-97.564,97.564s43.768,97.564,97.564,97.564c53.798,0,97.566-43.768,97.566-97.564S1839.802,102.436,1786.004,102.436z M1786.004,289.061c-49.108,0-89.061-39.951-89.061-89.061c0-49.107,39.952-89.061,89.061-89.061c49.109,0,89.062,39.953,89.062,89.061C1875.066,249.109,1835.113,289.061,1786.004,289.061z"/>
                    </g>
                    <g id="lyon-n">
                        <path fill="#555555" d="M2119.498,307c-5.672,0-11.306-2.398-15.262-7.062l-147.596-174c-7.146-8.424-6.109-21.044,2.314-28.189c8.425-7.146,21.044-6.109,28.189,2.314l147.596,174c7.146,8.424,6.109,21.044-2.314,28.189C2128.666,305.441,2124.069,307,2119.498,307z"/>
                        <path fill="#555555" d="M2119.488,307c-11.046,0-20-8.954-20-20V113c0-11.046,8.954-20,20-20s20,8.954,20,20v174C2139.488,298.046,2130.534,307,2119.488,307z"/>
                        <path fill="#d1242a" d="M1971.893,307c-11.046,0-20-8.954-20-20V113c0-11.046,8.954-20,20-20s20,8.954,20,20v174C1991.893,298.046,1982.938,307,1971.893,307z"/>
                        <path fill="#FFFFFF" d="M2123.74,113c0-2.349-1.903-4.252-4.252-4.252s-4.252,1.903-4.252,4.252v162.414L1975.135,110.25c-0.036-0.043-0.081-0.073-0.119-0.115c-0.103-0.111-0.212-0.214-0.326-0.313c-0.099-0.087-0.197-0.173-0.302-0.249c-0.114-0.083-0.234-0.155-0.356-0.227c-0.117-0.068-0.232-0.137-0.354-0.192c-0.125-0.059-0.255-0.104-0.386-0.15c-0.131-0.045-0.26-0.089-0.394-0.122c-0.129-0.031-0.26-0.051-0.393-0.07c-0.148-0.021-0.296-0.039-0.446-0.045c-0.057-0.002-0.109-0.017-0.166-0.017c-0.074,0-0.144,0.019-0.218,0.021c-0.151,0.008-0.301,0.022-0.451,0.046c-0.133,0.021-0.261,0.048-0.389,0.081c-0.137,0.035-0.27,0.076-0.402,0.125s-0.262,0.104-0.388,0.165c-0.118,0.058-0.234,0.12-0.349,0.189c-0.131,0.079-0.254,0.166-0.375,0.258c-0.059,0.045-0.123,0.076-0.18,0.124c-0.043,0.036-0.074,0.081-0.115,0.119c-0.111,0.103-0.213,0.212-0.312,0.325c-0.088,0.1-0.174,0.198-0.251,0.304c-0.083,0.113-0.153,0.232-0.225,0.354c-0.069,0.118-0.138,0.234-0.194,0.357c-0.058,0.124-0.103,0.253-0.148,0.383c-0.046,0.132-0.09,0.262-0.123,0.396c-0.031,0.129-0.051,0.259-0.07,0.392c-0.021,0.148-0.039,0.296-0.045,0.446c-0.002,0.056-0.017,0.109-0.017,0.166v174c0,2.349,1.903,4.252,4.252,4.252s4.252-1.903,4.252-4.252V124.586l140.102,165.165c0.033,0.04,0.075,0.066,0.11,0.104c0.127,0.139,0.266,0.265,0.41,0.386c0.086,0.073,0.168,0.149,0.259,0.214c0.154,0.11,0.321,0.201,0.49,0.291c0.089,0.047,0.173,0.104,0.266,0.144c0.205,0.09,0.423,0.154,0.644,0.212c0.062,0.016,0.121,0.044,0.184,0.057c0.284,0.061,0.578,0.094,0.88,0.094h0.001h0.001c0.267,0,0.532-0.03,0.795-0.08c0.094-0.018,0.181-0.048,0.271-0.072c0.164-0.042,0.325-0.088,0.485-0.15c0.104-0.041,0.2-0.091,0.3-0.139c0.136-0.066,0.268-0.135,0.397-0.216c0.104-0.064,0.199-0.136,0.297-0.209c0.066-0.051,0.139-0.089,0.203-0.144c0.043-0.036,0.074-0.081,0.115-0.119c0.111-0.103,0.213-0.212,0.312-0.325c0.088-0.1,0.174-0.198,0.251-0.304c0.083-0.113,0.153-0.232,0.225-0.354c0.069-0.118,0.138-0.234,0.194-0.357c0.058-0.124,0.103-0.253,0.148-0.383c0.046-0.132,0.09-0.262,0.123-0.396c0.031-0.129,0.051-0.259,0.07-0.392c0.021-0.148,0.039-0.296,0.045-0.446c0.002-0.056,0.017-0.109,0.017-0.166V113z"/>
                    </g>
                </g>


                <g id="solo">
                    <g id="solo-s">
                        <path fill="#d1242a" d="M262.233,266.959c-11.046,0-20-8.954-20-20c0-5.237,0-19.149-49.834-29.549c-10.812-2.256-17.748-12.851-15.492-23.664c2.256-10.812,12.852-17.752,23.664-15.492c24.336,5.078,41.676,11.487,54.569,20.169c22.393,15.077,27.093,34.716,27.093,48.536C282.233,258.005,273.279,266.959,262.233,266.959z"/>
                        <path fill="#d1242a" d="M201.876,312.303c-0.174,0-0.348-0.002-0.522-0.007c-34.396-0.883-58.455-13.735-77.453-26.191c-9.236-6.057-11.814-18.455-5.759-27.691c6.058-9.237,18.454-11.815,27.692-5.76c15.008,9.841,32.246,19.032,56.545,19.656c11.042,0.283,19.764,9.464,19.48,20.506C221.582,303.683,212.683,312.303,201.876,312.303z"/>
                        <path fill="#555555" d="M204.726,312.34c-1.107,0-2.231-0.015-3.372-0.044c11.043-0.283-19.764-9.464-19.48-20.506s9.482-19.806,20.506-19.48c15.121,0.382,26.64-2.867,33.354-9.412c5.372-5.235,6.499-11.557,6.499-15.938			c0-11.046,8.954-20,20-20s20,8.954,20,20c0,17.072-6.599,32.906-18.579,44.583C253.812,301.135,235.684,312.34,204.726,312.34z"/>
                        <path fill="#d1242a" d="M196.504,217.836c-1.404,0-2.828-0.148-4.257-0.458c-18.511-4.013-32.208-9.137-43.106-16.124c-23.215-14.885-27.682-34.702-27.341-48.705c0.495-20.305,7.075-36.349,19.558-47.687c14.509-13.178,36.206-18.835,64.472-16.799c11.018,0.791,19.308,10.363,18.516,21.381c-0.791,11.017-10.358,19.304-21.381,18.516c-16.696-1.194-28.701,1.053-34.712,6.512c-1.518,1.378-6.136,5.572-6.464,19.051c-0.098,4.016-0.396,16.237,38.934,24.764c10.795,2.34,17.648,12.988,15.309,23.783C214,211.436,205.713,217.836,196.504,217.836z"/>
                        <path fill="#555555" d="M252.204,143.87c-3.095,0-6.233-0.72-9.172-2.239c-16.075-8.315-29.556-12.914-40.068-13.67	c-11.018-0.792-19.307-10.364-18.516-21.382c0.792-11.018,10.348-19.312,21.383-18.515c16.182,1.163,34.361,7.062,55.578,18.037c9.812,5.075,13.65,17.143,8.576,26.953C266.429,139.927,259.442,143.87,252.204,143.87z"/>
                        <path fill="#FFFFFF" d="M197.386,193.677L197.386,193.677c-35.513-7.699-51.827-20.58-51.341-40.538		c0.331-13.604,4.132-23.524,11.619-30.324c9.407-8.545,25.023-12.102,46.428-10.562c12.834,0.922,27.938,5.956,46.175,15.389c0.624,0.323,1.292,0.477,1.949,0.477c1.539,0,3.024-0.838,3.78-2.3c1.079-2.085,0.263-4.651-1.823-5.729c-19.281-9.974-35.464-15.312-49.472-16.318c-23.812-1.712-41.56,2.579-52.755,12.749c-9.171,8.33-14.018,20.581-14.403,36.412c-0.883,36.281,43.467,45.896,58.041,49.056c0.005,0.001,0.01,0.001,0.016,0.002s0.01,0.004,0.016,0.005c43.131,9.001,62.365,22.868,62.365,44.965c0,10.477-3.997,20.143-11.255,27.216c-9.827,9.578-25.298,14.408-44.75,13.877c-28.313-0.727-48.634-11.645-64.776-22.229c-1.965-1.288-4.602-0.739-5.888,1.225c-1.288,1.964-0.739,4.6,1.224,5.887c17.145,11.241,38.775,22.838,69.222,23.619c0.987,0.025,1.965,0.037,2.935,0.037c20.441,0,36.984-5.618,47.97-16.326c8.914-8.688,13.823-20.517,13.823-33.306C266.485,212.526,229.565,200.396,197.386,193.677z"/>
                    </g>
                    <g id="solo-o">
                        <path fill="#d1242a" d="M334.245,220c-11.046,0-20-8.953-20-20c0-62.48,50.832-113.312,113.312-113.312c11.046,0,20,8.954,20,20c0,11.047-8.954,20-20,20c-40.425,0-73.312,32.889-73.312,73.312C354.245,211.047,345.291,220,334.245,220z"/>
                        <path fill="#555555" d="M427.558,313.312c-62.48,0-113.312-50.832-113.312-113.312c0-11.045,8.954-20,20-20s20,8.955,20,20			c0,40.426,32.888,73.312,73.312,73.312c11.046,0,20,8.955,20,20C447.558,304.359,438.604,313.312,427.558,313.312z"/>
                        <path fill="#d1242a" d="M427.558,313.312c-11.046,0-20-8.953-20-20c0-11.045,8.954-20,20-20		c40.426,0,73.314-32.887,73.314-73.312c0-11.045,8.954-20,20-20s20,8.955,20,20C540.872,262.48,490.039,313.312,427.558,313.312z"/>
                        <path fill="#555555" d="M520.872,220c-11.046,0-20-8.953-20-20c0-40.424-32.889-73.312-73.314-73.312c-11.046,0-20-8.953-20-20c0-11.046,8.954-20,20-20c62.481,0,113.314,50.832,113.314,113.312C540.872,211.047,531.918,220,520.872,220z"/>
                        <path fill="#FFFFFF" d="M427.558,102.436c-53.797,0-97.564,43.768-97.564,97.564s43.768,97.564,97.564,97.564c53.798,0,97.566-43.768,97.566-97.564S481.355,102.436,427.558,102.436z M427.558,289.061c-49.108,0-89.061-39.951-89.061-89.061c0-49.107,39.952-89.061,89.061-89.061c49.109,0,89.062,39.953,89.062,89.061C516.62,249.109,476.667,289.061,427.558,289.061z"/>
                    </g>
                    <g id="solo-l">
                        <path fill="#d1242a" d="M613.067,307c-11.046,0-20-8.953-20-20V113c0-11.045,8.954-20,20-20s20,8.955,20,20v174C633.067,298.047,624.113,307,613.067,307z"/>
                        <path fill="#555555" d="M716.067,307h-103c-11.046,0-20-8.953-20-20c0-11.045,8.954-20,20-20h103c11.046,0,20,8.955,20,20C736.067,298.047,727.113,307,716.067,307z"/>
                        <path fill="#FFFFFF" d="M716.067,282.748h-98.748V113c0-2.348-1.903-4.252-4.252-4.252s-4.252,1.904-4.252,4.252v174			c0,2.35,1.903,4.252,4.252,4.252h103c2.349,0,4.252-1.902,4.252-4.252C720.319,284.652,718.416,282.748,716.067,282.748z"/>
                    </g>
                    <g id="solo-o2">
                        <path fill="#d1242a" d="M792.263,220c-11.046,0-20-8.953-20-20c0-62.48,50.832-113.312,113.312-113.312c11.046,0,20,8.954,20,20c0,11.047-8.954,20-20,20c-40.425,0-73.312,32.889-73.312,73.312C812.263,211.047,803.309,220,792.263,220z"/>
                        <path fill="#555555" d="M885.575,313.312c-62.48,0-113.312-50.832-113.312-113.312c0-11.045,8.954-20,20-20s20,8.955,20,20c0,40.426,32.888,73.312,73.312,73.312c11.046,0,20,8.955,20,20C905.575,304.359,896.621,313.312,885.575,313.312z"/>
                        <path fill="#d1242a" d="M885.575,313.312c-11.046,0-20-8.953-20-20c0-11.045,8.954-20,20-20c40.426,0,73.314-32.887,73.314-73.312c0-11.045,8.954-20,20-20s20,8.955,20,20C998.89,262.48,948.057,313.312,885.575,313.312z"/>
                        <path fill="#555555" d="M978.89,220c-11.046,0-20-8.953-20-20c0-40.424-32.889-73.312-73.314-73.312c-11.046,0-20-8.953-20-20c0-11.046,8.954-20,20-20c62.481,0,113.314,50.832,113.314,113.312C998.89,211.047,989.936,220,978.89,220z"/>
                        <path fill="#FFFFFF" d="M885.575,102.436c-53.797,0-97.564,43.768-97.564,97.564s43.768,97.564,97.564,97.564c53.798,0,97.566-43.768,97.566-97.564S939.373,102.436,885.575,102.436z M885.575,289.061c-49.108,0-89.061-39.951-89.061-89.061c0-49.107,39.952-89.061,89.061-89.061c49.109,0,89.062,39.953,89.062,89.061C974.638,249.109,934.685,289.061,885.575,289.061z"/>
                    </g>
                </g>
            </svg>
  <p class="info">Cliquez pour relancer l'animation</p>
</div>




            
          
!
            
              body {
    background-color: #eee;
    font-family: sans-serif;
    color: #333; 
}
svg {
    overflow: visible;
}
#container{
    cursor: pointer; 
    display: flex;
    flex-wrap:wrap;
}
.info {
    order: 4;
    width: 100%;
    text-align: center;
    font-size: 13px;
}

/* Animation des lions */
#lion-1,
#lion-2 {
    order: 1;
    width: 20%;
    opacity: 0;
    animation-name: visible;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s; 
    animation-fill-mode: forwards;
}
#lion-2 {
    order: 3;
    width: 20%;
    transform: rotateY(180deg);
}
#lion-1 path,
#lion-2 path {
    animation-name: color;
    animation-duration: 4s;
    animation-direction: alternate ;
    animation-timing-function: linear;
    animation-iteration-count: infinite ;
}
#lion-2 path {
    animation-delay:1s;
}
@keyframes visible {
    100% {
        opacity: 1 ;
    }
}
@keyframes color {
    100% {
        fill: #555555 ;
    }
}

/* Animation des mots */
#solo-lyon{
    order: 2;
    width: 60%;
}
#solo {  
    animation-name: slide-right;
    animation-duration: 1s;
    animation-timing-function: linear;
    transform-origin: center center;
}
#lyon {
    animation-name: slide-left;
    animation-duration: 1s;
    animation-timing-function: linear;
    transform-origin: center center ;
}
@keyframes slide-right {
    0% {
        transform: translateX(-100%);
    }
    66% {
        transform: translateX(6%) scaleX(1);
    }
    84% {
        transform: scaleX(0.5) translateX(7%);
    }
    92%{
        transform: scaleX(1) translateX(6%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slide-left {
    0% {
        transform: translateX(100%);
    }
    66% {
        transform: translateX(-5%) scaleX(1) ;
    }
    84%{
        transform: scaleX(0.5) translateX(-6%);
    }
    92%{
        transform: scaleX(1) translateX(-6%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Animation des lettres */
#solo-s {    
    transform-origin: 50% bottom;   
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}
#solo-l,
#lyon-l {
    animation-name: vibrate;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-fill-mode: both;    
}
#solo-o,
#solo-o2,
#lyon-o {
    animation-name: spin;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-delay: 1s;
}
#solo-o {
    animation-delay: 1.5s;
    transform-origin: 18.85% 50%;
}
#solo-o2 {
    animation-delay: 1s;
    transform-origin: 39% 50%;
}
#lyon-o {
    animation-delay: 1s;
    transform-origin: 78.7% 50%;
}
#lyon-y {
    animation-name: elastic;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-delay: 1s;
    transform-origin: 68% center;
}
#lyon-n {
    animation-name: flip;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 1s;
    transform-origin: 90% bottom;
}
@keyframes bounce {
    10% {
        transform: scaleY(0.8);
    }
    25%, 26% {
        transform: translateY(-20%) scaleY(1.001);
    }
    35% {
        transform: translateY(0) scaleY(0.999);
    }
    50% {
        transform: scaleY(0.95);
    }
    60% {
        transform: scaleY(1);
    }
}
@keyframes elastic {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes flip {
    from {
    }
    to {
        transform: matrix(-1, 0, 0, 1, 0, 0);
    }
}
@keyframes spin {
    25% {
        transform: rotate(360deg);
    }
    50% {
        transform: rotate(270deg);
    }
    90% {
        transform: rotate(1100deg);
    }
    100% {
        transform: rotate(1000deg);
    }
}
@keyframes vibrate {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}





            
          
!
            
              /* UNIQUEMENT RELANCER L'ANIM EN CLIQUANT  */
$(document).ready(function() {
  $("#container").click(function() {
    newone = $(this).html();
    $(this).html(newone);
  });
});

            
          
!
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