Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fill & Stroke

Public visualization

Viewing a saved revision (read-only)

3e2259a129ed4837b446c84d1fc18c27

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.