Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solar Eclipse
<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>
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); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment