Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals banky

✓ Published1🌍 Public
Ddeebanks77
Last edited Nov 21, 2022
Created on Nov 21, 2022

The visualization is a fork of the original SVG Fundamentals exercise, depicting a stylized sunset landscape with two overlapping mountainous layers and a large sun. All elements are rendered as raw SVG primitives: a rect for the sky backdrop, a circle for the sun, and two paths for the terrain. Animated gradients and the sun’s vertical position loop over 15 seconds using SMIL `<animate>` tags, shifting colors from aliceblue to indigo and steelblue to simulate a day-night cycle. No external JavaScript libraries are used; the code relies solely on inline SVG and CSS for styling.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A fork of an SVG fundamentals exercise depicts an animated sunrise and sunset across a stylized landscape. The visualization uses a radial gradient for the sky and two linear gradients for layered terrain paths, all defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and SMIL `<animate>` tags oscillate its vertical position and the gradient stop colors over a 15-second loop, transitioning from aliceblue to indigo and steelblue to simulate the changing sky. No external JavaScript libraries are used; the rendering relies entirely on native SVG markup.

MMariko Iwata
93% 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
91% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated sunset landscape renders a sun descending over layered terrain. The scene uses SVG gradients that transition through a color cycle, simulating the sky’s shift from day to night. The sun’s downward motion and the gradient’s color changes are driven by SMIL animations, with `animate` elements altering the circle’s `cy` attribute and the gradients’ `stop-color` values. All visuals are constructed with basic SVG shapes and paths, requiring no external libraries.

RRambo Talabong
91% 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
91% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A self-contained SVG scene depicts a sunrise and sunset cycle over a stylized landscape. A radial gradient animates the sky from aliceblue to indigo, while a circle representing the sun moves downward and back using an `<animate>` element. Two layered landscapes use linear gradients and `<path>` elements with quadratic and cubic Bézier curves, with gradient stops that shift color over time. The visualization relies entirely on native SVG and SMIL animations, with no JavaScript libraries or data sources involved.

RRakesh Mahendran
91% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

Using only SVG, this visualization depicts a stylized sunrise and sunset over a layered, rolling landscape. Animated radial and linear gradients shift the sky through aliceblue, steelblue, indigo, and midnightblue tones over a 15-second cycle, while a `<circle>` sun moves vertically via SMIL `<animate>` tags. Two cubic Bézier `<path>` elements form the terrain, each filled with animated linear gradients that synchronize with the sky. The code directly embeds all timing and color keyframes in the SVG markup, relying on native SMIL animation rather than JavaScript libraries.

TTian1398
91% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG scene depicts a stylized sunset over layered, rolling hills. The sky—a large `<rect>` with a gradient—transitions from aliceblue to indigo over 15 seconds, while a single `<circle>` representing the sun moves downward and back upward along its `cy` attribute. Two landscape `<path>` elements, filled with corresponding `linearGradient`s, also shift their colors in sync. The animation is driven by SMIL `<animate>` elements, not JavaScript or external libraries.

MMunisbek-design
90% 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
90% match