cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <div>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46 (44423) - http://www.bohemiancoding.com/sketch -->
    <title>main</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="150" cy="150" r="150"></circle>
        <linearGradient x1="73.6543254%" y1="86.0734249%" x2="15.7559349%" y2="14.6614626%" id="linearGradient-3">
            <stop stop-color="#FFFFFF" offset="0%"></stop>
            <stop stop-color="#D1D5DF" offset="100%"></stop>
        </linearGradient>
        <rect id="path-4" x="0" y="20" width="29" height="69"></rect>
        <filter x="-5.2%" y="-0.7%" width="106.9%" height="101.4%" filterUnits="objectBoundingBox" id="filter-5">
            <feOffset dx="-1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
        </filter>
        <rect id="path-6" x="0" y="19" width="29" height="50"></rect>
        <filter x="-5.2%" y="-1.0%" width="106.9%" height="102.0%" filterUnits="objectBoundingBox" id="filter-7">
            <feOffset dx="-1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
        </filter>
        <rect id="path-8" x="0" y="19" width="29" height="50"></rect>
        <filter x="-5.2%" y="-1.0%" width="106.9%" height="102.0%" filterUnits="objectBoundingBox" id="filter-9">
            <feOffset dx="-1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Daily-UI-035:-Invisible-Cities" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="svg-Animation" transform="translate(-137.000000, -142.000000)">
            <g id="main" transform="translate(137.000000, 142.000000)">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <use id="Mask" fill="#FFDFB1" xlink:href="#path-1"></use>
                <g id="sky" mask="url(#mask-2)" fill="#FFDFB1">
                    <circle id="Mask-Copy" cx="150" cy="150" r="150"></circle>
                </g>
                <g id="sand-done" mask="url(#mask-2)">
                    <g transform="translate(33.000000, 244.000000)"></g>
                </g>
                <g id="sand-done-1" mask="url(#mask-2)">
                    <g transform="translate(-8.000000, 63.000000)">
                        <path d="M9.5,126.5 C26.5720046,85.9676856 43,46.5 60.5,47 C78,47.5 122,113 149.5,113 C177,113 209,0.5 225,0.5 C241,0.5 285.5,89 349,113 C357.871506,129.248654 357.871506,147.611089 349,168.087305 L9.4986433,168.087305 C-1.88178865,167.383978 -1.88133642,153.521543 9.5,126.5 Z" id="Path-2" fill="#FFCB7F"></path>
                        <path d="M12.5363415,146 C29.6083461,105.467686 46.0363415,66 63.5363415,66.5 C81.0363415,67 125.036342,132.5 152.536342,132.5 C180.036342,132.5 212.036342,30 228.036342,30 C244.036342,30 288.536342,108.5 352.036342,132.5 C360.907848,148.748654 360.907848,167.111089 352.036342,187.587305 L12.5349848,187.587305 C1.15455285,186.883978 1.15500508,173.021543 12.5363415,146 Z" id="Path-2-Copy" fill="#FFC068"></path>
                    </g>
                </g>
                <g id="sand-done-2" mask="url(#mask-2)">
                    <g transform="translate(-6.000000, 187.000000)">
                        <path d="M6.90991686,35.3886845 C23.9819215,-5.14362995 56.9099169,19.0950322 74.4099169,19.5950322 C83.9196095,19.8667377 105.774664,11.1114724 123.909917,13.5950322 C139.147659,15.6817879 144.85372,19.5950322 157.409917,19.5950322 C184.909917,19.5950322 197.409917,0.0950321621 213.409917,0.0950321621 C220.898984,0.0950321621 230.488985,-1.17805392 255.909917,5.59503216 C284.799476,13.2922901 320.668493,-7.17136721 354.446258,5.59503216 C363.317765,21.8436863 363.317765,48.0394545 354.446258,84.1823368 L14.9449017,84.1823368 C-1.7930913,78.6747782 -4.47141956,62.4102274 6.90991686,35.3886845 Z" id="Path-2-Copy-2" fill="#FFB54C"></path>
                        <path d="M12.9099169,66.3886845 C19.1225357,51.6386991 4.00536104,45.3603951 12.9099169,43.5 C28.4746908,40.2481107 69.2782861,50.2769856 80.4099169,50.5950322 C89.9196095,50.8667377 106.864748,41.0164403 125,43.5 C140.237742,45.5867557 150.85372,50.5950322 163.409917,50.5950322 C190.909917,50.5950322 191.5,36.5950322 207.5,36.5950322 C214.989067,36.5950322 236.488985,29.8219461 261.909917,36.5950322 C290.799476,44.2922901 326.668493,23.8286328 360.446258,36.5950322 C369.317765,52.8436863 369.317765,79.0394545 360.446258,115.182337 L20.9449017,115.182337 C4.2069087,109.674778 1.52858044,93.4102274 12.9099169,66.3886845 Z" id="Path-2-Copy-3" fill="#FFA526"></path>
                    </g>
                </g>
                <g id="lake" mask="url(#mask-2)" fill="#51CAD9">
                    <g transform="translate(-64.000000, 216.000000)" id="Oval-2-Copy">
                        <path d="M20.5,59.5 C35.6065994,59.5 66.0670624,48.9300556 91,46 C111.596908,43.5795036 157.528002,33.8568964 170,31 C177.203592,29.3499102 193,26.2471341 193,21.956721 C193,1.24604288 150.793939,4 116,4 C96.7902309,4 57.5554923,-4.06975549 46,4 C36.6254595,10.546692 7.5,7.72370827 7.5,17 C7.5,37.7106781 -14.2939392,59.5 20.5,59.5 Z"></path>
                    </g>
                </g>
                <g id="sun" mask="url(#mask-2)" fill="#FFFFFF">
                    <g transform="translate(81.000000, 34.000000)" id="Oval">
                        <circle cx="33" cy="33" r="33"></circle>
                    </g>
                </g>
                <g id="churches" style="transform:translateX(300px)" mask="url(#mask-2)">
                    <g transform="translate(-4.000000, 106.000000)">
                        <path d="M18,64 L44.5,64 L44.5,51 L61,51 L61,36 L74,36 L74,68.5 L89,68.5 L89,16 L104,16 L104,81.030762 L119,81.030762 L119,40.5 L134.5,40.5 L134.5,68.5 L150,68.5 L150,40.5 L166.5,40.5 L166.5,26 C171.045827,24.7880914 174.37916,24.7880914 176.5,26 C178.62084,27.2119086 178.62084,30.5452419 176.5,36 C175.55985,49.1567717 175.55985,57.490105 176.5,61 C177.44015,64.509895 179.94015,65.509895 184,64 L184,97.5 L195.5,97.5 L195.5,0 L209.5,0 L209.5,68.5 L217,68.5 L217,48.75 L225,48.75 L225,68.5 L225,87.5 L241,87.5 L241,26 L253.5,26 L253.5,51 L253.5,73.5 L268,81.030762 L268,48.75 L281.5,48.75 L281.5,64 L281.5,73.5 L293.5,68.5 L293.5,48.75 L304.5,48.75 L304.5,126.5 L18,131.5 L18,64 Z" id="Path-9" fill="#0C5E53"></path>
                        <g id="church1" stroke-width="1" fill="none" transform="translate(17.000000, 38.000000)">
                            <path d="M0,8 C2.66666667,3 7.5,0.5 14.5,0.5 C21.5,0.5 26.3333333,3 29,8 L29,30 L0,30 L0,8 Z" id="Rectangle-4" fill="url(#linearGradient-3)"></path>
                            <rect id="Rectangle-2" fill="#EFCBAB" x="0" y="19" width="29" height="58"></rect>
                            <rect id="Rectangle-3" fill="#B17122" x="7" y="55" width="15" height="15"></rect>
                            <circle id="Oval-2" fill="#DAAE89" cx="14.5" cy="41.5" r="7.5"></circle>
                        </g>
                        <g id="church2" stroke-width="1" fill="none" transform="translate(46.000000, 26.000000)">
                            <path d="M0,8 C2.66666667,3 7.5,0.5 14.5,0.5 C21.5,0.5 26.3333333,3 29,8 L29,30 L0,30 L0,8 Z" id="Rectangle-4" fill="url(#linearGradient-3)"></path>
                            <g id="Rectangle-2">
                                <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
                                <use fill="#EFCBAB" fill-rule="evenodd" xlink:href="#path-4"></use>
                            </g>
                            <circle id="Oval-2" fill="#DAAE89" cx="13.5" cy="42.5" r="7.5"></circle>
                            <rect id="Rectangle-3" fill="#B17122" x="7" y="58" width="15" height="25.7142857"></rect>
                        </g>
                        <g id="church3" stroke-width="1" fill="none" transform="translate(75.000000, 46.000000)">
                            <path d="M0,8 C2.66666667,3 7.5,0.5 14.5,0.5 C21.5,0.5 26.3333333,3 29,8 L29,30 L0,30 L0,8 Z" id="Rectangle-4" fill="url(#linearGradient-3)"></path>
                            <g id="Rectangle-2">
                                <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
                                <use fill="#EFCBAB" fill-rule="evenodd" xlink:href="#path-6"></use>
                            </g>
                            <rect id="Rectangle-3" fill="#B17122" x="7" y="47" width="15" height="15"></rect>
                            <circle id="Oval-2" fill="#DAAE89" cx="14.5" cy="33.5" r="7.5"></circle>
                        </g>
                        <g id="church4" stroke-width="1" fill="none" transform="translate(104.000000, 46.000000)">
                            <path d="M0,8 C2.66666667,3 7.5,0.5 14.5,0.5 C21.5,0.5 26.3333333,3 29,8 L29,30 L0,30 L0,8 Z" id="Rectangle-4" fill="url(#linearGradient-3)"></path>
                            <g id="Rectangle-2">
                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
                                <use fill="#EFCBAB" fill-rule="evenodd" xlink:href="#path-8"></use>
                            </g>
                            <rect id="Rectangle-3" fill="#B17122" x="7" y="47" width="15" height="15"></rect>
                            <circle id="Oval-2" fill="#DAAE89" cx="14.5" cy="33.5" r="7.5"></circle>
                        </g>
                        <path d="M6.90991686,131.097056 C13.1225357,116.347071 -1.99463896,110.068767 6.90991686,108.208371 C22.4746908,104.956482 63.2782861,114.985357 74.4099169,115.303404 C83.9196095,115.575109 100.864748,105.724812 119,108.208371 C134.237742,110.295127 144.85372,115.303404 157.409917,115.303404 C184.909917,115.303404 185.5,101.303404 201.5,101.303404 C208.989067,101.303404 230.488985,94.5303175 255.909917,101.303404 C284.799476,109.000662 320.668493,88.5370042 354.446258,101.303404 C363.317765,117.552058 363.317765,143.747826 354.446258,179.890708 L14.9449017,179.890708 C-1.7930913,174.38315 -4.47141956,158.118599 6.90991686,131.097056 Z" id="Path-2-Copy-3" fill="#12867A"></path>
                    </g>
                </g>
                <g id="rooster" style="transform:translateX(300px)" mask="url(#mask-2)">
                    <g transform="translate(106.000000, 125.000000)" id="Bitmap">
                        <image x="1" y="0" width="30" height="32" xlink:href="data:image/png;base64,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"></image>
                    </g>
                </g>
                <g id="moon" style="transform:rotate(30deg)" mask="url(#mask-2)" fill-opacity="0.85" fill="#FFE9B8" fill-rule="nonzero">
                    <g transform="translate(81.000000, 34.000000)" id="hotspot-icon">
                        <path d="M46.8734653,7.3546651 C47.7188441,7.0109377 48.2537092,6.16436808 48.2379618,5.23091699 C48.2368655,4.35214456 47.714459,3.49584798 46.9119371,3.12483893 C39.9372133,-0.163477699 31.9485231,-0.89453079 24.4590667,1.11226301 C6.91077824,5.81431272 -3.58818597,23.9232532 1.12946919,41.529782 C5.84712435,59.1363107 23.9392967,69.5842792 41.5422527,64.8675814 C49.4143821,62.7582507 56.2220141,57.7695129 60.7049542,50.8836848 C61.1998028,50.106442 61.1694043,49.1183122 60.7309675,48.3567248 C60.2925307,47.5951374 59.3660227,47.198746 58.4620394,47.3237588 C47.971548,48.8453804 37.9485471,42.2715383 35.1941397,31.9919501 C32.4290181,21.891046 37.3888668,11.5369791 46.8734653,7.3546651 L46.8734653,7.3546651 Z"></path>
                    </g>
                </g>
                <g id="stars" mask="url(#mask-2)" fill="#FFFFFF">
                    <g transform="translate(150.000000, 26.000000)">
                        <rect id="Rectangle-5" x="0" y="21" width="3" height="3"></rect>
                        <rect id="Rectangle-5-Copy" x="0" y="41" width="4" height="4"></rect>
                        <polygon id="Triangle" points="21.5 0 25 6 18 6"></polygon>
                        <polygon id="Triangle-Copy" points="18 29 20 32.4285714 16 32.4285714"></polygon>
                    </g>
                </g>
                <g id="sand-done-3" mask="url(#mask-2)" fill="#F37C00">
                    <g transform="translate(33.000000, 244.000000)" id="Path-3-Copy">
                        <path d="M0,11.0208333 C29.6666667,3.35416667 56.1666667,-0.3125 79.5,0.0208333333 C114.5,0.520833333 186.5,27.0208333 218.5,28.0208333 C239.833333,28.6875 262.5,28.3541667 286.5,27.0208333 L286.5,67.6717866 L0,67.6717866 L0,11.0208333 Z" transform="translate(143.250000, 33.835893) scale(-1, 1) translate(-143.250000, -33.835893) "></path>
                    </g>
                </g>
                <g id="sand-done-front" mask="url(#mask-2)" fill="#F98B00">
                    <g transform="translate(33.000000, 244.000000)" id="Path-3">
                        <path d="M0,11.0208333 C29.6666667,3.35416667 56.1666667,-0.3125 79.5,0.0208333333 C114.5,0.520833333 186.5,27.0208333 218.5,28.0208333 C239.833333,28.6875 262.5,28.3541667 286.5,27.0208333 L286.5,67.6717866 L0,67.6717866 L0,11.0208333 Z"></path>
                    </g>
                </g>
                <g id="traveler" mask="url(#mask-2)">
                    <g transform="translate(135.000000, 174.000000)">
                        <g id="camel" transform="translate(34.000000, 0.000000)">
                            <path d="M67.9440116,35.694035 C66.2430869,35.4778529 62.0517301,37.5339496 58.4525039,38.4823104 C54.8464171,39.4364571 51.9781189,38.7016484 51.5290072,39.2018653 L40.7154964,39.0288145 L40.7154964,39.0288145 C38.6214012,37.8248223 36.4127852,35.9538743 36.4127852,35.9538743 C16.1067113,37.8158805 16.4381357,25.3451729 15.2206262,23.8539899 C12.9001281,21.0136415 13.3993755,17.5741899 13.5508386,15.4497145 C13.0088437,16.1477038 9.43389385,16.851479 8.14830516,15.4560264 C6.7914708,13.989565 3.56958289,12.6246198 2.78007522,12.2606344 C1.99003981,11.896123 0.165622691,12.6866866 0.20573137,12.1217729 C0.252172997,11.5537032 0.998933258,11.4053739 1.08548356,11.1676262 C1.17520034,10.9346124 0.171427895,11.0398105 0.0257700632,10.3449771 C-0.126220718,9.64698782 0.443744711,9.02947503 0.443744711,9.02947503 C1.72616692,8.36567508 1.98001264,8.64024209 2.88456888,7.2789788 C3.78595865,5.90509174 6.20831172,5.42644043 8.57525149,5.77201616 C10.9358583,6.11759188 11.6203446,6.19806842 14.776792,4.81155759 C17.9306007,3.43451459 20.3371214,4.22192229 20.3371214,4.22192229 C20.7893995,3.50236735 22.3008634,3.64122883 22.3008634,3.64122883 C22.4897964,3.99627239 22.102431,6.72563685 22.102431,6.72563685 C22.102431,6.72563685 23.8281596,7.36471524 25.2652114,8.55976555 C26.708596,9.74850397 26.6621544,11.4774346 27.1672071,12.6940505 C27.6785928,13.9106664 26.7492325,15.8031801 26.3338966,16.0751171 C25.9127554,16.3407423 26.2874549,17.7977359 26.7735088,20.212558 C27.2595626,22.6273802 28.3472467,23.7135505 28.3472467,23.7135505 C28.3472467,23.7135505 29.4344029,24.843378 30.3389592,24.843378 C33.0990695,24.843378 34.8496022,23.2717185 35.6391099,22.197646 C37.2561229,19.9995319 38.2134538,13.1790137 43.5014664,12.447361 C46.5866681,12.0181528 49.0248536,7.70503107 52.9280612,2.91641399 C56.7536903,-1.77647283 65.1459035,-0.461496695 67.791493,4.40759692 C69.6438807,7.79760539 74.1202203,14.0589957 79.1295831,17.4369064 C84.1294465,20.8085052 83.32094,24.399442 83.6154221,26.7490414 C83.9099042,29.0954848 86.9270268,36.4283177 86.9982725,37.3824644" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                            <g id="camel-front-leg" transform="translate(34.000000, 34.000000)" fill="#000000">
                                <g id="camel-front-leg-left">
                                    <path d="M7,1.04054054 L6,34.5540541 L0,40.5 L6,40.5 L8.5,35.6351351 C9.5,29.8693694 10,26.2657658 10,24.8243243 C10,23.3828829 12,15.2747748 16,0.5" id="Path-6"></path>
                                </g>
                                <g id="camel-front-leg-right" transform="translate(5.000000, 2.000000)">
                                    <path d="M0,0.5 L7,10.3181818 C10,17.2272727 11.6666667,21.5909091 12,23.4090909 C12.3333333,25.2272727 12.5,28.5 12.5,33.2272727 L9.5,36.5 L15.5,36.5 C16.1666667,33.9545455 16.1666667,31.5909091 15.5,29.4090909 C14.8333333,27.2272727 13.3333333,17.5909091 11,0.5" id="Path-7"></path>
                                </g>
                            </g>
                            <g id="camel-rear-legs" transform="translate(64.000000, 31.000000)" fill="#000000">
                                <g id="camel-rear-leg-left" transform="translate(0.000000, 2.000000)">
                                    <path d="M5,2.16 C5.66666667,7.2 6.33333333,10.62 7,12.42 C8,15.12 10,24.84 10,20.52 C10,16.2 9,27.54 7,31.32 C5.66666667,33.84 3.5,36.9 0.5,40.5 L5.25,40.5 L8,37.26 L9,31.32 C12.3333333,25.56 14,22.68 14,22.68 C14,22.68 13.6666667,18.36 13,9.72 L11.5,0.5 L5,2.16 Z" id="Path-8"></path>
                                </g>
                                <g id="camel-rear-leg-right" transform="translate(9.000000, 0.000000)">
                                    <path d="M-1.77635684e-15,3.725 L9,21.4625 C9.48875708,28.643068 9.32209041,34.1972347 8.5,38.125 C6.5,41.35 5,43.1416667 4,43.5 L9,43.5 L10.5,40.8125 L13,39.2 L13,17.7 L12,8.025 L13,6.4125 L6.5,0.5 L-1.77635684e-15,3.725 Z"></path>
                                </g>
                            </g>
                        </g>
                        <g id="person" transform="translate(0.000000, 1.000000)">
                            <path d="M13.6787136,10.2318659 C12.9836418,10.2318659 12.0892326,10.4183327 11.534532,9.88382983 C11.0320139,9.39541396 11.1974326,8.54995656 10.6891744,7.96512888 C10.355206,7.57948164 9.43627101,7.42426922 9.3506916,6.95439409 C9.22806257,6.23289472 10.2330988,5.51457377 10.4501783,4.82432878 C11.0659325,2.89662234 9.969055,1.60300894 12.1194985,0.523938305 C14.024684,-0.427466142 16.0493675,0.00797620484 17.7953962,1.09923075 C19.5722125,2.21538285 20.4420959,3.63666243 20.7755425,5.69839189 C21.0849851,7.5953737 20.3377308,9.37369482 20.5182825,11.2770334 C20.705096,13.1893776 20.8365961,14.3463193 21.1705645,16.0626614 C21.6329021,18.4194534 21.8932931,20.8604732 22.2700512,23.2299788 C23.5506113,31.3179761 23.2902203,39.5950889 24.5702587,47.6889132 C25.1922748,51.6629868 6.21034481,52.6572998 6.22286862,48.3754501 C6.23800156,43.7545698 8.36391929,40.0760884 9.6658743,35.7852332 C10.094815,34.3549481 10.5420196,32.8097105 10.612466,31.3047327 C10.7225712,29.1126884 9.65700326,30.2288405 9.04751089,31.4604749 C8.0184707,33.5190259 6.11641619,36.0283817 4.32446689,38.1552685 C4.04894294,38.478407 4.34273078,39.3524701 4.04894294,39.6289919 C3.57721255,40.0580774 3.08095635,40.4156487 2.55704339,40.6678027 C1.09593156,41.37341 -0.165842878,40.5401365 0.0178397527,38.8391567 C0.10341916,38.0148887 0.612199174,37.3124598 1.09593156,36.6285717 C1.27335228,36.3769474 1.8494478,36.2614651 2.12497175,36.1682318 C2.30552343,36.1062527 1.83379303,36.1745886 2.30552343,35.1140587 C3.17853775,33.1704602 5.44795752,29.5200548 6.28131309,27.5425532 C7.16058932,25.4686399 8.66449086,22.6573351 9.58029489,20.5929569 C10.5331485,18.4565348 10.4470473,16.7401927 11.52253,14.6540954 C11.9666036,13.7895676 12.7509076,13.2142751 13.1704554,12.4371536 C13.6207909,11.5911664 13.5592155,11.0815612 14.0831285,10.1518758 C13.9208407,10.835764 13.9177097,11.0752043 13.8164756,11.7066487 L13.6787136,10.2318659 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                            <g id="legs" transform="translate(2.000000, 27.000000)" fill="#000000">
                                <g id="person-leg-left" transform="translate(0.000000, 2.000000)">
                                    <path d="M13,5 C8,9 5.5,11.6666667 5.5,13 C5.5,14.3333333 5.16666667,22.8333333 4.5,38.5 L3.5,40 L0.5,42.5 L8.5,42.5 L9.5,40 L14,40 L19,0" id="Path-4"></path>
                                </g>
                                <g id="person-leg-right" transform="translate(9.000000, 0.000000)">
                                    <polygon id="Path-5" points="-1.42108547e-14 9.5 3 38 6 41.5 14 42.5 12.5 44 20.5 41.5 4.5 0"></polygon>
                                </g>
                            </g>
                        </g>
                        <g id="leash" transform="translate(0.000000, 8.000000)">
                            <path d="M1.43701258,29.6536513 C1.51832847,30.2972992 1.57732236,30.95631 1.61505719,31.6222075 C1.61824604,30.7295764 1.66820483,29.8342965 1.74898925,28.951201 L3.14677229,29.0820496 C2.85020844,32.1265308 3.04366586,35.266897 3.82068442,38.2149635 C4.52861104,40.9108683 5.72709042,43.457913 7.46767577,45.6314829 C9.32678036,47.9417287 11.8789302,49.7455322 14.6771537,50.7467623 C17.3132769,51.676476 20.1614591,51.8973824 22.8475411,51.1387784 C24.4260261,50.6911385 25.8891807,49.9383617 27.2433827,49.002291 C28.6161864,48.0508575 29.8672819,46.903416 31.0057044,45.6812796 C34.1536394,42.2919302 36.5059541,38.2864799 38.1870141,33.9674169 C40.0524964,29.1477387 41.0851552,23.9450503 41.4407129,18.7709685 C41.7712913,13.8485186 41.5470082,8.91971171 41.0415741,4.00044032 C40.53614,-0.950086408 41.9339231,-1.10848207 42.4393572,3.85422894 C42.951169,8.85137378 43.1786409,13.8580542 42.838496,18.8705618 C42.4765605,24.1659567 41.4189224,29.5116779 39.4939147,34.4743889 C37.7533294,38.9428419 35.3101322,43.1003308 32.0346428,46.6295346 C30.8335061,47.9231874 29.5016261,49.1357884 28.0475066,50.152911 C26.572128,51.175861 24.9681321,51.9906186 23.2339244,52.4848767 C20.2512786,53.3308896 17.1006863,53.0972693 14.1993564,52.0589565 C11.1699407,50.98621 8.39669659,49.0240108 6.38133792,46.5114 C4.49991131,44.1730774 3.22117899,41.4522742 2.46276211,38.5661887 C2.07903612,37.0982476 1.82924219,35.5905751 1.70168785,34.0728374 C1.7388912,36.3242808 1.64216248,38.6472406 1.55500035,40.9760277 C1.40831285,44.7944757 1.25524763,48.6192808 1.67033074,52.0769681 L0.269358833,52.2417208 C-0.145724268,48.699803 0.00415208858,44.8098385 0.157217304,40.9198741 C0.297527085,37.0982476 0.4505923,33.2766211 0.0386980573,29.8215825 L1.43701258,29.6536513 Z" id="Shape" fill="#000000" fill-rule="nonzero"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
