Solar Eclipse

index.html

<div class="wrapper">
  <div class="inner">
    <svg height="200" width="200">
      <mask id="moon">
        <rect x="-200" y="0" width="600" height="200" style="fill:white;" />
        <circle cx="100" cy="100" r="95" style="fill:black;" />
      </mask>
      <g id="sun-g" mask="url(#moon)">
        <circle id="sun" cx="100" cy="100" r="100" style="fill:#DBBB34;" />
      </g>
    </svg>
  </div>
</div>

Solar-Eclipse.markdown

Solar Eclipse

Solar Eclipse using a SVG mask and CCS3 animations.

A Pen by Sebastian Popp on CodePen.

License.

style.css

html, body { height: 100%; }

body {
  background: #3498DB;
  animation: sky 5s ease 1s infinite;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

svg #sun-g {
  transform: translateX(200px);
  animation: sun-g 5s ease 1s infinite;
}

svg #sun {
  transform: translateX(-200px);
  animation: sun 5s ease 1s infinite;
}

@keyframes sky {
  0% { background: #3498DB; }
  45%,55% { background: #2C3E50; }
  100% { background: #3498DB; }
}

@keyframes sun-g {
  0% { transform: translateX(200px); }
  45%,55% { transform: translateX(0px); }
  100% { transform: translateX(-200px); }
}

@keyframes sun {
  0% { transform: translateX(-200px); }
  45%,55% { transform: translateX(0px); }
  100% { transform: translateX(200px); }
}