Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals

✓ Published0🌍 Public
Aape-ape-ape
Last edited Apr 17, 2021
Created on Apr 17, 2021

Two gears made of interlocking cogs rotate continuously in opposite directions, driven by a small JavaScript animation embedded in the SVG. The code uses `animateTransform` with a `rotate` type to spin each gear group around its computed center, with speeds of 16 and 10 seconds per revolution. The gears are drawn as path elements with a brown fill and stroke, scaled and translated into place. The example demonstrates fundamental SVG manipulation and animation without external libraries.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

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
77% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG fundamentals using a series of concentric circles in grey, gold, and silver, accompanied by two curved paths animated with changing opacity. The static circles establish the visual structure, while the paths use SVG `<animate>` elements with `keyTimes` and `values` to create a pulsing effect over a 10-second loop. The code relies on native SVG rendering, with the animation controlled declaratively through SMIL. An inline JavaScript `console.log` shows the integration of basic scripting into the HTML page.

CCurran Kelleher
77% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A minimalist sunrise-and-sunset scene animates continuously in pure SVG. A radial sky gradient shifts from aliceblue to indigo, while two layered landscape paths alternate their linear gradient stops over a 15-second cycle. The sun, a circle, moves vertically via an `<animate>` element on its `cy` attribute. No JavaScript libraries are used; the visualization relies entirely on native SVG SMIL animations and gradient definitions, with styling handled by a linked stylesheet.

EEevikettu
76% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals forked

An animated sunrise and sunset scene rendered entirely with SVG. A radial gradient fills the sky with color that shifts from aliceblue to indigo, while a sun circle moves vertically through the frame using the SVG `<animate>` element. Two curved landscape paths use linear gradients that also animate their color stops, transitioning from aliceblue to midnightblue. The example demonstrates SVG fundamentals, including gradients, paths, and declarative animation, with all motion driven by the `attributeName` and `values` attributes.

RRifat Shadman
76% 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
76% 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
76% match
Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

JJonas Carvalho
75% 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
75% match