Skip to main content
SimilarExport ZIP
100%

Fantastic Sunrise Sunset SVG Animation

✓ Published1🌍 Public
JJohnny Dodge
Last edited Feb 13, 2023
Created on Feb 13, 2023

A circular sun rises and sets over layered mountain silhouettes in an endless 15-second loop, while the backdrop and landscape colors shift between aliceblue and indigo to simulate day and night. This SVG animation uses SMIL `<animate>` elements on radial and linear gradient stops and on the sun’s `cy` attribute, producing a continuous cycle without JavaScript. Two irregular polygon paths and a curved Bézier path compose the terrain, filled with animated gradients from the inline `<defs>` section.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

sunrise sunset

An animated SVG landscape depicts a continuous sunrise-sunset cycle over layered hills. A white sun rises and falls between 75% and 50% vertical positions while the sky and land gradients shift between indigo, aliceblue, and steelblue tones over 15 seconds. The scene uses SMIL animations for the sun’s `cy` attribute and gradient stops, with no external JavaScript libraries.

AAlexei Kozhushkov
88% match
Loading thumbnail…

1_SVG_Fundamentals_Sunrise_Sunset

This animation demonstrates a stylized sunrise and sunset cycle over a two-layer mountain landscape. An SVG `circle` for the sun moves vertically while a `radialGradient` sky background and `linearGradient` landmasses, defined using `stop` elements, synchronize their color shifts through SVG’s `<animate>` tag. The landscape is constructed with cubic and quadratic Bézier curves using the `path` element’s `d` attribute, and the code relies entirely on native SVG and SMIL animation.

DddG12g
88% match
Loading thumbnail…

svg gradient animation

A looping animation of a stylized sunrise and sunset over a layered landscape. The scene uses several inline SVG gradients, including a radial gradient for the sky and two linear gradients for the terrain, each with animated `<stop>` color values. A circle representing the sun moves vertically via an SVG `<animate>` element on its `cy` attribute. All animations repeat indefinitely with a 15-second duration, with the code relying solely on native SVG and SMIL APIs, without any external JavaScript libraries.

Sserebryanaya.n@gmail.com
86% match
Loading thumbnail…

SVG Fundamentals Sunset/Sunrise

An animated SVG scene depicts a sunset-to-sunrise cycle through a gradient sky and a moving sun. A radial gradient animates the sky’s color from aliceblue to indigo and back, while the sun’s vertical position oscillates via the `animate` element. Overlapping landscape paths use linear gradients and animated stop colors to shift their appearance, creating a rhythmic transition between day and night. The code relies solely on native SVG and SMIL animations, with no external JavaScript libraries.

DDeepL -B2
86% match
Loading thumbnail…

Fork of Fork of Fork of Adil-sunRise-svg

This animated sunrise scene uses pure SVG with SMIL animations to cycle through a day-to-night transition. The sky gradient shifts from aliceblue to indigo, stars fade in and out, and a sun circle moves downward before resetting. Two landscape paths use linear gradients that darken in sync with the sky, creating a layered silhouette effect. The code leverages SVG’s `<animate>` and `<radialGradient>` elements to drive the 15-second loop without JavaScript libraries.

CCurran Kelleher
86% match
Loading thumbnail…

SVG Fundamentals Sunrise/Sunset

A 15-second SVG animation depicts a day-night cycle over a stylized landscape. The sun rises and sets by translating its circle's center position along the y-axis, while the sky and land gradients continuously shift color between aliceblue and indigo. Using the W3C SVG `<animate>` element, the example synchronizes color stops and the sun's `cy` attribute to create seamless loops, with all geometry defined through inline SVG paths and `<rect>` elements.

Ddomiauer
85% match
Loading thumbnail…

surnise

A looping SVG animation depicts a sunrise and sunset over a stylized landscape. A radial gradient sky shifts from aliceblue to indigo and back, while the sun’s vertical position oscillates between the sky and the horizon. Two layered path-based landmasses use linear gradients that synchronize with the same 15-second color cycle, creating a seamless day-night transition. The piece relies solely on native SVG elements, including `<animate>`, `<radialGradient>`, and `<linearGradient>`, with no external JavaScript libraries.

JJuanmaBV
84% match
Loading thumbnail…

Rising-Setting Sun

An animated SVG scene depicts a sun rising and setting over layered landscapes. The circular sun moves vertically along the canvas, and the sky’s radial gradient shifts from light aliceblue to dark indigo, while the two landscape paths use linear gradients that transition from aliceblue to steelblue and midnightblue. These color changes are driven by SMIL `<animate>` elements on the gradient stops and the sun’s `cy` attribute, with repeating 15-second cycles. The artwork is built entirely with raw SVG shapes and gradients, without external JavaScript libraries.

Nnubhatia
84% match