Fork of Adil-sunRise-svg

100%

Fork of Adil-sunRise-svg

✓ Published0🌍 Public

Last edited Mar 28, 2023

Created on Mar 28, 2023

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.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

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

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

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

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

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

84% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a sunrise and sunset over a stylized landscape. The visualization uses a radial gradient for the sky and linear gradients for two layered terrain paths, which are defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and its vertical position translates via an `<animate>` tag. The code relies on core SVG and SMIL animation APIs, specifically `radialGradient`, `linearGradient`, and `attributeName` for the periodic color and position changes.

Yyfping

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

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

83% match