Skip to main content
SimilarExport ZIP
100%

sunrise sunset

✓ Published1🌍 Public
AAlexei Kozhushkov
Last edited Aug 16, 2023
Created on Aug 15, 2023
Forked from smily

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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
90% 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
88% 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
87% 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
87% 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
87% 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
87% match
Loading thumbnail…

1_SVG_Fundamentals_Sunrise_Sunset

This animation demonstrates a stylized sunrise and sunset cycle over a two-layer mountain landscape. An SVG `circle` for the sun moves vertically while a `radialGradient` sky background and `linearGradient` landmasses, defined using `stop` elements, synchronize their color shifts through SVG’s `<animate>` tag. The landscape is constructed with cubic and quadratic Bézier curves using the `path` element’s `d` attribute, and the code relies entirely on native SVG and SMIL animation.

DddG12g
86% 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
86% match