</div>
            
          
!
            
              // General styles
div
  background-color: #313131
  height: 100%
  width: 100%
  position: absolute

svg
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  
// person style
#person-leg-left
  transform: rotate(-15deg)
  animation: person-walk-left 3s infinite
  transform-origin: top center
  
#person-leg-right
  transform: rotate(2deg) translate(10px)
  animation: person-walk-right 3s infinite
  transform-origin: 10px center
  animation-delay: 1.5s

// camel style
#camel-front-leg-right
  transform: rotate(-7deg) translate(5px)
  animation: camel-walk-right 2.6s infinite
  transform-origin: top center
  animation-delay: 0.5s
  
#camel-front-leg-left
  transform: rotate(-10deg) translate(10px)
  animation: camel-walk-left 2.6s infinite
  transform-origin: top center
  animation-delay: 1.8s
  
#camel-rear-leg-right
  transform: rotate(-7deg) translate(5px)
  animation: camel-walk-right 2.6s infinite
  transform-origin: top center
  animation-delay: 0.2s
  
#camel-rear-leg-left
  transform: rotate(-10deg) translate(10px)
  animation: camel-walk-left 2.6s infinite
  transform-origin: top center
  animation-delay: 1.5s
#stars
  opacity: 0
  
#churches, #rooster
  transform: translateX(300px)
  
