svg gradient animation

100%

svg gradient animation

✓ Published0🌍 Public

Last edited Feb 8, 2023

Created on Feb 8, 2023

Forked from Exercise 1: SVG Fundamentals

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.

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

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

89% match

Loading thumbnail…

SVG Dynamic landscape

This SVG scene shows an abstract mountain landscape, where a sun moves vertically behind layered terrain, and animated gradients shift the sky and hills through a day-night cycle. The rendering is built entirely with native SVG elements and animations, using `radialGradient` and `linearGradient` definitions to color the sky and landmasses. A `circle` element animates its `cy` attribute to simulate the sun rising and setting, while `<animate>` tags cycle the stop colors of the sky and foreground gradients over a 15-second loop, creating a dynamic, ambient visual without external libraries.

Ssz2036

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 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…

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

87% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals--gradient

This example animates a stylized sunrise and sunset using only SVG and embedded SMIL animations. It uses a `radialGradient` for the sky and two `linearGradient` fills for layered landscape paths, with the sun’s vertical position and gradient stop colors cycling over 15 seconds. The scene relies on `defs`, `animate` elements, and Bézier path curves, with no external JavaScript libraries.

WWeeeLi

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

86% match