SVG_fundamentals

100%

SVG_fundamentals

✓ Published0🌍 Public

Last edited May 27, 2022

Created on May 26, 2022

This example demonstrates two SVG rectangles with rounded corners, each filled using a linear gradient. The first rectangle uses a gradient defined by CSS classes within the SVG `<style>` block, while the second uses an inline gradient definition. Both gradients transition from red through transparent black to blue. The code relies on native SVG elements (`<defs>`, `<linearGradient>`, `<stop>`, `<rect>`) and CSS styling, with no external JavaScript libraries. The rendering is pure SVG embedded directly in the HTML document.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

SVG Fundamentals

A demonstration of basic SVG shapes includes a circle, line, and rectangle, each styled with stroke and fill. The rectangle uses a CSS transition and hover effect to change its color and stroke width. The example relies on SVG rendering with HTML and CSS, not on JavaScript libraries. The circle and line use default black fill and stroke, while the rectangle has a blue fill. The hover interaction, defined with `rect:hover` and a CSS transition, triggers visual feedback on the rectangle only.

KKaleb LaBarrie

80% match

Loading thumbnail…

Appearance

This example showcases fundamental SVG styling with two separate HTML documents. The first creates a gradient-filled rectangle using a linearGradient definition, a rounded rect element, and text, demonstrating how CSS-like stop colors and gradient coordinates work. The second document constructs a rainbow target from nine concentric circles, each filled with a distinct color, then covers half the shape with a white rectangle. Both use raw SVG elements and attributes in plain HTML, with no JavaScript or external libraries, to illustrate basic vector graphics appearances.

AAndrey Matukhno

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, including circles, a rectangle, and a line. It shows CSS-driven interactivity, where hovering over the rectangle triggers a green fill and expanded stroke width, with a smooth transition over three seconds. The code uses plain SVG elements within an HTML page, styled via CSS selectors like `rect:hover`, and relies on inline attributes such as `fill`, `stroke`, and `stroke-width`. No JavaScript or external libraries are involved; the rendering is purely static SVG with CSS transitions.

JJust-StyX

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—a red circle, a yellow rectangle with a blue stroke, and a navy line—rendered directly in an HTML page using the SVG namespace. It shows how CSS styling and inline presentation attributes control the visual appearance of these elements. The second lesson builds on this by adding a CSS `transition` to a rectangle, so hover interactions animate the fill color and stroke width over three seconds. The code uses plain SVG markup with CSS rules, not a JavaScript library like D3 or React.

Ddaigou65

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape and styling fundamentals using two circles with contrasting fills and stroke settings. One circle uses a black fill with black stroke and a CSS transition that enlarges its stroke width on hover over three seconds, while the second circle displays a grey fill with a white stroke of fixed five-pixel width. The code directly constructs SVG elements and applies CSS styling to the first circle.

TTianming Liu

80% match

Loading thumbnail…

SVG Fundamentals Demonstration

This demo shows raw SVG path commands and gradient fills without a data source, using only the SVG element and its built-in path syntax. Three stroked paths use relative and absolute coordinates (M, L, l) to draw diagonal lines with varying thickness and color. A nested `<svg>` contains a linearGradient definition applied to an ellipse, demonstrating how gradients can be referenced via `url(#grad1)`. The example serves purely as a technical reference for SVG shape construction and styling.

Kkwmcclintick

80% match