Skip to main content
SimilarExport ZIP
100%

Fork of Fork of SVG Fundamentals Sunset/Sunrise

✓ Published1🌍 Public
TTobi Olabode
Last edited Oct 25, 2023
Created on Oct 25, 2023

A looping SVG animation depicts a sunset and sunrise over a stylized landscape. The sun moves vertically against a sky that transitions from aliceblue to indigo, while layered green and orange landmasses shift in color. Built with raw SVG elements—including `<radialGradient>`, `<linearGradient>`, `<circle>`, and `<path>`—the scene uses `<animate>` tags to cycle attribute values over 15 seconds, creating a continuous day-night effect.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals Sunset/Sunrise

A simple animated SVG scene depicts a sunset-sunrise cycle over a stylized landscape. The visualization uses native SVG elements, including `<rect>`, `<circle>`, and `<path>` shapes, to render the sky, sun, and three layers of terrain. Animation is driven by SVG `<animate>` tags, which continuously cycle the sun's vertical position and the gradient colors of the sky and land, creating a looping day-to-night transition. The scene relies on radial and linear gradient definitions within `<defs>` to shade the elements.

Rraturi22@gmail.com
93% match
Loading thumbnail…

Fork of SVG Fundamentals sunset fork

This example shows an animated sunset landscape with two layered mountain silhouettes and a large sun descending against a gradient sky. The scene uses SVG elements, including circles, paths, and rectangle shapes, all rendered with radial and linear gradients. Animation comes from SVG’s `<animate>` element, which cycles the sun’s vertical position and smoothly transitions gradient stop colors from aliceblue through indigo and steelblue over a 15-second loop, shifting the mood from daylight to dusk and back.

Rrohanxavier33@gmail.com
92% match
Loading thumbnail…

Fork of SVG Fundamentals Sunset/Sunrise

This example depicts an animated sunset and sunrise scene using a full-width SVG canvas. The visualization shows a glowing yellow sun that moves vertically against a backdrop of layered, undulating landscapes, creating a cyclical day-to-night transition. The animation is driven by SVG native `<animate>` elements, which modulate the sun’s vertical position and adjust the gradient colors of the sky and terrain over a 15-second loop. The scene is constructed with `<radialGradient>` and `<linearGradient>` definitions, with complex landscape shapes formed by SVG `<path>` elements.

AAkash Santosh Kuskar
91% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals - Sunrise

An animated sunrise and sunset scene in pure SVG. The sky’s radial gradient and the two layered landscape paths shift from aliceblue to indigo and steelblue, while a yellow sun circle moves vertically between 250px and 350px using `<animate>`. The gradients use `<stop>` elements with `attributeName` animations, and the land paths are drawn with cubic and quadratic Bézier curves. The composition cycles indefinitely over 15 seconds, simulating a day-night transition.

MMartin
91% 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
90% match
Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape practice

This animated SVG landscape depicts a stylized sunrise and sunset cycle over layered mountain silhouettes. The sky backdrop and terrain use radial and linear gradients, while a circle representing the sun animates its vertical position. SVG `<animate>` elements continuously shift gradient stop colors between aliceblue and steelblue, and the sun’s `cy` attribute moves from 250px to 350px and back, simulating a day-night loop. The scene combines three distinct path shapes filled with gradient definitions to create depth.

NNyashaBradleymhepo
90% 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
90% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals forked

An animated sunrise and sunset scene rendered entirely with SVG. A radial gradient fills the sky with color that shifts from aliceblue to indigo, while a sun circle moves vertically through the frame using the SVG `<animate>` element. Two curved landscape paths use linear gradients that also animate their color stops, transitioning from aliceblue to midnightblue. The example demonstrates SVG fundamentals, including gradients, paths, and declarative animation, with all motion driven by the `attributeName` and `values` attributes.

RRifat Shadman
90% match