Fork of Adil-Sunrise and Sunset

100%

Fork of Adil-Sunrise and Sunset

✓ Published0🌍 Public

Last edited Nov 1, 2025

Created on Nov 1, 2025

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.

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 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 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

90% 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

89% 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

87% 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

87% match

Loading thumbnail…

Adil-sunRise-svg

A sunrise and sunset are depicted through an animated SVG landscape. A central sun circle moves vertically, while the sky and two layered landmasses use gradients that cycle between aliceblue and steelblue or indigo. The animation relies on SVG’s `<animate>` elements to alter the sun’s `cy` position and gradient stop colors over 15 seconds, creating a continuous day-night transition without external libraries or data sources.

Wwasti

87% 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