Skip to content

Instantly share code, notes, and snippets.

@iamarya2k24

iamarya2k24/earth-day-night-click-on-image.markdown

Created December 9, 2018 19:31
Show Gist options
  • Save iamarya2k24/5c37a79886c8189d61a6ed8599b777f6 to your computer and use it in GitHub Desktop.
Save iamarya2k24/5c37a79886c8189d61a6ed8599b777f6 to your computer and use it in GitHub Desktop.
Download ZIP
Earth Day & Night (Click on Image)
Raw
earth-day-night-click-on-image.markdown

Earth Day & Night (Click on Image)

An Earth pen for CodePen's challenge!

SVG made with Sketch, and animated using GSAP

A Pen by N K I on CodePen.

License.

Raw
index.html
<?xml version="1.0" encoding="UTF-8"?>
<div id="background">
<svg width="1366px" height="768px" viewBox="0 0 1366 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Earth Day & Night</title>
<defs>
<!-- Earth -->
<!-- <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="space-1">
<stop stop-color="#463C77" offset="0%"></stop>
<stop stop-color="#0E355D" offset="100%"></stop>
</linearGradient> -->
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="earth-ring-4">
<stop stop-color="#424078" offset="0%"></stop>
<stop stop-color="#0A3B6F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="earth-ring-3">
<stop stop-color="#48497F" offset="0%"></stop>
<stop stop-color="#0F447B" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="2.45438945%" x2="50%" y2="100%" id="earth-ring-2">
<stop stop-color="#5B5F95" offset="0%"></stop>
<stop stop-color="#1C4C84" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="3.03919798%" x2="50%" y2="100%" id="earth-ring-1">
<stop stop-color="#443C76" offset="0%"></stop>
<stop stop-color="#0E355E" offset="100%"></stop>
</linearGradient>
<radialGradient cx="50%" cy="15.3148692%" fx="50%" fy="15.3148692%" r="65.9535965%" gradientTransform="translate(0.500000,0.153149),scale(1.000000,0.999007),rotate(90.000000),translate(-0.500000,-0.153149)" id="earth-1">
<stop stop-color="#83E1ED" offset="0%"></stop>
<stop stop-color="#3A96B9" offset="100%"></stop>
</radialGradient>
<!-- star red -->
<filter x="-259.1%" y="-259.1%" width="618.2%" height="618.2%" filterUnits="objectBoundingBox" id="star-red-1">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.501578283 0 0 0 0 0.501578283 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<!-- star yellow -->
<filter x="-237.5%" y="-237.5%" width="575.0%" height="575.0%" filterUnits="objectBoundingBox" id="star-yellow-1">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.501578283 0 0 0 0 0.501578283 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<!-- star blue -->
<filter x="-237.5%" y="-237.5%" width="575.0%" height="575.0%" filterUnits="objectBoundingBox" id="star-blue-1">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.501578283 0 0 0 0 0.759677436 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<!-- star white -->
<filter x="-475.0%" y="-475.0%" width="1050.0%" height="1050.0%" filterUnits="objectBoundingBox" id="star-white-1">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="9" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Canvas" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<!-- <rect id="space" fill="url(#space-1)" x="0" y="0" width="1366" height="768"></rect> -->
<circle id="earth-ring-4" fill="url(#earth-ring-4)" opacity="0.5" cx="683" cy="421" r="274"></circle>
<circle id="earth-ring-3" fill="url(#earth-ring-3)" opacity="0.8" cx="683" cy="421" r="233"></circle>
<circle id="earth-ring-2" fill="url(#earth-ring-2)" opacity="1" cx="681.5" cy="419.5" r="194.5"></circle>
<circle id="earth-ring-1" fill="url(#earth-ring-1)" opacity="1" cx="683" cy="421" r="156"></circle>
<g id="cloud-back" transform="translate(531.000000, 275.000000)" fill="#FFFFFF" opacity="0.5">
<rect id="cloud-4" x="0" y="42" width="162" height="32" rx="16"></rect>
<rect id="cloud-5" x="162" y="167" width="162" height="32" rx="16"></rect>
<path id="cloud-6" d="M196.271896,31 C195.45737,29.3402994 195,27.4735619 195,25.5 C195,25.3325438 195.003293,25.1658568 195.009817,25 L176.5,25 C169.596441,25 164,19.4035594 164,12.5 C164,5.59644063 169.596441,0 176.5,0 L237.5,0 C244.403559,0 250,5.59644063 250,12.5 C250,12.6674562 249.996707,12.8341432 249.990183,13 L268.5,13 C275.403559,13 281,18.5964406 281,25.5 C281,32.4035594 275.403559,38 268.5,38 L230.728104,38 C231.54263,39.6597006 232,41.5264381 232,43.5 C232,50.4035594 226.403559,56 219.5,56 L158.5,56 C151.596441,56 146,50.4035594 146,43.5 C146,36.5964406 151.596441,31 158.5,31 L196.271892,31 L196.271896,31 Z"></path>
</g>
<g id="earth" transform="translate(544.000000, 282.000000)">
<path d="M277.990498,139.462771 C277.990498,216.120107 215.907466,278.264864 139.32525,278.264864 C62.7440532,278.264864 0.662039411,216.120107 0.662039411,139.462771 C0.662039411,62.804415 62.7440532,0.660677536 139.32525,0.660677536 C215.907466,0.660677536 277.990498,62.804415 277.990498,139.462771" fill="url(#earth-1)"></path>
<path d="M0.997083116,129.737967 C31.4217302,173.595948 82.1044659,202.311194 139.486843,202.311194 C196.68521,202.311194 247.227011,173.780577 277.684066,130.161164 C277.887279,133.235415 277.990498,136.337027 277.990498,139.462771 C277.990498,216.120107 215.907466,278.264864 139.32525,278.264864 C62.7440532,278.264864 0.662039411,216.120107 0.662039411,139.462771 C0.662039411,136.19354 0.774950844,132.950708 0.997083012,129.737968 L0.997083116,129.737967 Z" id="earth-shadow" fill="#3A96B9"></path>
<g id="continents" transform="translate(18.720154, 0.009504)">
<g id="continent-shadow" transform="translate(0.432724, 0.649988)" fill="#2E85A7">
<path d="M0.164924311,69.2207997 C22.3659781,30.9371592 62.3252916,4.25252669 108.755852,0.464894523 C109.637124,1.52114344 110.072828,2.91716343 110.063325,4.31318341 C110.064344,4.48390608 110.058231,4.65462876 110.046007,4.82331902 C111.230737,6.83439144 111.75536,8.95318175 112.251459,11.7589276 C112.894249,15.3989788 114.819562,17.7098321 113.12549,21.25436 C111.900013,23.8192649 108.103376,23.2949024 106.169913,22.1028923 C103.426596,20.4119249 102.219455,20.1934405 99.0065241,20.3265636 C97.1301074,20.402779 95.5521652,20.2533967 93.7725235,19.7005804 C90.8183386,18.7809137 88.4060939,16.5747296 85.6464778,19.6995642 C83.860724,21.7187663 82.5231913,24.1129485 81.6939822,26.6798859 C80.4827664,30.4235902 78.9567771,35.3135753 84.548336,33.2618546 C90.4893036,31.0841243 98.9912438,28.0944451 105.349872,29.8850008 C108.634111,30.8097486 111.721743,32.8563882 112.418523,36.4273375 C112.908511,38.9383834 113.59816,42.9534148 111.501707,45.0102165 C106.763806,49.6532635 97.8564294,48.9825673 91.7728459,50.2020149 C86.1863805,51.3208582 84.2814406,53.9568975 81.8325233,58.9596815 C80.1567874,62.3812484 77.7638977,65.0376119 73.7655613,65.4694996 C70.7716477,65.7906208 67.1043838,65.2073184 64.9895949,67.8789249 C63.7345757,69.4642069 62.774975,71.3086215 61.8245424,73.0849502 C59.9450696,76.6020405 58.1318113,80.1638439 55.1063186,82.8496773 C53.4040969,84.3607762 51.4349799,84.1778591 49.7184966,82.8496773 C47.1819724,80.8873828 45.8862058,78.0481022 43.5860163,75.8998419 C41.5904135,74.0381518 39.4929423,73.6215072 36.8494562,73.9720984 C35.0148055,74.2159879 33.2901728,74.7149453 34.4107257,76.7626011 C37.8711967,83.0813724 34.8375545,90.5545541 39.1832622,96.2534395 C41.3958448,99.1567411 43.8641172,102.367953 44.7809332,105.977518 C45.0121745,106.890072 46.4943604,114.408983 47.0943655,114.254519 C54.2903523,112.404008 58.3936132,110.59516 64.6249059,115.882482 C66.3607441,117.353949 66.6205087,119.202428 66.0133728,120.810067 C66.9210206,121.792738 67.6972581,122.930889 68.2677214,124.31293 C68.9858939,126.055724 69.6174783,128.965123 71.1750468,130.1927 C72.3322723,131.103221 75.18357,129.740488 76.5241587,129.725245 C81.2854897,129.67037 85.5588709,131.125578 89.5887865,133.631543 C94.3633605,136.599881 98.5124621,141.065092 103.519296,143.531425 C111.717668,147.569829 122.244753,150.309522 126.659732,159.17389 C130.138539,166.158276 126.702516,178.731798 120.324533,183.083194 C117.480366,185.023132 115.237223,186.186688 114.188997,189.710892 C113.491198,192.057312 112.704774,194.199475 111.340755,196.246115 C108.993706,199.768286 106.004886,200.353621 102.055447,200.864773 C95.2210927,201.749889 92.2618145,208.962922 89.9881108,214.664856 C87.8458175,220.035506 86.1059045,225.548426 84.0379751,230.946514 C82.3225105,235.420871 80.2912537,239.753975 78.4433602,244.168375 C77.2290883,247.067612 75.9312844,250.15688 72.4208978,250.559297 C64.0096205,251.521645 61.8153742,239.794623 60.4839537,233.956518 C59.3134853,228.824675 58.2204369,223.600358 55.8469021,218.857723 C54.3952768,215.95747 52.5606262,212.860073 51.8281921,209.668169 C50.181998,202.499849 54.1243068,194.875253 51.9942376,187.977244 C49.7572066,180.732708 42.0844755,177.510318 39.206692,170.747464 C36.4654122,164.301667 36.3003853,157.409756 36.9197454,150.516828 C37.2691542,146.629838 37.9598222,142.523348 37.5594793,138.618067 C37.1092207,134.21078 34.7071628,133.0269 32.2908434,129.878692 C28.2823201,124.65844 29.0789314,116.726949 26.991647,110.635808 C24.6323738,103.752026 17.9752711,99.7115898 15.7097169,92.8572778 C14.5423045,89.3208796 15.6557266,85.5690456 14.699182,82.1749163 C13.8577486,79.1882857 12.006799,77.6934462 9.42137792,76.1193425 C6.26546302,74.1988567 2.77415963,72.0415631 0.164924311,69.2207997 Z" id="land-shadow"></path>
<path d="M254.005486,175.258262 C253.586312,175.668386 253.183812,176.096546 252.808548,176.554184 C250.642252,179.198515 250.454739,183.779257 250.001429,187.665732 C243.864275,203.996387 234.740105,218.862923 223.295369,231.598216 C220.635722,231.176033 218.207984,229.414446 216.920296,226.90721 C214.643536,222.473502 215.749827,216.963631 216.38243,212.274855 C217.303321,205.445948 214.802451,198.550987 215.656108,191.680416 C216.191936,187.370685 217.413339,183.217449 218.019456,178.933123 C218.601125,174.802244 217.554936,171.917234 215.942359,168.255843 C212.85982,161.2491 217.544749,155.73618 216.965118,148.813782 C216.591261,144.358734 215.883275,134.056433 208.887969,136.674181 C202.61491,139.021618 195.027749,140.265454 188.415468,138.600908 C183.114234,137.265613 175.989555,136.121365 173.84115,130.454998 C172.893773,127.957163 174.095821,123.804943 174.617387,121.371129 C175.506699,117.23212 177.480909,112.021014 176.308404,107.789531 C174.286315,100.493169 175.174608,96.8023073 181.228649,92.1724711 C183.516615,90.4235799 184.033088,86.2490041 185.433779,83.8090926 C186.522752,81.9159001 187.765547,80.2767592 189.4749,78.8997995 C193.814495,75.4050658 202.664826,73.5962184 208.073021,74.1348078 C213.430283,74.6672999 217.321657,78.3043026 222.380444,79.8448715 C223.949218,80.3235047 230.759124,82.7197193 231.79207,80.4180119 C232.894286,77.9669221 229.731271,74.7648558 228.144161,73.2954213 C226.447032,71.7213177 223.409316,68.6828606 220.770923,69.6198029 C218.081596,70.5770693 215.643884,71.3524347 212.776287,71.5292546 C209.401386,71.7385932 206.933114,68.9785766 203.793528,68.4521817 C200.486878,67.8963168 197.790421,69.6492728 194.893282,70.9317253 C191.287139,72.5281855 185.953308,73.5667484 182.769919,70.4388652 C177.150856,64.9178159 180.932212,53.6328441 188.751634,52.4723364 C191.269822,52.0983724 193.878673,52.1867824 196.372412,51.717295 C197.196528,51.5628317 198.252904,51.4419031 199.062758,51.0506637 L198.907918,50.9805454 C198.536098,50.8423414 198.165297,50.7051535 197.792458,50.5679656 C196.027078,49.9145449 193.800234,48.742859 192.942502,46.9390926 C191.848434,44.6282393 191.809724,40.8194978 190.333651,38.8887057 C187.348905,34.9773273 180.87211,36.0951544 177.363761,32.5374158 C174.376978,29.5091208 172.683924,24.2543176 174.625537,20.2128648 C176.611971,16.0789373 181.647329,15.6358713 185.616123,16.9986041 C186.64808,17.3528391 187.923344,17.9475966 189.211685,18.4011821 C230.820399,42.3586637 258.83762,87.305847 258.83762,138.803279 C258.83762,151.418753 257.156214,163.641181 254.005486,175.258262 Z" id="land-shadow"></path>
<path d="M122.252718,29.3732876 C125.690778,31.3833438 129.743105,29.9017149 132.776747,27.9505987 C134.63279,26.7596048 136.15063,25.2017604 137.600218,23.5646519 C139.577484,21.3310303 140.264077,18.3830156 143.601288,18.0029544 C146.351736,17.6889466 150.821723,16.5406334 149.770441,12.7298595 C148.857699,9.42109152 144.31946,7.93539779 141.367313,7.18746989 C136.459291,5.94160087 124.233041,4.05653803 121.596685,10.191376 L121.589554,10.2127163 C119.034694,13.1861362 121.99601,16.0335464 120.954914,19.6796949 C119.949473,23.20085 118.20141,27.0065429 122.252718,29.3732876" id="land-shadow"></path>
<path d="M181.723322,263.215883 C163.177585,272.42696 142.279074,277.605372 120.172372,277.605372 C104.556881,277.605372 89.5442426,275.021497 75.5378694,270.25758 C75.0430531,268.846291 74.7244908,267.442759 74.616131,266.149177 C74.4806459,264.533409 76.0208968,263.388145 77.4715034,263.300751 C86.5999346,262.751999 85.9815932,248.99663 95.301537,248.99663 C99.5667687,248.99663 100.025177,253.922182 103.241163,255.514578 C104.558322,256.166982 105.931509,256.301121 107.329144,256.301121 C107.82015,256.301121 108.315231,256.284862 108.81133,256.267587 C109.308448,256.251327 109.805566,256.234052 110.303703,256.234052 C111.904056,256.234052 113.505428,256.406807 115.058922,257.305133 C118.851484,259.498107 122.478,260.256197 126.05562,260.256197 C132.065858,260.256197 137.935518,258.114034 144.215707,257.028725 C148.411668,257.409803 152.663657,257.604914 156.958431,257.604914 C159.888167,257.604914 162.79753,257.514472 165.681426,257.335619 C166.195861,257.325457 166.710297,257.302085 167.224733,257.264485 C167.726944,257.227902 168.231193,257.174043 168.73646,257.11307 C170.206422,256.989093 171.672309,256.842759 173.128009,256.674069 C173.237008,256.672037 173.34397,256.671021 173.45195,256.671021 C174.646867,256.671021 175.832616,256.81837 176.995954,257.256355 C180.084043,258.416843 181.460602,260.634667 181.723312,263.215888 L181.723322,263.215883 Z" id="land-shadow"></path>
</g>
<path d="M1.0918357,70.6543398 C22.2289147,33.0375142 60.2713059,6.37520281 104.790056,1.19740607 C104.78851,1.22260953 104.786825,1.24777464 104.785005,1.27289468 C105.969735,3.2839671 106.494357,5.40275741 106.990457,8.20850322 C107.633246,11.8485545 109.55856,14.1594078 107.864488,17.7039356 C106.63901,20.2688405 102.842374,19.7444781 100.90891,18.552468 C98.1655933,16.8615006 96.9584522,16.6430162 93.7455215,16.7761392 C91.8691048,16.8523547 90.2911626,16.7029724 88.5115209,16.1501561 C85.5573361,15.2304893 83.1450914,13.0243053 80.3854752,16.1491399 C78.5997214,18.168342 77.2621888,20.5625242 76.4329797,23.1294615 C75.2217639,26.8731658 73.6957746,31.7631509 79.2873334,29.7114302 C85.228301,27.5337 93.7302413,24.5440208 100.088869,26.3345764 C103.373108,27.2593242 106.460741,29.3059639 107.157521,32.8769131 C107.647508,35.3879591 108.337157,39.4029905 106.240705,41.4597922 C101.502803,46.1028392 92.5954268,45.4321429 86.5118434,46.6515906 C80.925378,47.7704338 79.0204381,50.4064732 76.5715207,55.4092572 C74.8957848,58.8308241 72.5028951,61.4871876 68.5045587,61.9190753 C65.5106452,62.2401965 61.8433812,61.656894 59.7285924,64.3285006 C58.4735731,65.9137826 57.5139724,67.7581971 56.5635398,69.5345259 C54.6840671,73.0516162 52.8708088,76.6134195 49.845316,79.299253 C48.1430943,80.8103519 46.1739773,80.6274347 44.4574941,79.299253 C41.9209698,77.3369585 40.6252032,74.4976778 38.3250138,72.3494176 C36.329411,70.4877275 34.2319398,70.0710829 31.5884537,70.4216741 C29.753803,70.6655636 28.0291703,71.1645209 29.1497231,73.2121768 C32.6101941,79.5309481 29.5765519,87.0041298 33.9222597,92.7030152 C36.1348423,95.6063168 38.6031147,98.817529 39.5199306,102.427094 C39.751172,103.339647 41.2333579,110.858558 41.833363,110.704095 C49.0293498,108.853583 53.1326107,107.044736 59.3639033,112.332058 C61.0997416,113.803524 61.3595061,115.652004 60.7523702,117.259642 C61.660018,118.242314 62.4362556,119.380465 63.0067189,120.762506 C63.7248914,122.5053 64.3564757,125.414699 65.9140442,126.642276 C67.0712697,127.552797 69.9225675,126.190064 71.2631562,126.174821 C76.0244872,126.119946 80.2978684,127.575153 84.327784,130.081118 C89.1023579,133.049457 93.2514596,137.514668 98.2582936,139.981001 C106.456666,144.019405 116.983751,146.759097 121.398729,155.623466 C124.877536,162.607852 121.441514,175.181374 115.063531,179.532769 C112.219364,181.472707 109.976221,182.636264 108.927994,186.160467 C108.230195,188.506888 107.443771,190.649051 106.079753,192.695691 C103.732704,196.217862 100.743884,196.803197 96.794444,197.314349 C89.9600902,198.199464 87.0008119,205.412497 84.7271083,211.114431 C82.5848149,216.485082 80.8449019,221.998002 78.7769725,227.39609 C77.0615079,231.870447 75.0302512,236.203551 73.1823576,240.617951 C71.9680858,243.517188 70.6702818,246.606455 67.1598953,247.008873 C58.7486179,247.97122 56.5543717,236.244199 55.2229511,230.406093 C54.0524827,225.274251 52.9594343,220.049934 50.5858996,215.307299 C49.1342743,212.407046 47.2996236,209.309649 46.5671895,206.117744 C44.9209955,198.949425 48.8633042,191.324828 46.7332351,184.426819 C44.4962041,177.182284 36.823473,173.959894 33.9456894,167.19704 C31.2044096,160.751243 31.0393828,153.859331 31.6587429,146.966403 C32.0081517,143.079414 32.6988197,138.972924 32.2984767,135.067643 C31.8482182,130.660356 29.4461603,129.476475 27.0298408,126.328268 C23.0213176,121.108016 23.8179288,113.176525 21.7306444,107.085384 C19.3713713,100.201602 12.7142685,96.1611655 10.4487144,89.3068534 C9.28130201,85.7704552 10.3947241,82.0186213 9.43817941,78.624492 C8.59674607,75.6378614 6.74579646,74.1430218 4.16037538,72.5689181 C3.15835008,71.9591503 2.12251402,71.3255098 1.0918357,70.6543398 Z" id="land-light-1" fill="#85DA71"></path>
<path d="M46.9719992,185.306716 C60.8323284,192.077078 75.758558,196.999661 91.4306417,199.754089 C88.1796083,202.554845 86.291156,207.192154 84.7271083,211.114431 C82.5848149,216.485082 80.8449019,221.998002 78.7769725,227.39609 C77.0615079,231.870447 75.0302512,236.203551 73.1823576,240.617951 C71.9680858,243.517188 70.6702818,246.606455 67.1598953,247.008873 C58.7486179,247.97122 56.5543717,236.244199 55.2229511,230.406093 C54.0524827,225.274251 52.9594343,220.049934 50.5858996,215.307299 C49.1342743,212.407046 47.2996236,209.309649 46.5671895,206.117744 C44.990687,199.252895 48.5395256,191.969584 46.9719992,185.306716 Z" id="land-dark-1" fill="#6AB25C"></path>
<path d="M257.725539,160.241425 C256.894441,162.197812 255.935392,164.071188 254.710935,165.862878 C252.760154,168.717401 249.704101,170.373818 247.547546,173.00376 C244.7645,176.400938 245.247356,182.994085 244.236821,187.205244 C243.279258,191.201984 242.266686,195.19161 241.09418,199.134491 C239.158679,205.644309 236.658828,211.496641 232.41397,216.832741 C229.511738,220.479906 227.017998,225.152423 222.692664,227.32812 C218.553749,229.409311 213.689531,227.309829 211.659293,223.356786 C209.382533,218.923077 210.488825,213.413206 211.121428,208.72443 C212.042319,201.895523 209.541448,195.000563 210.395106,188.129992 C210.930934,183.82026 212.152336,179.667025 212.758454,175.382699 C213.340122,171.25182 212.293934,168.36681 210.681356,164.705418 C207.598817,157.698675 212.283747,152.185756 211.704115,145.263358 C211.330258,140.808309 210.622272,130.506009 203.626966,133.123757 C197.353908,135.471193 189.766746,136.71503 183.154465,135.050484 C177.853232,133.715189 170.728553,132.57094 168.580147,126.904573 C167.632771,124.406738 168.834818,120.254519 169.356385,117.820705 C170.245696,113.681696 172.219907,108.47059 171.047401,104.239106 C169.025312,96.9427446 169.913605,93.251883 175.967647,88.6220467 C178.255612,86.8731555 178.772085,82.6985797 180.172776,80.2586682 C181.26175,78.3654757 182.504545,76.7263348 184.213897,75.3493752 C188.553493,71.8546414 197.403823,70.0457941 202.812019,70.5843835 C208.16928,71.1168756 212.060655,74.7538782 217.119442,76.2944471 C218.688216,76.7730803 225.498121,79.169295 226.531067,76.8675875 C227.633284,74.4164977 224.470269,71.2144314 222.883158,69.744997 C221.18603,68.1708933 218.148313,65.1324362 215.50992,66.0693785 C212.820593,67.0266449 210.382882,67.8020104 207.515285,67.9788303 C204.140383,68.1881688 201.672111,65.4281523 198.532526,64.9017574 C195.225876,64.3458925 192.529418,66.0988485 189.63228,67.381301 C186.026137,68.9777612 180.692305,70.0163241 177.508916,66.8884409 C171.889853,61.3673916 175.67121,50.0824197 183.490631,48.921912 C186.008819,48.5479481 188.61767,48.6363581 191.11141,48.1668707 C191.935525,48.0124073 192.991901,47.8914788 193.801755,47.5002393 L193.646915,47.4301211 C193.275095,47.291917 192.904294,47.1547292 192.531456,47.0175413 C190.766075,46.3641206 188.539231,45.1924346 187.681499,43.3886683 C186.587432,41.077815 186.548722,37.2690735 185.072648,35.3382814 C182.087903,31.426903 175.611107,32.54473 172.102758,28.9869915 C169.115975,25.9586965 167.422922,20.7038933 169.364534,16.6624405 C170.886606,13.4948879 174.198742,12.4942894 177.449524,12.8126197 C225.685917,34.5406933 259.270344,83.0710671 259.270344,139.453267 C259.270344,146.518357 258.742992,153.460173 257.725539,160.241425 Z" id="land-light-2" fill="#85DA71"></path>
<path d="M257.725539,160.241425 C256.894441,162.197812 255.935392,164.071188 254.710935,165.862878 C252.760154,168.717401 249.704101,170.373818 247.547546,173.00376 C244.7645,176.400938 245.247356,182.994085 244.236821,187.205244 C243.279258,191.201984 242.266686,195.19161 241.09418,199.134491 C239.158679,205.644309 236.658828,211.496641 232.41397,216.832741 C229.511738,220.479906 227.017998,225.152423 222.692664,227.32812 C218.553749,229.409311 213.689531,227.309829 211.659293,223.356786 C209.382533,218.923077 210.488825,213.413206 211.121428,208.72443 C212.042319,201.895523 209.541448,195.000563 210.395106,188.129992 C210.930934,183.82026 212.152336,179.667025 212.758454,175.382699 C212.779912,175.230304 212.799156,175.079605 212.816237,174.9305 C230.91194,163.093306 246.594343,147.866877 258.963912,130.15166 C259.167125,133.225911 259.270344,136.327523 259.270344,139.453267 C259.270344,146.518357 258.742992,153.460173 257.725539,160.241425 Z" id="land-dark-2" fill="#6AB25C"></path>
<path d="M116.991715,25.8228633 C120.429775,27.8329195 124.482102,26.3512906 127.515744,24.4001743 C129.371787,23.2091804 130.889627,21.6513361 132.339215,20.0142276 C134.316482,17.780606 135.003075,14.8325912 138.340285,14.4525301 C141.090733,14.1385223 145.56072,12.9902091 144.509438,9.17943515 C143.596697,5.87066718 139.058458,4.38497345 136.10631,3.63704555 C131.198289,2.39117653 118.972038,0.506113692 116.335683,6.64095161 L116.328552,6.66229195 C113.773691,9.63571182 116.735007,12.4831221 115.693912,16.1292706 C114.68847,19.6504257 112.940408,23.4561186 116.991715,25.8228633" id="land-light-3" fill="#85DA71"></path>
<path d="M122.767809,277.457723 C104.274612,277.457723 86.6238669,273.845109 70.4909616,267.289562 C69.8736388,265.683956 69.4783892,264.07022 69.3551284,262.598753 C69.2196434,260.982985 70.7598943,259.83772 72.2105009,259.750327 C81.3389321,259.201575 80.7205906,245.446206 90.0405345,245.446206 C94.3057662,245.446206 94.7641742,250.371758 97.9801609,251.964153 C99.2973199,252.616558 100.670506,252.750697 102.068142,252.750697 C102.559147,252.750697 103.054228,252.734438 103.550327,252.717162 C104.047445,252.700903 104.544563,252.683627 105.0427,252.683627 C106.643053,252.683627 108.244425,252.856383 109.797919,253.754709 C113.590481,255.947682 117.216998,256.705772 120.794617,256.705772 C126.804856,256.705772 132.674515,254.563609 138.954705,253.478301 C143.150666,253.859378 147.402655,254.05449 151.697428,254.05449 C154.627165,254.05449 157.536527,253.964047 160.420423,253.785195 C160.934859,253.775033 161.449294,253.75166 161.96373,253.714061 C162.465941,253.677477 162.97019,253.623618 163.475458,253.562646 C164.945419,253.438669 166.411306,253.292335 167.867006,253.123645 C167.976005,253.121612 168.082967,253.120596 168.190948,253.120596 C169.385865,253.120596 170.571613,253.267946 171.734951,253.705931 C177.762507,255.971055 177.269464,262.264421 174.700341,267.425733 C159.340618,273.621544 142.614838,277.150828 125.098559,277.438415 C125.089391,277.439431 125.091428,277.439431 125.08226,277.439431 C125.050681,277.439431 125.015027,277.440447 124.984466,277.440447 C124.979373,277.440447 124.967149,277.441463 124.963074,277.441463 C124.931495,277.441463 124.902972,277.44248 124.871393,277.44248 C124.862224,277.44248 124.85,277.44248 124.840832,277.44248 C124.814346,277.443496 124.784804,277.443496 124.758319,277.444512 C124.74915,277.444512 124.731833,277.444512 124.721646,277.444512 C124.69516,277.444512 124.67173,277.445528 124.645245,277.445528 C124.630983,277.445528 124.620796,277.445528 124.606535,277.446545 C124.580049,277.446545 124.556619,277.446545 124.530133,277.447561 C124.515872,277.447561 124.504666,277.447561 124.490405,277.447561 C124.466975,277.447561 124.441508,277.448577 124.417059,277.448577 C124.402798,277.448577 124.388536,277.448577 124.374275,277.448577 C124.349826,277.449593 124.327415,277.449593 124.302967,277.449593 C124.28463,277.449593 124.277499,277.449593 124.259163,277.450609 C124.234715,277.450609 124.214341,277.450609 124.189893,277.450609 C124.175631,277.450609 124.157295,277.451626 124.144052,277.451626 C124.121641,277.451626 124.096174,277.451626 124.074781,277.451626 C124.06052,277.452642 124.043202,277.452642 124.02894,277.452642 C124.007548,277.452642 123.984118,277.452642 123.961707,277.452642 C123.948464,277.452642 123.927072,277.453658 123.91281,277.453658 C123.891418,277.453658 123.870026,277.453658 123.847615,277.453658 C123.834372,277.453658 123.811961,277.454674 123.798718,277.454674 C123.776307,277.454674 123.755933,277.454674 123.734541,277.454674 C123.716204,277.454674 123.702961,277.454674 123.683606,277.454674 C123.662214,277.45569 123.639803,277.45569 123.618411,277.45569 C123.599056,277.45569 123.588869,277.45569 123.569514,277.45569 C123.548121,277.45569 123.526729,277.45569 123.505337,277.45569 C123.485982,277.456707 123.473757,277.456707 123.454402,277.456707 C123.43301,277.456707 123.412636,277.456707 123.390225,277.456707 C123.375964,277.456707 123.354571,277.456707 123.34031,277.456707 C123.318917,277.456707 123.298544,277.456707 123.277151,277.456707 C123.26289,277.456707 123.23946,277.457723 123.225198,277.457723 C123.203806,277.457723 123.182414,277.457723 123.161021,277.457723 C123.141666,277.457723 123.130461,277.457723 123.111106,277.457723 C123.087676,277.457723 123.065265,277.457723 123.040817,277.457723 C123.026555,277.457723 123.011275,277.457723 122.997013,277.457723 C122.970527,277.457723 122.937929,277.457723 122.911444,277.457723 C122.902276,277.457723 122.892089,277.457723 122.882921,277.457723 C122.84421,277.457723 122.807538,277.457723 122.767809,277.457723" id="land-dark-3" fill="#6AB25C"></path>
</g>
</g>
<g id="stars" transform="translate(53.000000, 27.000000)">
<g id="star-red">
<use fill="black" fill-opacity="1" filter="url(#star-red-1)" xlink:href="#star-red-2"></use>
<circle id="star-red-2" class="blink-3" cx="976.5" cy="86.5" r="5.5" fill="#F56565"></circle>
</g>
<g id="star-red">
<use fill="black" fill-opacity="1" filter="url(#star-red-1)" xlink:href="#star-red-3"></use>
<circle id="star-red-3" class="blink-2" cx="173" cy="411" r="9" fill="#F56565"></circle>
</g>
<g id="star-red">
<use fill="black" fill-opacity="1" filter="url(#star-red-1)" xlink:href="#star-red-4"></use>
<circle id="star-red-4" class="blink-3" cx="285" cy="706" r="3" fill="#F56565"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-13"></use>
<circle id="path-13" class="blink-2" cx="1177" cy="323" r="6" fill="#F6E37D"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-23"></use>
<circle id="path-23" class="blink-2" cx="904" cy="659" r="9" fill="#F6E37D"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-25"></use>
<circle id="path-25" class="blink-2" cx="259" cy="27" r="3" fill="#F6E37D"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-27"></use>
<circle id="path-27" class="blink-2" cx="536" cy="149" r="3" fill="#F6E37D"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-29"></use>
<circle id="path-29" class="blink-3" cx="313" cy="517" r="3" fill="#F6E37D"></circle>
</g>
<g id="star-yellow">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-31"></use>
<circle id="path-31" class="blink-1" cx="1013" cy="255" r="3" fill="#F6E37D"></circle>
</g>
<g id="star-yellow-dim">
<use fill="black" fill-opacity="1" filter="url(#star-yellow-1)" xlink:href="#path-15"></use>
<circle id="path-15" class="blink-3" cx="356" cy="229" r="9" fill-opacity="0.4" fill="#F6E37D"></circle>
</g>
<g id="star-blue">
<use fill="black" fill-opacity="1" filter="url(#star-blue-1)" xlink:href="#path-17"></use>
<circle id="path-17" class="blink-2" cx="1007" cy="463" r="6" fill="#8AC6FF"></circle>
</g>
<g id="star-blue">
<use fill="black" fill-opacity="1" filter="url(#star-blue-1)" xlink:href="#path-19"></use>
<circle id="path-19" class="blink-2" cx="485" cy="47" r="6" fill="#8AC6FF"></circle>
</g>
<g id="star-blue-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-blue-1)" xlink:href="#path-21"></use>
<circle id="path-21" class="blink-3" cx="1071" cy="630" r="3" fill="#8AC6FF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-33"></use>
<circle id="path-33" class="blink-1" cx="979" cy="566" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-35"></use>
<circle id="path-35" class="blink-1" cx="746" cy="703" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-37"></use>
<circle id="path-37" class="blink-3"cx="1246" cy="511" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-39"></use>
<circle id="path-39" class="blink-3"cx="130" cy="540" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-41"></use>
<circle id="path-41" cx="3" class="blink-2" cy="317" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-43"></use>
<circle id="path-43" class="blink-1" cx="860" cy="3" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-45"></use>
<polygon id="path-45" class="blink-2" points="850.073134 561.565823 848 569 845.926866 561.565823 839 559.5 845.926866 557.616869 848 550 850.073134 557.616869 857 559.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-47"></use>
<polygon id="path-47" class="blink-2" points="1267.07313 641.565823 1265 649 1262.92687 641.565823 1256 639.5 1262.92687 637.616869 1265 630 1267.07313 637.616869 1274 639.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-49"></use>
<polygon id="path-49" class="blink-2" points="427.761443 650.740373 423.5 666 419.238557 650.740373 405 646.5 419.238557 642.634627 423.5 627 427.761443 642.634627 442 646.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-51"></use>
<polygon id="path-51" class="blink-2" points="1203.07313 26.5658228 1201 34 1198.92687 26.5658228 1192 24.5 1198.92687 22.6168695 1201 15 1203.07313 22.6168695 1210 24.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-53"></use>
<polygon id="path-53" class="blink-1" points="278.073134 385.565823 276 393 273.926866 385.565823 267 383.5 273.926866 381.616869 276 374 278.073134 381.616869 285 383.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-55"></use>
<polygon id="path-55" class="blink-2" points="79.0731345 153.565823 77 161 74.9268655 153.565823 68 151.5 74.9268655 149.616869 77 142 79.0731345 149.616869 86 151.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-57"></use>
<polygon id="path-57" class="blink-3" points="1054.76144 359.740373 1050.5 375 1046.23856 359.740373 1032 355.5 1046.23856 351.634627 1050.5 336 1054.76144 351.634627 1069 355.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-59"></use>
<polygon id="path-59" class="blink-1" points="378.761443 96.7403732 374.5 112 370.238557 96.7403732 356 92.5 370.238557 88.6346268 374.5 73 378.761443 88.6346268 393 92.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-61"></use>
<polygon id="path-61" class="blink-3" points="874.073134 153.565823 872 161 869.926866 153.565823 863 151.5 869.926866 149.616869 872 142 874.073134 149.616869 881 151.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-63"></use>
<polygon id="path-63" class="blink-2" points="79.0731345 599.565823 77 607 74.9268655 599.565823 68 597.5 74.9268655 595.616869 77 588 79.0731345 595.616869 86 597.5" fill="#FFFFFF"></polygon>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-65"></use>
<circle id="path-65" class="blink-1" cx="1220" cy="149" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-67"></use>
<circle id="path-67" class="blink-3" cx="185" cy="249" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-69"></use>
<circle id="path-69" class="blink-2" cx="421" cy="537" r="3" fill="#FFFFFF"></circle>
</g>
<g id="star-white-dim" opacity="0.4">
<use fill="black" fill-opacity="1" filter="url(#star-white-1)" xlink:href="#path-71"></use>
<circle id="path-71" class="blink-1" cx="1106" cy="423" r="3" fill="#FFFFFF"></circle>
</g>
</g>
<g id="moon" transform="translate(620.000000, 64.000000)">
<circle fill="#D8D8D8" cx="63" cy="63" r="63"></circle>
<path d="M0.633983608,54.0281071 C8.62718031,81.1923367 33.7478116,101.02239 63.5,101.02239 C92.4128547,101.02239 116.951786,82.2953992 125.64892,56.3092918 C125.880998,58.5077868 126,60.7399962 126,63 C126,97.7939392 97.7939392,126 63,126 C28.2060608,126 0,97.7939392 0,63 C0,59.9540486 0.216162909,56.9585848 0.633985077,54.0281121 Z" id="moon-shadow" fill="#A1A1A1"></path>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="89" cy="85" r="18"></circle>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="42.5" cy="100.5" r="12.5"></circle>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="23" cy="47" r="7"></circle>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="86" cy="22" r="7"></circle>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="112" cy="74" r="7"></circle>
<circle id="crater" stroke="#D8D8D8" stroke-width="3" fill="#A1A1A1" cx="30.5" cy="27.5" r="12.5"></circle>
<circle id="moon-light" fill="#FFFFFF" opacity="0.1" cx="62" cy="62" r="110"></circle>
<circle id="moon-light" fill="#FFFFFF" opacity="0.1" cx="62" cy="62" r="86.5"></circle>
</g>
<g id="sun" transform="translate(436.000000, -522.000000)" fill="#F6E37D">
<circle id="Oval-5" opacity="0.2" cx="248" cy="248" r="207"></circle>
<circle id="Oval-5" opacity="0.2" cx="248.5" cy="248.5" r="248.5"></circle>
<circle id="Oval-5" cx="247" cy="249" r="165"></circle>
</g>
<g id="cloud-front" transform="translate(487.000000, 365.000000)" fill="#FFFFFF" opacity="0.9">
<path d="M364.876212,33 C364.957913,33.6551885 365,34.3226793 365,35 L365,41 C365,49.836556 357.836556,57 349,57 L219,57 C210.163444,57 203,49.836556 203,41 L203,35 C203,26.163444 210.163444,19 219,19 L237.123788,19 C237.042087,18.3448115 237,17.6773207 237,17 C237,8.163444 244.163444,1 253,1 L383,1 C391.836556,1 399,8.163444 399,17 C399,25.836556 391.836556,33 383,33 L364.876212,33 Z" id="cloud-1"></path>
<path d="M161.876212,125 C161.957913,125.655188 162,126.322679 162,127 L162,133 C162,141.836556 154.836556,149 146,149 L16,149 C7.163444,149 0,141.836556 0,133 L0,127 C0,118.163444 7.163444,111 16,111 L34.1237875,111 C34.0420867,110.344812 34,109.677321 34,109 C34,100.163444 41.163444,93 50,93 L180,93 C188.836556,93 196,100.163444 196,109 C196,117.836556 188.836556,125 180,125 L161.876212,125 Z" id="cloud-2"></path>
<rect id="cloud" x="237" y="159" width="86" height="38" rx="16"></rect>
<path d="M50.2718963,31 C49.4573696,29.3402994 49,27.4735619 49,25.5 C49,25.3325438 49.0032928,25.1658568 49.0098172,25 L30.5,25 C23.5964406,25 18,19.4035594 18,12.5 C18,5.59644063 23.5964406,0 30.5,0 L91.5,0 C98.4035594,0 104,5.59644063 104,12.5 C104,12.6674562 103.996707,12.8341432 103.990183,13 L122.5,13 C129.403559,13 135,18.5964406 135,25.5 C135,32.4035594 129.403559,38 122.5,38 L84.7281037,38 C85.5426304,39.6597006 86,41.5264381 86,43.5 C86,50.4035594 80.4035594,56 73.5,56 L12.5,56 C5.59644063,56 0,50.4035594 0,43.5 C0,36.5964406 5.59644063,31 12.5,31 L50.2718923,31 L50.2718963,31 Z" id="cloud-3"></path>
</g>
</g>
</svg>
</div>
Raw
script.js
const tl = new TimelineMax({
paused: true
});
const clickArea = $('#background');
let click = true;
clickArea.on("click", function(){
console.log('click');
click ? tl.play() : tl.reverse();
click = !click;
});
tl
.staggerTo("#background", 1, {
"background-image": "linear-gradient(#D4ADC3, #72B6FF)"
}, 0.5, 0)
.staggerTo("#earth-ring-4 stop", 1, {
cycle:{
stopColor: ['#CEA3C1', '#5DA6F3']
}
}, 0.5, 0)
.staggerTo("#earth-ring-3 stop", 1, {
cycle:{
stopColor: ['#CA9AC1', '#5396E0']
}
}, 0.5, 0)
.staggerTo("#earth-ring-2 stop", 1, {
cycle:{
stopColor: ['#C694C3', '#3978C0']
}
}, 0.5, 0)
.staggerTo("#earth-ring-1 stop", 1, {
cycle:{
stopColor: ['#A675AE', '#265489']
}
}, 0.5, 0)
.staggerTo("#earth-1 stop", 1, {
cycle:{
stopColor: ['#FFF9EB', '#3A96B9']
}
}, 0.5, 0)
.to("#land-light-1", 1, {fill: '#D9FFA9'}, 0)
.to("#land-light-2", 1, {fill: '#D9FFA9'}, 0)
.to("#land-light-3", 1, {fill: '#D9FFA9'}, 0)
.to("#land-dark-1", 1, {fill: '#95CB8B'}, 0)
.to("#land-dark-2", 1, {fill: '#95CB8B'}, 0)
.to("#land-dark-3", 1, {fill: '#95CB8B'}, 0)
.to("#city-right-1", 1, {fill: '#B3C4B3'}, 0)
.to("#city-right-2", 1, {fill: '#D5DDC2'}, 0)
.to("#city-left-2", 1, {fill: '#D5DDC2'}, 0)
.to("#city-left-3", 1, {fill: '#D5DDC2'}, 0)
.to('#sun', 1, {ease: Power4.easeInOut, y:-322}, 0)
.to('#moon', 1, {ease: Power4.easeInOut, y:-200}, 0)
.progress(1).progress(0);
const blink1 = $('.blink-1');
const blink2 = $('.blink-2');
const blink3 = $('.blink-3');
const tlBlink1 = new TimelineMax({
repeat: -1,
yoyo: true
});
tlBlink1
.to(blink1, 1, {opacity: 0}, 1)
.to('#cloud-1', 2, {ease: Power4.easeInOut, x:30}, 1)
.to('#cloud-1', 2, {opacity: 0}, 1)
.to('#cloud-4', 2, {ease: Power4.easeInOut, x:-20}, 1)
.to('#cloud-4', 2, {opacity: 0}, 1)
.to('#cloud', 2, {ease: Power4.easeInOut, x:-50}, 1)
.to('#cloud', 2, {opacity: 0}, 1)
.play();
const tlBlink2 = new TimelineMax({
repeat: -1,
yoyo: true
});
tlBlink2
.to(blink2, 1, {opacity: 0}, 2)
.to('#cloud-2', 2, {ease: Power4.easeInOut, x:-20}, 2)
.to('#cloud-2', 2, {opacity: 0}, 2)
.to('#cloud-6', 2, {ease: Power4.easeInOut, x:30}, 2)
.to('#cloud-6', 2, {opacity: 0}, 2)
.play();
const tlBlink3 = new TimelineMax({
repeat: -1,
yoyo: true
});
tlBlink3
.to(blink3, 1, {opacity: 0}, 3)
.to('#cloud-3', 2, {ease: Power4.easeInOut, x:-30}, 3)
.to('#cloud-3', 2, {opacity: 0}, 3)
.to('#cloud-5', 2, {ease: Power4.easeInOut, x:30}, 3)
.to('#cloud-5', 2, {opacity: 0}, 3)
.play();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
body {
margin: 0;
}
svg {
width: 100%;
height: 100vh;
}
#background {
background-image: linear-gradient(#463C77, #0E355D);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment