SVG Fundamentals

100%

SVG Fundamentals

✓ Published2🌍 Public

Last edited May 8, 2022

Created on May 7, 2022

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.

AI-generated description

A demostration o SVG shaoes.

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and complex paths, rendered directly in an HTML document. It shows how static SVG elements can be styled with attributes like fill color, stroke, and stroke-width to create basic geometric compositions. The code uses no JavaScript for visualization logic, but includes a minimal `index.js` that imports `select` from D3 version 7 and sets text content on the page body. The raw SVG markup is authored manually, with all shapes defined inline in the HTML.

SSardar Abdullah Khawar

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

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within a bare HTML page, using CSS for interactivity and transitions. It draws circles, rectangles, lines, and paths onto a 900x900 SVG canvas, with a hover effect on the rectangle that changes its fill, stroke color, and stroke width over three seconds. The code leverages native SVG elements and CSS selectors, such as `rect:hover` and the `transition` property, to illustrate basic vector graphics rendering and styling. No external libraries are used; only vanilla HTML, CSS, and SVG.

PPinkBone

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling through a single static page. It draws a rectangle, four circles, two polygonal paths, and a line within an SVG element. CSS defines the rectangle’s red fill, grey stroke, and a two-second transition that changes its fill to green and stroke width on hover. The code uses plain HTML, CSS, and inline SVG attributes like `cx`, `cy`, and `d`, with no external libraries. It illustrates basic vector graphics rendering and declarative styling in the browser.

Mmfgok

85% match

Loading thumbnail…

SVG Fundamental

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.

BBart van Pelt

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—circle, line, path, and rect—statically rendered within a 500 by 500 canvas. It highlights CSS integration, including a `transition` rule for rectangles that animates over 3000 milliseconds, though the hover state’s `fill` uses quoted strings, which are non-standard CSS values. The markup uses core SVG attributes directly, such as `stroke-width`, `fill`, and `d` for paths, with no external libraries.

LLawrence Card

85% match