Perfect Freehand SVG Examples

Basic Examples (inputs.json)

Many Points

Standard - Fill

manyPoints.svg

Standard - Stroke

manyPoints_with_stroke.svg

Tapered - Fill

manyPoints_tapered.svg

Tapered - Stroke

manyPoints_tapered_with_stroke.svg

Number Pairs

Standard - Fill

numberPairs.svg

Standard - Stroke

numberPairs_with_stroke.svg

Tapered - Fill

numberPairs_tapered.svg

Tapered - Stroke

numberPairs_tapered_with_stroke.svg

Object Pairs

Standard - Fill

objectPairs.svg

Standard - Stroke

objectPairs_with_stroke.svg

Tapered - Fill

objectPairs_tapered.svg

Tapered - Stroke

objectPairs_tapered_with_stroke.svg

With Duplicates

Standard - Fill

withDuplicates.svg

Standard - Stroke

withDuplicates_with_stroke.svg

Tapered - Fill

withDuplicates_tapered.svg

Tapered - Stroke

withDuplicates_tapered_with_stroke.svg

Sample Drawing (sample.json)

Default

sample_default.svg

Default with Stroke

sample_default_stroke.svg

Tapered

sample_default_tapered.svg

Tapered with Stroke

sample_default_tapered_stroke.svg

Thin

sample_thin.svg

Thin with Stroke

sample_thin_stroke.svg

Thick

sample_thick.svg

Thick with Stroke

sample_thick_stroke.svg

Flash Drawing (flash.json)

Default

flash_default.svg

Default with Stroke

flash_default_stroke.svg

Tapered

flash_default_tapered.svg

Tapered with Stroke

flash_default_tapered_stroke.svg

Simulated Pressure

flash_simulated.svg

Simulated Pressure with Stroke

flash_simulated_stroke.svg

Corners Drawing (corners.json)

Default

corners_default.svg

Default with Stroke

corners_default_stroke.svg

Tapered

corners_default_tapered.svg

Tapered with Stroke

corners_default_tapered_stroke.svg

Thick

corners_thick.svg

Thick with Stroke

corners_thick_stroke.svg

Edge Cases

One Point

onePoint.svg

One Point - Stroke

onePoint_with_stroke.svg

Two Points

twoPoints.svg

Two Points - Stroke

twoPoints_with_stroke.svg

Two Equal Points

twoEqualPoints.svg

Two Equal Points - Stroke

twoEqualPoints_with_stroke.svg