Skip to main content
SimilarExport ZIP
100%

Rising-Setting Sun

✓ Published3🌍 Public
Nnubhatia
Last edited Aug 1, 2023
Created on Jul 31, 2023
Forked from HTML Starter

An animated SVG scene depicts a sun rising and setting over layered landscapes. The circular sun moves vertically along the canvas, and the sky’s radial gradient shifts from light aliceblue to dark indigo, while the two landscape paths use linear gradients that transition from aliceblue to steelblue and midnightblue. These color changes are driven by SMIL `<animate>` elements on the gradient stops and the sun’s `cy` attribute, with repeating 15-second cycles. The artwork is built entirely with raw SVG shapes and gradients, without external JavaScript libraries.

AI-generated description

Taken from Adil [https://vizhub.com/adilzeshan/879aef8e71cc4e448331cea1d6432752?edit=files&file=index.html]

MIT Licensed

Similar vizzes

Loading thumbnail…

sunrise sunset

An animated SVG landscape depicts a continuous sunrise-sunset cycle over layered hills. A white sun rises and falls between 75% and 50% vertical positions while the sky and land gradients shift between indigo, aliceblue, and steelblue tones over 15 seconds. The scene uses SMIL animations for the sun’s `cy` attribute and gradient stops, with no external JavaScript libraries.

AAlexei Kozhushkov
87% match
Loading thumbnail…

Fork of Rising-Setting Sun

A sunrise and sunset cycle plays out over two abstract, curved landscapes. A single circle represents the sun, moving up and down via SVG `<animate>` tags, while the sky and land gradients shift through a palette of aliceblue, indigo, and steelblue. The scene uses pure inline SVG with `<radialGradient>` and `<linearGradient>` definitions, alongside animated `stop-color` properties, to create the changing ambient light. The landscapes are drawn as filled `<path>` elements.

RRutger Jansen
86% 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
86% match
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
85% match
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
85% match
Loading thumbnail…

Fantastic Sunrise Sunset SVG Animation

A circular sun rises and sets over layered mountain silhouettes in an endless 15-second loop, while the backdrop and landscape colors shift between aliceblue and indigo to simulate day and night. This SVG animation uses SMIL `<animate>` elements on radial and linear gradient stops and on the sun’s `cy` attribute, producing a continuous cycle without JavaScript. Two irregular polygon paths and a curved Bézier path compose the terrain, filled with animated gradients from the inline `<defs>` section.

JJohnny Dodge
84% match
Loading thumbnail…

surnise

A looping SVG animation depicts a sunrise and sunset over a stylized landscape. A radial gradient sky shifts from aliceblue to indigo and back, while the sun’s vertical position oscillates between the sky and the horizon. Two layered path-based landmasses use linear gradients that synchronize with the same 15-second color cycle, creating a seamless day-night transition. The piece relies solely on native SVG elements, including `<animate>`, `<radialGradient>`, and `<linearGradient>`, with no external JavaScript libraries.

JJuanmaBV
84% match
Loading thumbnail…

Fork of Rising-Setting Sun

This example, titled "Fork of Rising-Setting Sun," is a fully self-contained SVG animation that depicts a dynamic landscape with a sun, rolling hills, a river, trees, ducks, birds, and an airplane, all set against a sky that cycles through colors. The scene's gradients, including the sky and land, animate their color stops over a 15-second loop, while the sun, ducks, birds, and airplane follow predefined motion paths using SVG's `<animateMotion>` and `<mpath>` elements. The artwork is built entirely with basic SVG shapes and paths, with no external JavaScript libraries, and is rendered directly in the browser via inline SVG markup, as shown in the provided `index.html` file.

Ppraveennayak1702@gmail.com
84% match