Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fill & Stroke

Public visualization

Viewing a saved revision (read-only)

ed3c998828794b3ab3245ad2bb97b2af

Fill & Stroke

0 stars13🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Mar 15, 2021
Forked from SVG Fundamentals

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.

AI-generated description

A demonstration of SVG shapes.