Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Adil-sunRise-svg

✓ Published0🌍 Public
Ppeter.sime@gmail.com
Last edited Dec 31, 2025
Created on Dec 31, 2025

This example shows an animated sunrise over a stylized landscape, using layered SVG paths and gradients to create a dynamic sky and terrain. The code relies on SVG’s native `<radialGradient>` and `<linearGradient>` elements, along with `<animate>` tags to cycle colors and sun position over 10- and 15-second intervals. Two bezier curve paths render the foreground hills, while a circle represents the sun, moving vertically across the scene. The piece is a self-contained HTML document, using no external JavaScript libraries, and is rendered entirely through SVG markup.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Fork of Adil-sunRise-svg

This SVG animation depicts a stylized sunrise over layered landscapes. A gradient-filled sky transitions from aliceblue to indigo, while a sun circle moves down and back up using an `<animate>` element. Three overlapping paths create rolling hills, each filled with animated linear or radial gradients that shift colors over 15 seconds. The scene leverages declarative SMIL animations within raw SVG markup, with no JavaScript libraries, and cycles an infinite sunrise-to-night color loop.

Rraturi22@gmail.com
93% match
Loading thumbnail…

Fork of Adil-sunRise-svg

A looping animated sunrise and sunset scene rendered entirely as a static SVG with embedded SMIL animations. The sky gradient cycles between aliceblue and indigo, while the sun’s vertical position oscillates via an `animate` element on its `cy` attribute. Two overlapping landscape paths use `linearGradient` fills that shift color in sync with the 15-second cycle. The visualization relies on native SVG `<radialGradient>`, `<linearGradient>`, and `<animate>` features without external JavaScript libraries, and the landscape shapes are hand-coded path data.

IIndranil Biswas
92% match
Loading thumbnail…

Fork of Adil-sunRise-svg

This SVG visualization depicts a stylized sunrise and sunset cycle over a layered landscape. The scene shows a sun that moves vertically while the sky and terrain gradients shift between light and dark tones, simulating the transition from day to night. The animation is implemented using SMIL animations within the SVG markup, specifically with `<animate>` elements that control the sun's position and the color stops of linear and radial gradients. The artwork uses pure SVG shapes like circles, rectangles, and quadratic and cubic Bézier paths for the landscape.

Ppeppeconti
89% match
Loading thumbnail…

Fork of Adil-Sunrise and Sunset

This animated sunrise-and-sunset scene uses an SVG radial gradient sky and two linear-gradient landscape layers on a 960×500 canvas. The sky and landscape colors cycle through aliceblue, indigo, and steelblue over a 15-second loop, while the sun’s vertical position oscillates between 250px and 350px via SVG `<animate>` elements. The code relies on native SVG gradients and SMIL animations, with no JavaScript libraries, and renders entirely in the browser as vector graphics.

JJohn A. Dodge
89% 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
88% match
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
87% match
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
87% match