A hillside town from sunrise to night, in pure SVG and CSS
Windows light up one by one at dusk, stars come out, a train crosses the valley. The whole day takes 12 seconds, and it is all SVG and CSS.
Motion loop
A whole day in 12 seconds
Sundry Millsundrymill.com/library
Download
The four skies, and the lamps
-
Dawn sky
-
Day sky
-
Dusk sky
-
Night sky
-
Window glow
The code
The trick: every colour runs on one 12 second clock
/* 0% sunrise, 12 to 35% day, 45% dusk, 56 to 86% night, 100% sunrise again */
.hill-far { animation: hill-far 12s linear infinite; }
@keyframes hill-far {
0%, 100% { fill: #e8b0a8; }
12%, 35% { fill: #a8d1c4; }
45% { fill: #b3708e; }
56%, 86% { fill: #2b386c; }
}
/* windows switch on one by one: each gets its own delay */
.w { animation: win 12s linear infinite; animation-delay: calc(var(--d, 0) * 50ms); }
@keyframes win {
0%, 100% { fill: #5d5a86; }
12%, 35% { fill: #9fd0e0; }
43% { fill: #3d3464; }
44.5% { fill: #ffd66e; }
86% { fill: #ffc95a; }
87.5% { fill: #1d2552; }
}How to use it
- Every shape that changes colour uses the same 12 second duration and linear timing, with keyframes at the same percentages. That is what keeps the scene in step.
- The windows light up in turn because each one has a --d number and the delay is --d times 50 ms.
- To record it as a video, open the file full screen and screen record 12 seconds; the last frame matches the first.
Free to use in personal and commercial work. No credit needed, though a link back is always nice.
