Fill & Stroke

100%

✓ Published0🌍 Public

Last edited Aug 29, 2024

Created on Aug 29, 2024

The gallery displays two sets of geometric shapes—rectangles, circles, and curved paths—positioned on a blank 960×500 SVG canvas. The first grouping renders with default black fills and no strokes, while the second demonstrates fill and stroke styling using white fills and thick black outlines. Curved path elements appear as interconnected arcs and irregular polygons, defined by explicit cubic Bézier coordinates. The example is authored by veli-tetik, rendered as standalone SVG markup, and uses no external libraries, relying solely on native SVG shape elements and their presentation attributes.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fill & Stroke

This example demonstrates the difference between SVG shapes with default fill and stroke rendering and shapes with explicit white fills and black outlines. The top row shows rectangles, circles, and paths filled with black by default, while the bottom row applies white fill and a 12-pixel black stroke to identical shapes. A small arrow-like path appears within one shape to show layered fills. The visualization uses raw SVG elements defined directly in HTML, with no external libraries.

CCurran Kelleher

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

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

85% match

Loading thumbnail…

Fork of Fill & Stroke

Two side-by-side pairs of geometric shapes—a rectangle, circle, and irregular polygon—demonstrate the visual difference between a solid fill and a combined fill-and-stroke treatment. The top row uses default black fills, while the lower row applies a white fill with a thick black stroke, as defined by SVG presentation attributes. The irregular polygons are hand-coded Bézier paths with explicit control-point coordinates, not generated by a data library. This static SVG example relies on direct markup, with no JavaScript or external visualization APIs.

Cchristian_musiol@arcor.de

85% match

Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates the difference between shapes with default black fill and no stroke, and shapes with white fill and a black stroke, using SVG primitives. It shows rectangles, circles, and custom paths created with cubic Bézier curves, all rendered on a 960 by 500 canvas. The code uses raw SVG elements like `rect`, `circle`, and `path` directly in an HTML file, with no external libraries, and includes both unfilled and stroked versions of each shape for comparison.

PPratik Raja

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

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

83% match

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

83% match