Skip to main content
SimilarExport ZIP
100%

1_SVG_Fundamentals_Sunrise_Sunset

✓ Published0🌍 Public
DddG12g
Last edited Sep 9, 2023
Created on Sep 9, 2023

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.

AI-generated description

Sunrise/sunset.

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…

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

Fork of Exercise 1: SVG Fundamentals

This visualization animates a sunrise and sunset over a layered mountain landscape using only SVG elements and SMIL animations. A sky gradient transitions from aliceblue to indigo as a sun circle moves downward and back, while two terrain paths with linear gradients shift color to simulate changing light. The scene uses inline `<animate>` tags within SVG `radialGradient` and `linearGradient` definitions to cycle colors and the sun’s `cy` position over 15-second loops. No JavaScript or D3 is involved; rendering relies entirely on native SVG markup.

BbeauMarko
88% 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 Fundamentals Sunrise/Sunset

A 15-second SVG animation depicts a day-night cycle over a stylized landscape. The sun rises and sets by translating its circle's center position along the y-axis, while the sky and land gradients continuously shift color between aliceblue and indigo. Using the W3C SVG `<animate>` element, the example synchronizes color stops and the sun's `cy` attribute to create seamless loops, with all geometry defined through inline SVG paths and `<rect>` elements.

Ddomiauer
87% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized mountain landscape, using purely declarative SVG markup. The sky and two layered terrain paths transition through a daily color cycle via `<animate>` elements on radial and linear gradients, while the sun circles vertically between the mountains and horizon. The piece demonstrates core SVG fundamentals—shapes, paths, gradients, and declarative animation—without relying on JavaScript or external libraries, and explicitly defines its geometry and timing in the document itself.

SSimran
87% match
Loading thumbnail…

SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a sunrise-to-sunset color scheme using animated gradients and moving elements. The visualization embeds `radialGradient` and `linearGradient` definitions with SMIL `<animate>` elements to transition the sky and terrain colors over 15-second intervals, while a circle representing the sun shifts vertically. Three layered mountain paths, constructed from raw coordinate data, use these gradients to create depth as they fill with shifting hues, all rendered directly in SVG without external libraries.

LLouis Astorg
87% 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
87% match