@Keyframes 1.9.3 | Overloadered 4

index.html

<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF; text-shadow: 0 1px 0 #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="sun">
  <svg class="eclipse-container" viewBox="0 0 100 100">
    <circle class="eclipse" cx="50" cy="50" r="49" transform="rotate(-90 50 50)" />
  </svg>
</div>

keyframes-1-9-3-overloadered-4.markdown

@keyframes 1.9.3 | Overloadered 4

https://dribbble.com/shots/1982200-Solar-Eclipse

A Pen by Shaw on CodePen.

License.

script.js

// console.log(Lengthy('circle'));

style.scss

$yellow: #F6C744;
$duration: 6s;
$load-duration: 1s;
$length: 308;

.sun {
  background-color: $yellow;
  height: 50vmin;
  width: 50vmin;
  border-radius: 50%;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: thats-no-moon $duration infinite, night-and-day $duration infinite;
    background-color: #fff;
    border-radius: 50%;
  }
}

@keyframes thats-no-moon {
  from, 5% {
    transform: translateX(100%);
  }
  30%, 60% {
    transform: none;
  }
  95%, to {
    transform: translateX(-100%);
  }
}

body {
 animation: night-and-day $duration infinite;
}


.eclipse {
  fill: none;
  stroke: $yellow;
  stroke-width: 2;
  stroke-dasharray: $length #{$length*2};
  stroke-dashoffset: $length;
  stroke-linecap: round;
  animation: eclipse-reveal $duration cubic-bezier(.75,.02,.18,.98) infinite;
}

@keyframes eclipse-reveal {
  0%, 30% { stroke-dashoffset: -$length; }
  50% { stroke-dashoffset: 0; }
  60%, 100% { stroke-dashoffset: $length; }
}

@keyframes night-and-day {
  from, 5%, 95%, to {
    background-color: white;
  }
  45%, 55% {
    background-color: black;
  }
}

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

*, *:before {
  box-sizing: border-box;
  position: relative;
}