Fork of Fill & Stroke

100%

Fork of Fill & Stroke

✓ Published0🌍 Public

Last edited Nov 25, 2023

Created on Nov 25, 2023

This example demonstrates a set of SVG shapes drawn inside a red-bordered container, with a focus on how fill and stroke styles affect their appearance. The rendering uses raw SVG path elements within an HTML document, applying filters and coordinate transformations to produce the visual effects. The shapes are constructed programmatically with precise path data, showcasing the manipulation of SVG attributes in a static, non-interactive visualization. The code relies on native SVG APIs and inline styling rather than external JavaScript libraries.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates two sets of SVG shapes arranged on a white canvas: a plain rectangle, circle, and abstract path on the left, and the same shapes on the right with white fills and black strokes of 12 pixels. The code uses raw SVG elements (rect, circle, path) with explicit coordinates and path data, and the rendering approach is visible in the static markup. The fork highlights the visual difference between unfilled shapes and those with fill and stroke attributes applied.

SSerendipitysX

90% match

Loading thumbnail…

Fork of Fill & Stroke

Four SVG shapes demonstrate the contrast between unfilled and filled forms with optional black outlines. Two rectangles and two circles, all rendered via raw SVG elements without JavaScript, sit on a white background. The first pair has no fill or stroke, while the second pair pairs a white fill with a 12-pixel black stroke to highlight how fill and stroke attributes alter shape visibility. This example uses static, hand-authored SVG markup as a minimal exploration of basic shape styling.

Bbusrabozkus

88% match

Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates the visual contrast between filled and stroked SVG shapes—a rectangle, circle, and triangulated path each appear twice, once with solid fill and once with a white fill and black stroke. The rendering uses raw SVG elements (`<rect>`, `<circle>`, `<path>`) within an inline `<svg>` tag, with a white background rectangle. No JavaScript libraries are employed; the geometry is defined statically in the markup, and the path coordinates are hardcoded. The piece shows how fill and stroke alter the perception of identical forms.

AAdriana Giraldo

88% match

Loading thumbnail…

Fork of Fill & Stroke

This example from the v3 gallery demonstrates SVG shape rendering through a static composition of rectangles. The code uses only native SVG elements—`rect` tags—positioned at varying coordinates on a green background, with some rectangles overlapping to create a layered visual effect. The rendering approach relies on inline SVG within an HTML document, specifying explicit width and height attributes for each shape. The fork shows how simple geometric primitives can be arranged to form a basic data-visualization aesthetic without additional JavaScript libraries or dynamic data sources.

NNixonthiyagesh-Hexa

88% match

Loading thumbnail…

Fork of Fill & Stroke

Three pairs of shapes—a rectangle, circle, and chevron-like path—demonstrate the contrast between default SVG fill behavior and explicit stroke styling. The first set renders with only black fill, while the second set adds a thick black stroke and white fill. The page uses raw SVG elements (`rect`, `circle`, `path`) directly in the HTML, with no external libraries. All shapes are drawn using basic geometric coordinates and path data on a 960×500 canvas, illustrating fundamental SVG rendering properties.

SSalahAnwer-dev

88% match

Loading thumbnail…

Fork of Fill & Stroke

Three pairs of SVG shapes—rectangles, circles, and triangular paths—demonstrate the visual difference between a default black fill and identical shapes with a white fill and black stroke. The top row uses plain fills, while the bottom row applies `stroke` and `stroke-width` attributes. Hand-coded path data with Bézier curves defines the triangle outlines. The static HTML page relies on raw Scalable Vector Graphics elements without any JavaScript libraries.

Kkavindubopitiya03@gmail.com

87% match

Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates how SVG can represent vector shapes through stroke and fill styling. It uses raw SVG path elements to draw a polyline, a filled triangular region, and a separate line segment. The code relies on the native SVG API, with paths defined by the `d` attribute and styled using inline presentation attributes like `fill="pink"`. No external JavaScript libraries are used; rendering occurs directly in the browser via SVG markup within an HTML document.

Aaksgooner

86% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a collection of basic SVG shapes arranged in an overlapping composition, including circles, rectangles, lines, and paths. The visualization uses raw SVG elements within an HTML document, with shapes styled through fill and stroke attributes. The code creates visual layering effects by placing semitransparent or fully opaque circles of different colors at various positions, alongside thickly stroked rectangles and geometric paths. The rendering relies entirely on the browser's native SVG support through the `<svg>` element, with no external JavaScript libraries or data sources involved.

Aadventuresenglish.info@gmail.com

85% match