#sun, #moon
  //opacity: 0
  //transform: rotate(90deg)
  // animation: sun 2s infinite ease-out
  transform-origin: -600px center
  
/*** custom defined animations ***/

// custom animations for person
@keyframes person-walk-left
  50%
    transform: rotate(6deg)
  
@keyframes person-walk-right
  50%
    transform: rotate(20deg)
  
// custom animations for camel
@keyframes camel-walk-left
  50%
    transform: rotate(10deg)
  
@keyframes camel-walk-right
  50%
    transform: rotate(22deg)
            
          
!
            
              var dayTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

dayTimeline
  .add({
    targets: '#sun',
    rotate: 30,
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#sun',
    rotate: 0,
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var nightTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

nightTimeline
  .add({
    targets: '#moon',
    rotate: 0,
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#moon',
    rotate: 30,
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var sandDoneFrontTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

sandDoneFrontTimeline
  .add({
    targets: '#sand-done-front',
    fill: '#0F786A',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#sand-done-front',
    fill: '#F98B00',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var sandDone3Timeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

sandDone3Timeline
  .add({
    targets: '#sand-done-3',
    fill: '#156A5F',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#sand-done-3',
    fill: '#F37C00',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var dayTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

dayTimeline
  .add({
    targets: '#sand-done-1, #sand-done-2, #lake',
    direction: 'alternate',
    translateX: '300px',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#sand-done-1, #sand-done-2, #lake',
    direction: 'alternate',
    translateX: '0px',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var nightTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

nightTimeline
  .add({
    targets: '#churches, #rooster',
    direction: 'alternate',
    translateX: '0px',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#churches, #rooster',
    direction: 'alternate',
    translateX: '300px',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var skyTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

skyTimeline
  .add({
    targets: '#sky',
    fill: '#58BEB3',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#sky',
    fill: '#FFDFB1',
    //direction: 'alternate',
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })

var starTimeline = anime.timeline({
  //direction: 'alternate',
  loop: true,
});

starTimeline
  .add({
    targets: '#stars',
    opacity: 1,
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100
  })
  .add({
    targets: '#stars',
    opacity: 0,
    duration: 2000,
    delay: 2000,
    // easing: [1,0.2,0.0125,0.5],
    easing: 'easeInOutElastic',
    elasticity: 100,
    offset: 4000
  })
            
          
!
999px
Loading ..................

Console