Fork of Exercise 1: SVG Fundamentals

100%

Fork of Exercise 1: SVG Fundamentals

✓ Published0🌍 Public

Last edited Jan 9, 2023

Created on Jan 9, 2023

Forked from 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.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

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

95% match

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

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.

Mmytiger

94% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example renders an animated sunrise and sunset scene using SVG. A radial gradient sky backdrop shifts from aliceblue to indigo, while a circle representing the sun moves vertically via SVG `<animate>` elements. Two layered landscape paths use linear gradients that also transition colors, creating a day-to-night cycle. The visualization relies solely on native SVG animation and gradient APIs, with no JavaScript libraries or data sources involved.

FFouzia A.

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

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

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

93% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A scenic sunrise and sunset animation is rendered entirely as an SVG. It depicts a circular sun moving vertically against a dynamically changing sky and layered landscape, with colors transitioning to suggest a day-night cycle. The code uses native SVG elements like `radialGradient`, `linearGradient`, and `path`, along with the SVG `<animate>` API to continuously shift gradient stops and the sun’s `cy` attribute. No external JavaScript libraries are employed; rendering is purely through static SVG markup.

Iinnocent thomas

93% match