Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
BBen Gerber
Last edited Aug 22, 2024
Created on Aug 22, 2024
Forked from HTML Starter

This example demonstrates fundamental SVG graphics by rendering a single red rectangle with a thick black border in a 960x500 viewport. The visualization shows how CSS styling and hover interactions directly control SVG properties, with the rectangle smoothly transitioning to green and a thinner border over three seconds when hovered. The code uses inline CSS within an HTML page, employing the `transition` property and `:hover` pseudo-class to animate SVG element attributes, specifically targeting the `<rect>` element's `fill` and `stroke-width`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates fundamental SVG rendering by displaying a single red rectangle with a thick black border inside a 900-by-900 SVG canvas. The rectangle transitions over three seconds when hovered, changing its fill to green and expanding its stroke width, using CSS properties for both styling and animation. The code relies on basic SVG elements and CSS hover states, with no additional JavaScript libraries or data sources beyond the static markup.

OOscar Muindi
93% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering and styling using a single red rectangle with a black stroke on a 960-by-500 canvas. It shows how CSS transitions animate the rectangle’s fill color and stroke width over three seconds when hovered. The code directly uses the SVG `rect` element, CSS `:hover` pseudo-class, and the `transition` property in an HTML page with embedded styles. No JavaScript libraries are involved.

Sshyan
93% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a single red rectangle drawn on an SVG canvas, with CSS-driven hover effects that transition its fill color to green and expand its stroke width over three seconds. The page uses a minimal HTML structure with inline CSS styling and JavaScript-free SVG markup. The rectangle’s initial appearance is defined by the `rect` element’s `x`, `y`, `width`, and `height` attributes, while the CSS `transition` property animates the `fill` and `stroke-width` changes on hover. The code relies solely on basic SVG and CSS, without any external libraries.

LLukas731
91% match
Loading thumbnail…

SVG Fundementals1

A single blue rectangle with a thick navy border sits centered on an SVG canvas, demonstrating basic vector graphics styling. The CSS defines a `rect` selector with a blue stroke, navy fill, and 20-pixel stroke width, plus a 3000ms transition on all properties. Hovering the rectangle triggers a CSS `:hover` rule that changes the fill to red and increases the stroke width to 100 pixels, animating the change smoothly. This example shows how pure CSS can drive interactive SVG styling without any JavaScript libraries, using the native SVG `rect` element and CSS transitions.

Ddomiauer
91% match
Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG shapes and interactive CSS styling. It displays a red rectangle, a green-bordered circle, and a thick black line on an 800 by 800 canvas. The rectangle uses a CSS transition on all properties, causing its fill and stroke-width to animate over three seconds when hovered, turning green and widening its border. The code directly uses SVG elements (`rect`, `circle`, `line`) and CSS selectors, including a `rect:hover` pseudo-class and the `transition` property.

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

SVG fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, showing a green rectangle with a thick black outline and a blue path. The code uses raw SVG elements within an HTML page, including `circle`, `path`, and `rect`, and applies CSS transitions and `:hover` pseudo-classes to animate changes in stroke color, width, and path data. The rectangle transitions from green to red over eight seconds on hover, while the path’s stroke shifts to red and its `d` attribute morphs over two seconds, illustrating basic vector graphic interactivity and styling.

Aavia62490
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, showing how a single rectangle can be rendered with a yellow fill, black stroke, and thick stroke width. It also includes CSS-based hover interactions that change the rectangle's fill to red and its stroke to black. The visualization relies on the SVG `<rect>` element embedded directly in an HTML page, with styling handled through both inline attributes and a `<style>` block using CSS transitions. The rendering approach is pure SVG, with no external JavaScript libraries or data sources involved.

Aaksgooner
90% match