Real Time Moon

index.html

<div id="earth">
  <svg class="box" width="500px" height="500px" viewBox="0 0 356 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter x="-21.4%" y="-18.1%" width="142.7%" height="142.7%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="9" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="18.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <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="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <circle id="path-2" cx="140.5" cy="130.5" r="140.5px"></circle>
        <path d="M29.3270039,5.83326042 L36.0159448,17.6749508 L0,17.6749508 L6.68894089,5.83326042 C10.2200893,-0.418068061 18.1503538,-2.62320968 24.4016823,0.907938771 C26.4609142,2.07112411 28.1638186,3.77402849 29.3270039,5.83326042 Z" id="path-4"></path>
        <path d="M8.52751601,-2.88660895 L18.5883805,17.2337505 L-24.7881389,17.2337505 L-14.7272744,-2.88660895 C-11.5162393,-9.308242 -3.70741893,-11.9109459 2.71421412,-8.69991084 C5.22981951,-7.44202254 7.26962771,-5.40221434 8.52751601,-2.88660895 Z" id="path-6"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(37.000000, 94.000000)">
            <g id="Earth" filter="url(#filter-1)" transform="translate(0.000000, 4.000000)">
                <mask id="mask-3" fill="white">
                    <use xlink:href="#path-2"></use>
                </mask>
                <use id="Mask" fill="#42E1F5" xlink:href="#path-2"></use>
                <path d="M151.398543,65.4803227 L135.866852,110.790045 L124.699371,139.798883 C122.367639,170.913855 118.892586,190.090304 114.274214,197.32823 C109.655841,204.566156 100.894793,204.566156 87.9910696,197.32823 L41.3511331,139.798883 C4.85173139,82.45938 -7.48497708,48.1717432 4.34100766,36.9359725 C14.4638348,27.3183577 60.0732836,-19.5257368 124.699371,1.2647083 C131.948229,3.59669211 140.847953,25.0018969 151.398543,65.4803227 Z M194.745679,71.8010486 C195.461568,53.2347772 197.14879,43.569138 199.807346,42.8041311 C200.362865,42.6442788 207.368822,43.9336852 213.515857,48.9565986 C218.278106,52.8479652 229.16583,77.8004322 229.16583,66.4110142 C229.16583,65.2246339 233.006865,51.1299646 236.050675,48.9565986 C243.120371,43.9086379 255.883707,27.8624487 270.425961,25.2355545 C280.945006,23.3354076 300.469686,25.9798847 329,33.1689857 L329,87.6542753 C304.617646,110.162275 286.686379,121.416275 275.206197,121.416275 C257.985925,121.416275 261.803685,117.012918 257.777911,117.012918 C254.351026,117.012918 251.089008,80.5101674 249.053527,80.5873755 C245.572046,80.7194321 238.1052,87.4423166 236.050675,87.6542753 C233.180719,87.9503595 238.172749,99.8424681 236.050675,100.002916 C232.09864,100.301724 216.526452,93.3539621 213.515857,93.646589 C209.887483,93.9992634 208.831002,116.872882 205.480818,117.012918 C188.286508,117.731634 190.765315,122.55495 190.173456,117.012918 C189.879336,114.258853 188.368858,106.470076 185.64202,93.646589 C179.526765,91.6806883 175.579943,89.6832504 173.801553,87.6542753 C169.239204,82.4490625 168.441901,74.06816 169.555626,71.8010486 C171.320543,68.2083682 179.717227,68.2083682 194.745679,71.8010486 Z M215.987364,205.018636 C210.280322,189.740645 209.626567,182.101649 214.026099,182.101649 C216.252263,182.101649 246.341253,201.119926 246.341253,192.592238 C246.341253,186.408373 234.892371,166.543134 241.647057,166.51866 C246.935589,166.499498 265.589117,176.508577 297.607641,196.545898 C303.741771,200.38466 307.467372,207.111148 307.467374,214.347422 L307.467391,259.999997 C307.467394,271.597977 298.065376,280.999999 286.467396,281.000001 L206.23839,280.999979 C194.746996,280.999977 185.389716,271.763685 185.240172,260.273264 C185.137518,252.385645 185.350128,247.993226 185.878002,247.096005 C186.57469,245.911854 194.197229,239.97749 208.74562,229.292915 C216.317343,223.732119 219.274717,213.819019 215.987364,205.018636 Z" id="Polygon" fill="#06CA95" mask="url(#mask-3)"></path>
            </g>
            <path d="M93,81.9912489 L93,82 L13,82 L13,81.9912489 C5.77580047,81.7379646 0,76.0185059 0,69 C0,61.8202983 6.04415588,56 13.5,56 C15.5290356,56 17.4535212,56.4310533 19.1800901,57.2032514 C20.5853051,46.3735363 30.0425561,38 41.5,38 C50.0840811,38 57.5454098,42.7002511 61.3388798,49.6122051 C63.6634231,48.5781074 66.2602282,48 69,48 C76.4820677,48 82.8979084,52.3114462 85.6141673,58.4472812 C87.8326533,56.9072752 90.5562988,56 93.5,56 C100.955844,56 107,61.8202983 107,69 C107,76.1797017 100.955844,82 93.5,82 C93.3326043,82 93.1659201,81.9970661 93,81.9912489 Z" id="cloud" fill="#FFFFFF"></path>
            <path d="M301,202.993195 L301,203 L196,203 L196,202.993195 C186.566237,202.736089 179,195.226394 179,186 C179,176.611159 186.835017,169 196.5,169 C199.257531,169 201.866098,169.619569 204.186232,170.723222 C205.841936,156.249659 218.334568,145 233.5,145 C244.695541,145 254.434459,151.130839 259.432168,160.163602 C262.483756,158.776254 265.897197,158 269.5,158 C279.401695,158 287.87308,163.863294 291.333336,172.161438 C294.198983,170.171186 297.708696,169 301.5,169 C311.164983,169 319,176.611159 319,186 C319,195.388841 311.164983,203 301.5,203 C301.332775,203 301.166098,202.997721 301,202.993195 Z" id="cloud" fill="#FFFFFF"></path>
            <g id="Tree" transform="translate(267.817244, 45.714957) rotate(55.000000) translate(-267.817244, -45.714957) translate(258.817244, 18.714957)">
                <rect id="Rectangle-2" fill="#8B572A" x="7.38872725" y="34.8353272" width="4.80267271" height="18.8412545"></rect>
                <path d="M3.4266828,18.3766161 C2.9831559,18.0412412 2.68094809,17.5236555 2.63757326,16.9254827 C2.6129958,16.5865402 2.67518931,16.2469249 2.81828421,15.9386881 L4.38143474,12.5715491 C3.95999752,12.2564193 3.66282124,11.7764805 3.59376293,11.2129153 C3.5459388,10.8226363 3.6142163,10.4269184 3.79005993,10.0752311 L7.94346544,1.76842007 C8.43744394,0.780463073 9.63879002,0.380014379 10.626747,0.873992876 C10.9770312,1.04913495 11.2681874,1.3232635 11.4640954,1.66237077 L15.6712201,8.94469677 C16.223768,9.90113003 15.8963542,11.124401 14.939921,11.6769489 C14.7957687,11.7602281 14.6421356,11.824981 14.4826764,11.8699847 L16.138575,15.1817819 C16.6325535,16.1697389 16.2321048,17.371085 15.2441478,17.8650635 C15.2213616,17.8764566 15.1983792,17.8874037 15.1752141,17.8979009 L17.3940409,22.3355545 C17.8880194,23.3235115 17.4875707,24.5248576 16.4996137,25.0188361 C16.3031118,25.1170871 16.0923333,25.1820111 15.8758694,25.2115801 L17.7771481,28.9317019 C18.2798254,29.9152614 17.8899933,31.1200944 16.9064337,31.6227717 C16.5848143,31.7871449 16.2247922,31.8613019 15.8646168,31.8375428 L17.3940409,34.8963909 C17.8880194,35.8843479 17.4875707,37.0856939 16.4996137,37.5796724 C16.2219028,37.7185279 15.9156767,37.7908181 15.6051865,37.7908181 L3.23606798,37.7908181 C2.13149848,37.7908181 1.23606798,36.8953876 1.23606798,35.7908181 C1.23606798,35.4803279 1.30835816,35.1741017 1.4472136,34.8963909 L3.44426435,30.9022894 L2.55694031,30.8354676 C1.45548965,30.7525206 0.629829284,29.7923766 0.712776281,28.6909259 C0.732286235,28.4318538 0.802086127,28.1790648 0.918274756,27.9466876 L2.37402797,25.0351811 C1.70096977,24.7131952 1.23606798,24.0258803 1.23606798,23.2299817 C1.23606798,22.9194915 1.30835816,22.6132654 1.4472136,22.3355545 L3.4266828,18.3766161 Z" id="Combined-Shape" stroke="#04A97C" fill="#06CA95"></path>
            </g>
            <g id="Tree" transform="translate(267.878162, 65.809971) rotate(55.000000) translate(-267.878162, -65.809971) translate(261.878162, 47.809971)">
                <rect id="Rectangle-2" fill="#8B572A" x="4.99533614" y="22.551305" width="3.24696849" height="12.7381072"></rect>
                <path d="M2.60466477,10.8480384 C2.36941449,10.5464183 2.21797529,10.1741446 2.18823341,9.7639808 C2.16365595,9.42503835 2.22584945,9.08542299 2.36894436,8.77718626 L3.28070015,6.81319851 C3.08281189,6.54519455 2.94926482,6.22398279 2.90585497,5.86972737 C2.85803084,5.47944829 2.92630834,5.08373038 3.10215197,4.73204313 L4.83208355,1.27217996 C5.32606205,0.284222961 6.52740813,-0.116225732 7.51536512,0.377752765 C7.86564927,0.552894836 8.15680546,0.827023386 8.35271355,1.16613066 L10.1050197,4.19928639 C10.6006309,5.05716511 10.3882863,6.12972284 9.64907275,6.74038907 L10.4779588,8.39816117 C10.8790701,9.20038385 10.6904439,10.1433039 10.0764016,10.7339569 L11.2908936,13.1629408 C11.7532461,14.0876458 11.432033,15.199291 10.5789173,15.7428876 L11.4935557,17.5325077 C11.996233,18.5160672 11.6064009,19.7209002 10.6228414,20.2235775 C10.6101778,20.2300496 10.5974547,20.2363818 10.5846743,20.2425737 L11.2908936,21.6550122 C11.7848721,22.6429692 11.3844234,23.8443153 10.3964664,24.3382938 C10.1187555,24.4771493 9.81252938,24.5494394 9.50203919,24.5494394 L3.23606798,24.5494394 C2.13149848,24.5494394 1.23606798,23.6540089 1.23606798,22.5494394 C1.23606798,22.2389492 1.30835816,21.9327231 1.4472136,21.6550122 L2.34341649,19.8626065 C1.42132562,19.6267836 0.773004396,18.7570736 0.846958797,17.7750354 C0.866468751,17.5159633 0.936268643,17.2631743 1.05245727,17.030797 L1.82867231,15.4783669 C1.462739,15.115915 1.23606798,14.6131124 1.23606798,14.057368 C1.23606798,13.7468778 1.30835816,13.4406517 1.4472136,13.1629408 L2.60466477,10.8480384 Z" id="Combined-Shape" stroke="#04A97C" fill="#06CA95"></path>
            </g>
            <g id="Tree" transform="translate(271.104768, 54.743957) rotate(55.000000) translate(-271.104768, -54.743957) translate(260.604768, 24.743957)">
                <rect id="Rectangle-2" fill="#8B572A" x="8.19111735" y="38.9785696" width="5.32422627" height="20.8873492"></rect>
                <path d="M3.71585021,20.8984166 C3.19745325,20.5708283 2.83596914,20.0099477 2.78821552,19.3513879 C2.76363806,19.0124455 2.82583157,18.6728301 2.96892647,18.3645934 L4.7664815,14.4925302 C4.26403371,14.1849817 3.90160394,13.6593824 3.82438572,13.0292265 C3.77656159,12.6389474 3.84483909,12.2432295 4.02068272,11.8915423 L8.98656367,1.95978038 C9.48054217,0.971823381 10.6818882,0.571374687 11.6698452,1.06535318 C12.0201294,1.24049526 12.3112856,1.51462381 12.5071937,1.85373108 L17.5373021,10.5606016 C18.08985,11.5170348 17.7624362,12.7403058 16.806003,13.2928537 C16.5787041,13.4241681 16.3278332,13.5094208 16.067718,13.5438175 L18.0363101,17.4810017 C18.5302886,18.4689587 18.1298399,19.6703047 17.1418829,20.1642832 C17.0513015,20.209574 16.9576211,20.2478148 16.8616787,20.278776 L19.4401356,25.4356899 C19.9341141,26.4236469 19.5336654,27.624993 18.5457084,28.1189715 C18.2679976,28.2578269 17.9617714,28.3301171 17.6512813,28.3301171 L17.6103597,28.3301171 L19.8837375,32.7783037 C20.3864147,33.7618632 19.9965826,34.9666962 19.0130231,35.4693735 C18.6858823,35.6365685 18.319009,35.7104232 17.9526566,35.6828343 L17.587509,35.6553361 L19.4401356,39.3605894 C19.9341141,40.3485464 19.5336654,41.5498924 18.5457084,42.0438709 C18.2679976,42.1827264 17.9617714,42.2550166 17.6512813,42.2550166 L3.23606798,42.2550166 C2.13149848,42.2550166 1.23606798,41.3595861 1.23606798,40.2550166 C1.23606798,39.9445264 1.30835816,39.6383002 1.4472136,39.3605894 L3.81829948,34.6184176 L2.5119553,34.5200407 C1.41050464,34.4370937 0.584844274,33.4769497 0.667791271,32.375499 C0.687301225,32.1164269 0.757101118,31.8636379 0.873289746,31.6312606 L2.57906894,28.2197022 C1.79722815,27.9478929 1.23606798,27.204538 1.23606798,26.3301171 C1.23606798,26.0196269 1.30835816,25.7134007 1.4472136,25.4356899 L3.71585021,20.8984166 Z" id="Combined-Shape" stroke="#04A97C" fill="#06CA95"></path>
            </g>
            <g id="Mountain" transform="translate(92.496549, 1.708492) rotate(-21.000000) translate(-100.496549, -10.708492) translate(75.996549, 6.708492)">
                <mask id="mask-5" fill="white">
                    <use xlink:href="#path-4"></use>
                </mask>
                <use id="Mask" fill="#D8D8D8" xlink:href="#path-4"></use>
                <path d="M6.92614323,-7.69909312 L29.7824159,-7.69909312 L29.7824159,4.01200409 C29.0067437,3.6709004 28.4236181,3.38322993 28.0330392,3.14899267 C27.2988265,2.70867196 26.3400078,1.69832765 26.081249,2.09072468 C25.3833943,3.14899267 24.0130498,3.1476657 23.3928738,3.6369148 C23.0753907,3.88737327 22.2367031,2.77231148 21.7772193,2.72297112 C21.505214,2.6937626 21.61857,2.94214536 21.2254024,3.14899267 C20.6927631,3.42921675 19.640974,3.69220242 19.2789421,3.6369148 C18.9834678,3.59179151 17.6718083,2.14562911 17.1853779,2.09072468 C16.8865602,2.05699648 16.7942997,2.79843835 16.3183893,3.14899267 C15.7927244,3.53619611 14.9271318,3.67675472 14.7649164,3.6369148 C13.3273241,3.2838438 12.506646,2.51907939 12.3028821,1.34262156 C11.187799,2.87215038 10.4786924,3.6369148 10.1755622,3.6369148 C9.87243209,3.6369148 8.78929242,3.76194456 6.92614323,4.01200409 L6.92614323,-7.69909312 Z" id="Rectangle-3" fill="#FFFFFF" mask="url(#mask-5)"></path>
                <mask id="mask-7" fill="white">
                    <use xlink:href="#path-6"></use>
                </mask>
                <use id="Mask" fill="#D8D8D8" xlink:href="#path-6"></use>
                <path d="M-16.5259447,-16.6678888 L11.0147025,-16.6678888 L11.0147025,-0.799036335 C10.0800569,-1.26124103 9.37742023,-1.65104227 8.90679252,-1.96844007 C8.02210349,-2.56508651 6.86677564,-3.93413029 6.55498448,-3.40242173 C5.71410499,-1.96844007 4.06290953,-1.97023816 3.31562899,-1.30729244 C2.93307797,-0.96791445 1.92250206,-2.47885324 1.36884742,-2.54571076 C1.04109485,-2.58528908 1.17768306,-2.24872376 0.703936101,-1.96844007 C0.0621327245,-1.58872888 -1.20521961,-1.23237622 -1.64144975,-1.30729244 C-1.99748127,-1.3684357 -3.57796427,-3.32802474 -4.16408819,-3.40242173 C-4.52414836,-3.44812434 -4.63531756,-2.44345063 -5.20876535,-1.96844007 C-5.84216492,-1.44376896 -6.88515995,-1.25330827 -7.08062131,-1.30729244 C-8.81284698,-1.78571315 -9.8017224,-2.82198955 -10.0472475,-4.41612163 C-11.390866,-2.34356883 -12.2453035,-1.30729244 -12.6105599,-1.30729244 C-12.9758163,-1.30729244 -14.2809446,-1.13787374 -16.5259447,-0.799036335 L-16.5259447,-16.6678888 Z" id="Rectangle-3" fill="#FFFFFF" mask="url(#mask-7)"></path>
            </g>
        </g>
        <g id="Moon" transform="translate(152.000000, 213.000000)">
            <circle id="Oval-2" stroke="#979797" fill="#D8D8D8" cx="26" cy="26" r="26"></circle>
            <circle id="Oval-4" fill="#9B9B9B" cx="20.5" cy="32.5" r="5.5"></circle>
            <circle id="Oval-4" fill="#9B9B9B" cx="13" cy="24" r="3"></circle>
        </g>
    </g>
</svg>
</div>

real-time-moon.markdown

Real Time Moon

The moon orbits the earth. But only once every 24 hours. This moon looks like it isn't moving, but it is moving - just at the same speed as the actual moon.

A Pen by Burke Holland on CodePen.

License.

style.css

body, html {
  height: 100%;
  display: grid;
  background: radial-gradient(#587894, #20354C);
}

.box {
  overflow: visible;
}

#earth {
  margin: auto;
}

#Moon {
  animation: spin 86400s infinite;
}

@keyframes spin {
  0% { 
    transform: rotate(0deg);
    transform-origin: center;
  }
  100% { 
    transform: rotate(360deg);
    transform-origin: center;
  }
}