Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
TTianming Liu
Last edited Dec 20, 2023
Created on Dec 20, 2023
Forked from HTML Starter

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.

AI-generated description

A demonstration of basic svg elements.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

A demonstration of basic SVG shapes, with two circles of different positions and styling. The first circle uses default black fill, while the second is explicitly colored red with a black stroke. The example shows how SVG elements are declared directly in HTML markup, using circle elements with cx, cy, and r attributes to define geometry, and fill and stroke properties for visual appearance. The rendering is static SVG without any JavaScript libraries or data binding.

AAndré Shamsabadi
88% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG shape styling and interaction, using a single red circle with a thick black stroke on a plain background. Hovering over the circle triggers a CSS transition that gradually changes its fill to green and expands its stroke width over three seconds. The implementation relies on inline SVG elements within an HTML page, styled entirely through CSS, while the accompanying JavaScript uses `select` from D3 version 7 to replace the body's text content, showing a minimal D3 setup.

Aayo
87% 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
87% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape styling and interactivity through two circles rendered directly in an HTML document. The first circle uses static attributes for fill, stroke, and stroke-width, while the second employs a CSS class with a hover effect that transitions its fill color and adds a stroke over 300 milliseconds. The code uses plain SVG elements, CSS transitions, and inline JavaScript-free markup within a React-free environment, with the SVG canvas placed directly in the body alongside text.

NNico-Nico
87% 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 SVG fundamentals with two circles rendered inline in an HTML document. The first circle uses default black fill, while the second is explicitly styled with a red fill. The code directly embeds SVG elements using the `<svg>`, `<circle>`, and `fill` attribute, showing basic shape creation and styling without any JavaScript libraries. Both circles are positioned via `cx` and `cy` coordinates with a radius of 50, illustrating how SVG primitives render visually in a browser.

AAjay Pathak
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG shapes using two circles rendered directly in a web page. It shows how circles can be drawn with default styling and explicit `fill` attributes, with the first circle appearing in black and the second in red. The visualization relies on raw SVG markup within an HTML document, without any JavaScript libraries, and uses the `cx`, `cy`, and `r` attributes to position and size each shape.

SSarah Miller
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, using inline SVG elements with circles and rectangles to compose a simple visual arrangement. It shows how CSS properties like fill, stroke, and stroke-width are applied to SVG shapes, with a transition effect on the rectangle. The code uses plain SVG tags (circle, rect) styled via a `<style>` block in the HTML document, featuring circle pairs with varying radii and a single rectangle that changes its fill color and stroke width when hovered. The rendering approach is static SVG markup with no JavaScript interactivity beyond CSS hover animations.

Ssukumardunn
86% match