Skip to main content
SimilarExport ZIP
100%

Sunrise

✓ Published0🌍 Public
Sshabdullah05
Last edited Apr 7, 2023
Created on Apr 7, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Sunrise

This example uses React to render a stylized sunrise scene in SVG, depicting a glowing sun above layered hills and a dark sea. The sky and sun use linear gradients and blur filters for a soft, luminous effect, while JavaScript generates hundreds of small, randomly positioned circles to suggest sparkling water reflections. A dynamic color palette for the water is defined in code, and the interaction is limited to static, generated elements—no user input or animation.

MMaxLiebsch
88% match
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…

svg gradient animation

A looping animation of a stylized sunrise and sunset over a layered landscape. The scene uses several inline SVG gradients, including a radial gradient for the sky and two linear gradients for the terrain, each with animated `<stop>` color values. A circle representing the sun moves vertically via an SVG `<animate>` element on its `cy` attribute. All animations repeat indefinitely with a 15-second duration, with the code relying solely on native SVG and SMIL APIs, without any external JavaScript libraries.

Sserebryanaya.n@gmail.com
86% match
Loading thumbnail…

Rising-Setting Sun

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.

Nnubhatia
85% 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
84% 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
83% 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
83% match