Skip to main content
SimilarExport ZIP
100%

Fork of SVG Fundamentals Sunset/Sunrise

✓ Published2🌍 Public
AAkash Santosh Kuskar
Last edited Oct 16, 2023
Created on Oct 16, 2023

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.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of SVG Fundamentals Sunset/Sunrise

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.

TTobi Olabode
91% 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
89% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example renders an animated sunrise and sunset scene using SVG. A radial gradient sky backdrop shifts from aliceblue to indigo, while a circle representing the sun moves vertically via SVG `<animate>` elements. Two layered landscape paths use linear gradients that also transition colors, creating a day-to-night cycle. The visualization relies solely on native SVG animation and gradient APIs, with no JavaScript libraries or data sources involved.

FFouzia A.
88% 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
88% 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
88% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise and sunset scene. The animation has a sun circle moving vertically across the canvas, and a multi-layered landscape formed by quadratic and cubic Bézier paths. The sky and land use SVG gradients whose colors continuously cycle from light to dark. The implementation relies on SVG's native `<animate>` elements and radial and linear gradients, with no external JavaScript libraries.

YYi Ning
88% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized landscape. A large circle representing the sun moves vertically against a sky backdrop, while two overlapping Bezier-curved paths depict rolling landmasses in the foreground. The visualization uses pure SVG and the Web Animations API through `<animate>` elements to cycle gradient colors and the sun's position over a 15-second loop. All rendering is handled by inline SVG markup, with no JavaScript or external libraries.

Mmark.horne99@gmail.com
88% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for a gradually shifting sky and linear gradients for undulating terrain. The sunset is depicted with a static circle representing the sun, which animates its vertical position, moving downward and then back upward. The code defines these gradients within SVG `<defs>` elements and uses `<animate>` tags for color transitions and sun movement, with paths forming two landscape layers.

Aape-ape-ape
88% match