Skip to main content
SimilarExport ZIP
100%

SVG Fundamental

✓ Published0🌍 Public
BBart van Pelt
Last edited Dec 23, 2022
Created on Dec 23, 2022
Forked from HTML Starter

This example demonstrates fundamental SVG drawing and animation techniques within an HTML page. It renders a landscape scene with a moving sun, animated gradient backgrounds, and layered curved landmasses defined by SVG path elements. The code uses native SVG features including `radialGradient` and `linearGradient` definitions, `<circle>`, `<rect>`, and `<path>` elements, and the `d` attribute with commands like `M`, `L`, `Q`, and `C`. Animations are implemented with the `<animate>` element, changing the sun’s `cy` position and color stops over fifteen-second cycles.

AI-generated description

Intro

see https://www.youtube.com/watch?v=xkBheRZTkaw

svg

  • has coordiates left top is (0,0) right bottom = (maxx, maxy)
  • no z-ordering as in html
  • z-ordering is order of elements in svg

Tools

Examples

  • Adil Zeshan - animation and color gradients
MIT Licensed

Similar vizzes

Loading thumbnail…

fork of exercise 1: SVG Fundamental

This example demonstrates a simple animated landscape composed of SVG shapes, including a gradient-filled sky, a moving circle representing the sun or moon, and two layered landmasses. The scene uses SVG `<rect>`, `<circle>`, and `<path>` elements alongside `<radialGradient>` and `<linearGradient>` definitions. Animation is driven by SVG's native `<animate>` elements, which cycle color changes for the sky gradient and vertical movement for the circle. The code relies solely on standard SVG and HTML APIs, with no external JavaScript libraries.

LLatifaAlShayea
86% match
Loading thumbnail…

Fork: SVG Fundamentals

This example presents a minimalist animated landscape of rolling hills beneath a glowing sun. It demonstrates the use of raw SVG elements—including `<rect>`, `<circle>`, and `<path>`—to construct the scene. Gradients defined within `<defs>` create the sky and terrain coloring. The animation relies on SMIL `<animate>` tags to cycle the sun's position and smoothly shift gradient stop colors between palettes, suggesting a slow transition from day to night.

BBaffling Science
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG shapes—circles, rectangles, lines, paths, and arcs—along with interactive styling. It applies CSS transitions to rectangles on hover and scales paths via hover transforms, while also showing inline SVG attribute definitions and global style overrides. The code also defines radial and linear gradients with animation elements, though the accompanying `sunshine.html` contains incomplete markup and references undefined gradient IDs, making the animated scene non-functional. The primary `index.html` file serves as a static showcase of SVG fundamentals.

Ccssergio
85% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example presents an animated landscape with a sun and layered terrain, all rendered as a single SVG graphic. The scene depicts a day-night cycle through a sky gradient and land gradients that transition colors, while the sun moves down and up again. The visualization is built entirely with SVG fundamentals, using `<svg>` elements, `<radialGradient>` and `<linearGradient>` definitions, and `<path>` shapes for the landscape. Animations are driven by SVG's native `<animate>` element, which modifies the sun's vertical position and the gradient stop colors over a 15-second loop. The data source is the embedded SVG code itself, with no external data files.

Kkoslin
85% 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
84% match
Loading thumbnail…

SVG Dynamic landscape

This SVG scene shows an abstract mountain landscape, where a sun moves vertically behind layered terrain, and animated gradients shift the sky and hills through a day-night cycle. The rendering is built entirely with native SVG elements and animations, using `radialGradient` and `linearGradient` definitions to color the sky and landmasses. A `circle` element animates its `cy` attribute to simulate the sun rising and setting, while `<animate>` tags cycle the stop colors of the sky and foreground gradients over a 15-second loop, creating a dynamic, ambient visual without external libraries.

Ssz2036
83% match
Loading thumbnail…

SVG Fundamentals sunset fork

A sunset scene rendered entirely in SVG uses gradient-filled shapes for the sky and layered landscapes. A circle representing the sun animates its vertical position, while `<animate>` elements cycle gradient stop colors between aliceblue and indigo over fifteen seconds to simulate dusk. The code defines radial and linear gradients in `<defs>` and applies them to `<rect>` and `<path>` elements, with no external JavaScript libraries.

Cchippyrich
83% 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
83% match