<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfect Freehand SVG Examples</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
}
h1, h2 {
text-align: center;
}
p {
text-align: center;
margin-bottom: 30px;
color: #555;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.example {
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.example:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.example h3 {
margin-top: 0;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #333;
}
.example-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.svg-container {
border: 1px solid #eee;
border-radius: 4px;
padding: 5px;
background-color: #fafafa;
}
.svg-container p {
margin: 0;
font-size: 12px;
color: #777;
text-align: center;
}
svg {
width: 100%;
height: auto;
display: block;
}
.section {
margin-bottom: 40px;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
.nav {
position: sticky;
top: 0;
background: #fff;
padding: 10px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 100;
}
.nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
}
.nav li {
margin: 5px 10px;
}
.nav a {
text-decoration: none;
color: #3498db;
font-weight: 500;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.2s;
}
.nav a:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>Perfect Freehand SVG Examples</h1>
<p>Comparison of different SVG rendering options from the Rust port of perfect-freehand</p>
<div class="nav">
<ul>
<li><a href="#inputs">Basic Examples</a></li>
<li><a href="#sample">Sample Drawing</a></li>
<li><a href="#flash">Flash Drawing</a></li>
<li><a href="#corners">Corners Drawing</a></li>
<li><a href="#edge-cases">Edge Cases</a></li>
</ul>
</div>
<div id="inputs" class="section">
<h2>Basic Examples (inputs.json)</h2>
<div class="section">
<h2>Many Points</h2>
<div class="grid">
<div class="example">
<h3>Standard - Fill</h3>
<div class="svg-container">
<object data="dist/manyPoints.svg" type="image/svg+xml"></object>
<p>manyPoints.svg</p>
</div>
</div>
<div class="example">
<h3>Standard - Stroke</h3>
<div class="svg-container">
<object data="dist/manyPoints_with_stroke.svg" type="image/svg+xml"></object>
<p>manyPoints_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Fill</h3>
<div class="svg-container">
<object data="dist/manyPoints_tapered.svg" type="image/svg+xml"></object>
<p>manyPoints_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Stroke</h3>
<div class="svg-container">
<object data="dist/manyPoints_tapered_with_stroke.svg" type="image/svg+xml"></object>
<p>manyPoints_tapered_with_stroke.svg</p>
</div>
</div>
</div>
</div>
<div class="section">
<h2>Number Pairs</h2>
<div class="grid">
<div class="example">
<h3>Standard - Fill</h3>
<div class="svg-container">
<object data="dist/numberPairs.svg" type="image/svg+xml"></object>
<p>numberPairs.svg</p>
</div>
</div>
<div class="example">
<h3>Standard - Stroke</h3>
<div class="svg-container">
<object data="dist/numberPairs_with_stroke.svg" type="image/svg+xml"></object>
<p>numberPairs_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Fill</h3>
<div class="svg-container">
<object data="dist/numberPairs_tapered.svg" type="image/svg+xml"></object>
<p>numberPairs_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Stroke</h3>
<div class="svg-container">
<object data="dist/numberPairs_tapered_with_stroke.svg" type="image/svg+xml"></object>
<p>numberPairs_tapered_with_stroke.svg</p>
</div>
</div>
</div>
</div>
<div class="section">
<h2>Object Pairs</h2>
<div class="grid">
<div class="example">
<h3>Standard - Fill</h3>
<div class="svg-container">
<object data="dist/objectPairs.svg" type="image/svg+xml"></object>
<p>objectPairs.svg</p>
</div>
</div>
<div class="example">
<h3>Standard - Stroke</h3>
<div class="svg-container">
<object data="dist/objectPairs_with_stroke.svg" type="image/svg+xml"></object>
<p>objectPairs_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Fill</h3>
<div class="svg-container">
<object data="dist/objectPairs_tapered.svg" type="image/svg+xml"></object>
<p>objectPairs_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Stroke</h3>
<div class="svg-container">
<object data="dist/objectPairs_tapered_with_stroke.svg" type="image/svg+xml"></object>
<p>objectPairs_tapered_with_stroke.svg</p>
</div>
</div>
</div>
</div>
<div class="section">
<h2>With Duplicates</h2>
<div class="grid">
<div class="example">
<h3>Standard - Fill</h3>
<div class="svg-container">
<object data="dist/withDuplicates.svg" type="image/svg+xml"></object>
<p>withDuplicates.svg</p>
</div>
</div>
<div class="example">
<h3>Standard - Stroke</h3>
<div class="svg-container">
<object data="dist/withDuplicates_with_stroke.svg" type="image/svg+xml"></object>
<p>withDuplicates_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Fill</h3>
<div class="svg-container">
<object data="dist/withDuplicates_tapered.svg" type="image/svg+xml"></object>
<p>withDuplicates_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered - Stroke</h3>
<div class="svg-container">
<object data="dist/withDuplicates_tapered_with_stroke.svg" type="image/svg+xml"></object>
<p>withDuplicates_tapered_with_stroke.svg</p>
</div>
</div>
</div>
</div>
</div>
<div id="sample" class="section">
<h2>Sample Drawing (sample.json)</h2>
<div class="grid">
<div class="example">
<h3>Default</h3>
<div class="svg-container">
<object data="dist/sample_default.svg" type="image/svg+xml"></object>
<p>sample_default.svg</p>
</div>
</div>
<div class="example">
<h3>Default with Stroke</h3>
<div class="svg-container">
<object data="dist/sample_default_stroke.svg" type="image/svg+xml"></object>
<p>sample_default_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered</h3>
<div class="svg-container">
<object data="dist/sample_default_tapered.svg" type="image/svg+xml"></object>
<p>sample_default_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered with Stroke</h3>
<div class="svg-container">
<object data="dist/sample_default_tapered_stroke.svg" type="image/svg+xml"></object>
<p>sample_default_tapered_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Thin</h3>
<div class="svg-container">
<object data="dist/sample_thin.svg" type="image/svg+xml"></object>
<p>sample_thin.svg</p>
</div>
</div>
<div class="example">
<h3>Thin with Stroke</h3>
<div class="svg-container">
<object data="dist/sample_thin_stroke.svg" type="image/svg+xml"></object>
<p>sample_thin_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Thick</h3>
<div class="svg-container">
<object data="dist/sample_thick.svg" type="image/svg+xml"></object>
<p>sample_thick.svg</p>
</div>
</div>
<div class="example">
<h3>Thick with Stroke</h3>
<div class="svg-container">
<object data="dist/sample_thick_stroke.svg" type="image/svg+xml"></object>
<p>sample_thick_stroke.svg</p>
</div>
</div>
</div>
</div>
<div id="flash" class="section">
<h2>Flash Drawing (flash.json)</h2>
<div class="grid">
<div class="example">
<h3>Default</h3>
<div class="svg-container">
<object data="dist/flash_default.svg" type="image/svg+xml"></object>
<p>flash_default.svg</p>
</div>
</div>
<div class="example">
<h3>Default with Stroke</h3>
<div class="svg-container">
<object data="dist/flash_default_stroke.svg" type="image/svg+xml"></object>
<p>flash_default_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered</h3>
<div class="svg-container">
<object data="dist/flash_default_tapered.svg" type="image/svg+xml"></object>
<p>flash_default_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered with Stroke</h3>
<div class="svg-container">
<object data="dist/flash_default_tapered_stroke.svg" type="image/svg+xml"></object>
<p>flash_default_tapered_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Simulated Pressure</h3>
<div class="svg-container">
<object data="dist/flash_simulated.svg" type="image/svg+xml"></object>
<p>flash_simulated.svg</p>
</div>
</div>
<div class="example">
<h3>Simulated Pressure with Stroke</h3>
<div class="svg-container">
<object data="dist/flash_simulated_stroke.svg" type="image/svg+xml"></object>
<p>flash_simulated_stroke.svg</p>
</div>
</div>
</div>
</div>
<div id="corners" class="section">
<h2>Corners Drawing (corners.json)</h2>
<div class="grid">
<div class="example">
<h3>Default</h3>
<div class="svg-container">
<object data="dist/corners_default.svg" type="image/svg+xml"></object>
<p>corners_default.svg</p>
</div>
</div>
<div class="example">
<h3>Default with Stroke</h3>
<div class="svg-container">
<object data="dist/corners_default_stroke.svg" type="image/svg+xml"></object>
<p>corners_default_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered</h3>
<div class="svg-container">
<object data="dist/corners_default_tapered.svg" type="image/svg+xml"></object>
<p>corners_default_tapered.svg</p>
</div>
</div>
<div class="example">
<h3>Tapered with Stroke</h3>
<div class="svg-container">
<object data="dist/corners_default_tapered_stroke.svg" type="image/svg+xml"></object>
<p>corners_default_tapered_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Thick</h3>
<div class="svg-container">
<object data="dist/corners_thick.svg" type="image/svg+xml"></object>
<p>corners_thick.svg</p>
</div>
</div>
<div class="example">
<h3>Thick with Stroke</h3>
<div class="svg-container">
<object data="dist/corners_thick_stroke.svg" type="image/svg+xml"></object>
<p>corners_thick_stroke.svg</p>
</div>
</div>
</div>
</div>
<div id="edge-cases" class="section">
<h2>Edge Cases</h2>
<div class="grid">
<div class="example">
<h3>One Point</h3>
<div class="svg-container">
<object data="dist/onePoint.svg" type="image/svg+xml"></object>
<p>onePoint.svg</p>
</div>
</div>
<div class="example">
<h3>One Point - Stroke</h3>
<div class="svg-container">
<object data="dist/onePoint_with_stroke.svg" type="image/svg+xml"></object>
<p>onePoint_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Two Points</h3>
<div class="svg-container">
<object data="dist/twoPoints.svg" type="image/svg+xml"></object>
<p>twoPoints.svg</p>
</div>
</div>
<div class="example">
<h3>Two Points - Stroke</h3>
<div class="svg-container">
<object data="dist/twoPoints_with_stroke.svg" type="image/svg+xml"></object>
<p>twoPoints_with_stroke.svg</p>
</div>
</div>
<div class="example">
<h3>Two Equal Points</h3>
<div class="svg-container">
<object data="dist/twoEqualPoints.svg" type="image/svg+xml"></object>
<p>twoEqualPoints.svg</p>
</div>
</div>
<div class="example">
<h3>Two Equal Points - Stroke</h3>
<div class="svg-container">
<object data="dist/twoEqualPoints_with_stroke.svg" type="image/svg+xml"></object>
<p>twoEqualPoints_with_stroke.svg</p>
</div>
</div>
</div>
</div>
</body>
</html>