100%

Fork of Exercise 1: SVG Fundamentals

✓ Published0🌍 Public

Last edited Apr 9, 2021

Created on Apr 9, 2021

Forked from Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a sunrise and sunset cycle. A large circular sun descends and rises against a sky that transitions between light and dark blue tones, while two layered, curved paths create a stylized foreground landscape. The animation is driven by SVG `<animate>` elements that modify the sun's vertical position and the gradient stop colors over a 15-second loop. The composition uses radial and linear gradients defined within the SVG to generate atmospheric color shifts.

AI-generated description

Sunrise/sunset.

非常喜欢这个图案

简单的代码营造了非常好的效果。

测试一下 Markdown

你喜欢这个效果嘛？

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a stylized sunrise and sunset cycle. A circle representing the sun moves along an arcing path across a 960 by 500 canvas, while the sky and layered landmasses transition between light and dark color palettes. The animation uses SVG `<animate>` elements to modify the sun's `cx` and `cy` coordinates and to interpolate the `stop-color` of radial and linear gradients over a 15-second repeating duration.

CCameron Wehr

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise and sunset scene. The animation has a sun circle moving vertically across the canvas, and a multi-layered landscape formed by quadratic and cubic Bézier paths. The sky and land use SVG gradients whose colors continuously cycle from light to dark. The implementation relies on SVG's native `<animate>` elements and radial and linear gradients, with no external JavaScript libraries.

YYi Ning

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a sunrise and sunset over a stylized landscape. The visualization uses a radial gradient for the sky and linear gradients for two layered terrain paths, which are defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and its vertical position translates via an `<animate>` tag. The code relies on core SVG and SMIL animation APIs, specifically `radialGradient`, `linearGradient`, and `attributeName` for the periodic color and position changes.

Yyfping

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for a gradually shifting sky and linear gradients for undulating terrain. The sunset is depicted with a static circle representing the sun, which animates its vertical position, moving downward and then back upward. The code defines these gradients within SVG `<defs>` elements and uses `<animate>` tags for color transitions and sun movement, with paths forming two landscape layers.

Aape-ape-ape

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a stylized sunrise and sunset over a layered landscape. It uses an HTML `<svg>` element with CSS gradients and SVG `<animate>` tags to cycle the sky from aliceblue to indigo, move the sun downward, and shift the horizon colors over a 15-second loop. The two overlapping landscape paths use quadratic and cubic Bézier curves, filled with `radialGradient` and `linearGradient` definitions. All rendering is done directly through the SVG API, with no external JavaScript libraries.

Mmfgok

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a stylized sunrise and sunset cycle over rolling hills. The visualization uses a radial gradient for the sky and linear gradients for two landscape layers, all defined within SVG `defs` tags. The sun, a simple circle, moves vertically via an SVG `<animate>` element, while the gradient colors transition to simulate the shifting light. This example demonstrates fundamental SVG animation and gradient techniques without any external libraries.

LLuiz Domingues

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized landscape. A large circle representing the sun moves vertically against a sky backdrop, while two overlapping Bezier-curved paths depict rolling landmasses in the foreground. The visualization uses pure SVG and the Web Animations API through `<animate>` elements to cycle gradient colors and the sun's position over a 15-second loop. All rendering is handled by inline SVG markup, with no JavaScript or external libraries.

Mmark.horne99@gmail.com

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a sunrise-to-sunset cycle over layered terrain. The code uses a `<radialGradient>` sky backdrop and two `<linearGradient>` landmasses, with `animate` tags on gradient stops and a `circle` element to move the sun vertically over 15 seconds. The scene renders entirely in SVG, with paths defining the curved hills and a repeating timeline for the color and position transitions.

MMabdelbaki37

93% match