Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals

✓ Published1🌍 Public
SS767
Last edited Jun 4, 2021
Created on Jun 3, 2021

A forked exercise demonstrates sunrise and sunset using SVG. A complex, single-path tree symbol is defined in `<defs>` and rendered within a 960x500 white canvas. The visualization relies on SVG gradients and symbol reuse, with the tree drawn through extensive path data. Styling is controlled via an external stylesheet that hides page overflow. The example focuses on SVG fundamentals, showing how symbols and paths create detailed, scalable graphics without JavaScript libraries.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Exercise 2: SVG Fundamentals

A sunrise and sunset scene depicts hills, trees, and a changing sky. The visualization uses raw SVG elements and paths, defined within a `<symbol>` for trees, and relies on CSS for layout. Gradients are set up in SVG `<defs>` to color the background, while a complex path creates a detailed landscape silhouette. The example demonstrates fundamental SVG construction techniques without additional libraries.

SS767
93% match
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
90% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals banky

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.

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

Fork of Exercise 1: SVG Fundamentals. Sunset

This fork of an SVG fundamentals exercise depicts an animated sunset. A radial gradient sky transitions through colors while a circle, representing the sun, moves downward and upward. Two landscape layers use cubic and quadratic Bezier paths with linear gradients, also cycling through hues. The animation relies on native SVG `<animate>` elements and CSS styling, with no external libraries required.

WWRCIECH
88% 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
88% 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
88% match