Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Adil-sunRise-svg

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 4, 2025
Created on Aug 4, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Fork of Fork of Adil-sunRise-svg

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.

Ppeter.sime@gmail.com
93% 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
93% 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
90% 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
90% 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
89% 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
89% match