SVG Fundamentals

100%

SVG Fundamentals

✓ Published0🌍 Public

Last edited Jan 15, 2024

Created on Jan 15, 2024

A demonstration of SVG fundamentals shows a full-screen radial gradient and an animated circle descending vertically over five seconds. The gradient transitions from aliceblue to indigo via an SVG `<animate>` element on the `<stop>` color, while the circle’s `cy` attribute animates from 250px to 350px. Rendered purely as inline SVG in an HTML document, the example uses no external libraries, relying on native SVG markup and SMIL animation for its visual effect.

AI-generated description

A demonstration of SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise 1: SVG Fundamentals

An animated SVG scene cycles through a sunrise-to-nightfall color transition, depicting a sun setting behind layered silhouetted landscapes. Gradients shift between aliceblue, steelblue, indigo, and midnightblue over a 15-second loop, with the sun's vertical position animating downward and back. The visualization uses native SVG elements—`rect`, `circle`, `path`, and defined `radialGradient` and `linearGradient`—with SMIL animations via `<animate>` tags, all embedded directly in the HTML without external libraries.

AAdil Zeshan

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling in a static scene. It shows a blue circle, two diagonal lines, and a black polyline path, all defined within an inline SVG element. The code uses raw SVG markup with elements like `<circle>`, `<line>`, and `<path>`, applying attributes such as `stroke`, `stroke-width`, and `fill`. A separate file, hover.html, explores CSS transitions on SVG circles, changing fill color and stroke width over three seconds when hovered.

Nnim@brejnholt.dk

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.

Aalexscott-untitled

82% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and their interactive behavior. Static geometry appears first, including circles, rectangles, lines, and paths with varied fills and strokes, while CSS transitions animate rectangle properties on hover. The visualization then explores advanced SVG features using embedded animations and gradients. A radial gradient defines a sun-like circle with an animated vertical position, while linear gradients fill layered landscape paths. The code also includes a path with an arc and quadratic curve, plus an incomplete gradient definition referencing a missing `sky-gradient` ID. SVG styling uses CSS selectors for shape customization and hover effects.

Ccssergio

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered directly on an SVG canvas. It also shows a hover-triggered CSS transition that gradually changes a rectangle’s fill color to green, alongside a nested SVG with multiple ellipses and an animated circle that moves vertically using the SVG `<animate>` element. The code uses plain SVG markup with inline styling and attributes, such as `fill`, `stroke`, `stroke-width`, and `values` for animation, without relying on external libraries. The composition serves as a raw tutorial of core SVG capabilities.

CCaroline Ghisolfi

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

81% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic building blocks of SVG graphics, including circles, rectangles, a custom path, and a line, all rendered directly on an HTML page. It shows how CSS can animate rectangular elements smoothly over three seconds, and how a hover effect triggers a green fill with a thick stroke. The code uses the native `svg` element and its child tags like `circle`, `rect`, `path`, and `line`, with styling applied via an embedded `<style>` block. It serves as a bare-minimum introduction to SVG fundamentals using only HTML and JavaScript without any external libraries.

Mmegan-grannan

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

81% match