2964 lines
234 KiB
HTML
2964 lines
234 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🧮 Soroban Templates - Complete Gallery</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding: 40px 20px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stats {
|
|
background: white;
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-info {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Tab system */
|
|
.tabs {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.tab-nav {
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.tab-button {
|
|
flex: 1;
|
|
padding: 20px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #666;
|
|
transition: all 0.3s;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
background: #f8f9fa;
|
|
color: #333;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: #2c3e50;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.tab-button.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: #3498db;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: 30px;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
|
|
.example-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.example-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.crop-comparison-card {
|
|
grid-column: 1 / -1;
|
|
max-width: none;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.card-description {
|
|
color: #666;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.config-details {
|
|
background: #f8f9fa;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.config-details strong {
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.config-details code {
|
|
background: #e9ecef;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
color: #d63384;
|
|
}
|
|
|
|
.card-content {
|
|
padding: 20px;
|
|
text-align: center;
|
|
min-height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
}
|
|
|
|
/* Crop comparison styles */
|
|
.crop-comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.comparison-side {
|
|
padding: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.comparison-side.before {
|
|
background: #ffeaa7;
|
|
border-right: 3px solid #fdcb6e;
|
|
}
|
|
|
|
.comparison-side.after {
|
|
background: #a8e6cf;
|
|
}
|
|
|
|
.side-label {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.before .side-label {
|
|
background: #e17055;
|
|
}
|
|
|
|
.after .side-label {
|
|
background: #00b894;
|
|
}
|
|
|
|
.svg-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.svg-container svg {
|
|
width: auto;
|
|
height: auto;
|
|
max-height: 400px;
|
|
border: 2px solid rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
background: white;
|
|
/* Maintain actual proportions to show cropping effect */
|
|
}
|
|
|
|
.viewbox-info {
|
|
margin-top: 15px;
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
text-align: center;
|
|
background: rgba(255,255,255,0.8);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.crop-stats {
|
|
padding: 20px;
|
|
text-align: center;
|
|
background: #2c3e50;
|
|
color: white;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
padding: 30px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
color: #666;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tab-nav {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.crop-comparison {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.comparison-side.before {
|
|
border-right: none;
|
|
border-bottom: 3px solid #fdcb6e;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🧮 Soroban Templates - Complete Gallery</h1>
|
|
<p>Comprehensive showcase of template renderings, crop marks, and automated viewBox processing</p>
|
|
<p style="font-size: 0.9rem; color: #999;">
|
|
Generated from actual Typst templates using <code>@soroban/templates</code>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stats-info">
|
|
<strong>13</strong> examples rendered
|
|
• Generated on 10/19/2025 at 2:34:30 AM
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab-nav">
|
|
<button class="tab-button active" onclick="switchTab(event, 'basic')">
|
|
📚 Basic Examples
|
|
</button>
|
|
<button class="tab-button" onclick="switchTab(event, 'crop')">
|
|
✂️ Crop Marks
|
|
</button>
|
|
<button class="tab-button" onclick="switchTab(event, 'debug')">
|
|
🔧 Debug Tools
|
|
</button>
|
|
</div>
|
|
|
|
<div id="basic" class="tab-content active">
|
|
<h2 style="margin-bottom: 20px; color: #2c3e50;">📚 Basic Template Examples</h2>
|
|
<p style="margin-bottom: 30px; color: #666;">Core soroban representations showcasing different configurations, bead shapes, and color schemes.</p>
|
|
<div class="gallery">
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Basic Number 5</div>
|
|
<div class="card-description">Simple representation of 5 with monochrome diamonds</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>5</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>monochrome</code><br><strong>base_size:</strong> <code>1.5</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 200 180" width="200pt" height="180pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 180 L 200 180 L 200 0 Z "/>
|
|
<g>
|
|
<g transform="translate(81.25 2.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(16.5 26)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 104.25 L 4.5 104.25 L 4.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 26)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 56)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 74.75)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 93.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 112.25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 45)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 3 L 37.5 3 L 37.5 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Colorful 123</div>
|
|
<div class="card-description">Number 123 with place-value colors and diamond beads</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>123</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>place-value</code><br><strong>base_size:</strong> <code>1.2</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 288 150" width="288pt" height="150pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 150 L 288 150 L 288 0 Z "/>
|
|
<g>
|
|
<g transform="translate(99 4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(13.200000000000001 13.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 92.6 L 3.6 92.6 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(4.920000000000001 13.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.920000000000001 39.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.920000000000001 61.800000000000004)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.920000000000001 76.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.920000000000001 91.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.199999999999996 13.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 92.6 L 3.6 92.6 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(34.92 13.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.92 39.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.92 54.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.92 76.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.92 91.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.2 13.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 92.6 L 3.6 92.6 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(64.92 13.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(64.92 39.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(64.92 54.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(64.92 69.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(64.92 91.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 10.08 0 L 20.16 7.2 L 10.08 14.4 L 0 7.2 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 36)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.4 L 90 2.4 L 90 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Circle Beads - 42</div>
|
|
<div class="card-description">Number 42 with circular beads and heaven-earth colors</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>42</code><br>
|
|
<strong>bead_shape:</strong> <code>circle</code><br><strong>color_scheme:</strong> <code>heaven-earth</code><br><strong>base_size:</strong> <code>1.8</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 288 216" width="288pt" height="216pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 216 L 288 216 L 288 0 Z "/>
|
|
<g>
|
|
<g transform="translate(99 4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(19.8 24.399999999999995)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 123.3 L 5.4 123.3 L 5.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(11.7 24.399999999999995)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(11.7 58.599999999999994)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(11.7 81.1)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(11.7 103.6)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(11.7 126.10000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(64.8 24.399999999999995)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 130.4 L 5.4 130.4 L 5.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(56.699999999999996 24.399999999999995)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(56.699999999999996 58.599999999999994)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(56.699999999999996 81.1)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(56.699999999999996 110.7)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(56.699999999999996 133.20000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 10.8 C 0 4.8407326 4.8407326 0 10.8 0 C 16.759268 0 21.6 4.8407326 21.6 10.8 C 21.6 16.759268 16.759268 21.6 10.8 21.6 C 4.8407326 21.6 0 16.759268 0 10.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 54)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 3.6 L 90 3.6 L 90 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Large Scale - 7</div>
|
|
<div class="card-description">Single digit with maximum scale for detail work</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>7</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>place-value</code><br><strong>base_size:</strong> <code>2.5</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 200 300" width="200pt" height="300pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 300 L 200 300 L 200 0 Z "/>
|
|
<g>
|
|
<g transform="translate(68.75 7.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(27.5 44)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 167.5 L 7.5 167.5 L 7.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(10.25 44)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 21 0 L 42 15 L 21 30 L 0 15 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(10.25 81)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 21 0 L 42 15 L 21 30 L 0 15 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(10.25 112.25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 21 0 L 42 15 L 21 30 L 0 15 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(10.25 150.25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 21 0 L 42 15 L 21 30 L 0 15 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(10.25 181.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 21 0 L 42 15 L 21 30 L 0 15 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 75)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 5 L 62.5 5 L 62.5 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Compact 999</div>
|
|
<div class="card-description">Large number with hidden inactive beads for clean look</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>999</code><br>
|
|
<strong>bead_shape:</strong> <code>square</code><br><strong>color_scheme:</strong> <code>alternating</code><br><strong>hide_inactive:</strong> <code>true</code><br><strong>base_size:</strong> <code>1</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 240 150" width="240pt" height="150pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 150 L 240 150 L 240 0 Z "/>
|
|
<g>
|
|
<g transform="translate(82.5 15)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(11 17)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 65.5 L 3 65.5 L 3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 17)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 17)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(6.5 33)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 33)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(6.5 45.5)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 45.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(6.5 58)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 58)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(6.5 70.5)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(6.5 70.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(36 17)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 65.5 L 3 65.5 L 3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 17)">
|
|
<path class="typst-shape" fill="#43a047" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 17)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(31.5 33)">
|
|
<path class="typst-shape" fill="#43a047" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 33)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(31.5 45.5)">
|
|
<path class="typst-shape" fill="#43a047" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 45.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(31.5 58)">
|
|
<path class="typst-shape" fill="#43a047" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 58)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(31.5 70.5)">
|
|
<path class="typst-shape" fill="#43a047" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(31.5 70.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(61 17)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 65.5 L 3 65.5 L 3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 17)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 17)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(56.5 33)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 33)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(56.5 45.5)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 45.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(56.5 58)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 58)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(56.5 70.5)">
|
|
<path class="typst-shape" fill="#1e88e5" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 Z "/>
|
|
</g>
|
|
<g transform="translate(56.5 70.5)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 11.25 0 C 11.664213 0 12 0.33578643 12 0.75 L 12 11.25 C 12 11.664213 11.664213 12 11.25 12 L 0.75 12 C 0.33578643 12 0 11.664213 0 11.25 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(0 30)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2 L 75 2 L 75 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Educational 1234</div>
|
|
<div class="card-description">Four-digit number showing empty columns for learning</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>1234</code><br>
|
|
<strong>bead_shape:</strong> <code>circle</code><br><strong>color_scheme:</strong> <code>place-value</code><br><strong>show_empty:</strong> <code>true</code><br><strong>base_size:</strong> <code>1.3</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 416 156" width="416pt" height="156pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 156 L 416 156 L 416 0 Z "/>
|
|
<g>
|
|
<g transform="translate(143 1.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(14.299999999999999 15.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 98.9 L 3.9 98.9 L 3.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(8.450000000000001 15.400000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(8.450000000000001 42.6)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(8.450000000000001 66.20000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(8.450000000000001 82.45000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(8.450000000000001 98.70000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(46.800000000000004 15.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 98.9 L 3.9 98.9 L 3.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(40.949999999999996 15.400000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(40.949999999999996 42.6)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(40.949999999999996 58.849999999999994)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(40.949999999999996 82.45)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(40.949999999999996 98.7)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(79.3 15.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 98.9 L 3.9 98.9 L 3.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(73.45 15.400000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.45 42.6)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.45 58.849999999999994)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.45 75.1)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.45 98.7)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(111.8 15.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 91.55 L 3.9 91.55 L 3.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(105.95 15.400000000000002)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(105.95 42.6)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(105.95 58.849999999999994)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(105.95 75.1)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(105.95 91.35)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.8 C 0 3.4960847 3.4960847 0 7.8 0 C 12.103915 0 15.6 3.4960847 15.6 7.8 C 15.6 12.103915 12.103915 15.6 7.8 15.6 C 3.4960847 15.6 0 12.103915 0 7.8 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 39)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.6 L 130 2.6 L 130 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crop" class="tab-content">
|
|
<h2 style="margin-bottom: 20px; color: #2c3e50;">✂️ Crop Marks & ViewBox Processing</h2>
|
|
<p style="margin-bottom: 30px; color: #666;">Examples demonstrating automatic crop mark placement and viewBox optimization. Each example shows before/after comparison with size reduction statistics.</p>
|
|
<div class="gallery">
|
|
|
|
<div class="example-card crop-comparison-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Crop Marks: Single Digit</div>
|
|
<div class="card-description">Invisible crop marks for automated viewBox processing</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>1</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>monochrome</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>10pt</code><br><strong>base_size:</strong> <code>1</code>
|
|
</div>
|
|
</div>
|
|
<div class="crop-comparison">
|
|
<div class="comparison-side before">
|
|
<div class="side-label">🎯 Before: Original ViewBox</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="0 0 216 166" width="216pt" height="166pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 166 L 216 166 L 216 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95.5 23)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(11 10)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 80 L 3 80 L 3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 10)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 33)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 53)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 65.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 78)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 30)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2 L 25 2 L 25 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 136.4 L 0.5 136.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(41.800000000000004 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 136.4 L 0.5 136.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 58.6 0.5 L 58.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 124.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 58.6 0.5 L 58.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 29.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(41.800000000000004 29.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(11 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(11 124.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 216 166"</div>
|
|
</div>
|
|
<div class="comparison-side after">
|
|
<div class="side-label">✂️ After: Crop Mark Processed</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="78.7 11 58.60000000000001 136.39999999999998" width="58.60000000000001pt" height="136.39999999999998pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 166 L 216 166 L 216 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95.5 23)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(11 10)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 80 L 3 80 L 3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 10)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 33)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 53)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 65.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(4.1000000000000005 78)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 30)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2 L 25 2 L 25 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 136.4 L 0.5 136.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(41.800000000000004 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 136.4 L 0.5 136.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 58.6 0.5 L 58.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 124.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 58.6 0.5 L 58.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-16.8 29.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(41.800000000000004 29.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(11 -12)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(11 124.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="78.7 11 58.60000000000001 136.39999999999998"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 86%
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card crop-comparison-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Crop Marks: Four 9s</div>
|
|
<div class="card-description">Large four-digit number with crop boundaries</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>9999</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>place-value</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>15pt</code><br><strong>base_size:</strong> <code>0.8</code>
|
|
</div>
|
|
</div>
|
|
<div class="crop-comparison">
|
|
<div class="comparison-side before">
|
|
<div class="side-label">🎯 Before: Original ViewBox</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="0 0 276 170" width="276pt" height="170pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 170 L 276 170 L 276 0 Z "/>
|
|
<g>
|
|
<g transform="translate(98 36)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(8.799999999999999 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(28.8 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(48.800000000000004 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 13.400000000000002)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 26.599999999999998)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 36.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 46.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 56.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(68.8 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(0 24)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 1.6 L 80 1.6 L 80 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 78.4 L 0.5 78.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(89.60000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 78.4 L 0.5 78.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 99.2 0.5 L 99.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 78.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 99.2 0.5 L 99.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 23.3)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(89.60000000000001 23.3)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(38.5 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(38.5 78.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 276 170"</div>
|
|
</div>
|
|
<div class="comparison-side after">
|
|
<div class="side-label">✂️ After: Crop Mark Processed</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="88.4 36 99.20000000000002 78.39999999999999" width="99.20000000000002pt" height="78.39999999999999pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 170 L 276 170 L 276 0 Z "/>
|
|
<g>
|
|
<g transform="translate(98 36)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(8.799999999999999 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(5.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#6a994e" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(5.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(28.8 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(25.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(25.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(48.800000000000004 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 13.400000000000002)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 26.599999999999998)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 36.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 46.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 56.599999999999994)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(45.199999999999996 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(68.8 13.400000000000002)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 52.8 L 2.4 52.8 L 2.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 13.400000000000002)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 26.599999999999998)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 36.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 46.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(65.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" d="M 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 Z "/>
|
|
</g>
|
|
<g transform="translate(65.2 56.599999999999994)">
|
|
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0.75 0 L 8.85 0 C 9.264214 0 9.6 0.33578643 9.6 0.75 L 9.6 8.85 C 9.6 9.264214 9.264214 9.6 8.85 9.6 L 0.75 9.6 C 0.33578643 9.6 0 9.264214 0 8.85 L 0 0.75 C 0 0.33578643 0.33578643 0 0.75 0 "/>
|
|
</g>
|
|
<g transform="translate(0 24)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 1.6 L 80 1.6 L 80 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 78.4 L 0.5 78.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(89.60000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 78.4 L 0.5 78.4 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 99.2 0.5 L 99.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 78.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 99.2 0.5 L 99.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-9.6 23.3)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(89.60000000000001 23.3)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(38.5 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(38.5 78.39999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="88.4 36 99.20000000000002 78.39999999999999"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 86%
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card crop-comparison-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Crop Marks: Large Zero</div>
|
|
<div class="card-description">Zero representation with large scale and crop marks</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>0</code><br>
|
|
<strong>bead_shape:</strong> <code>square</code><br><strong>color_scheme:</strong> <code>monochrome</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>20pt</code><br><strong>base_size:</strong> <code>2</code>
|
|
</div>
|
|
</div>
|
|
<div class="crop-comparison">
|
|
<div class="comparison-side before">
|
|
<div class="side-label">🎯 Before: Original ViewBox</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="0 0 240 280" width="240pt" height="280pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 280 L 240 280 L 240 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95 25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(22 28)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 143 L 6 143 L 6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(13 28)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 72)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 97)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 122)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 147)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 60)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 4 L 50 4 L 50 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 196 L 0.5 196 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(74 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 196 L 0.5 196 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 98 0.5 L 98 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 196)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 98 0.5 L 98 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 60.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(74 60.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(23.5 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(23.5 196)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 240 280"</div>
|
|
</div>
|
|
<div class="comparison-side after">
|
|
<div class="side-label">✂️ After: Crop Mark Processed</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="71 25 98 196" width="98pt" height="196pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 280 L 240 280 L 240 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95 25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(22 28)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 143 L 6 143 L 6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(13 28)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 72)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 97)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 122)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(13 147)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 12 C 0 5.378592 5.378592 0 12 0 C 18.621408 0 24 5.378592 24 12 C 24 18.621408 18.621408 24 12 24 C 5.378592 24 0 18.621408 0 12 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 60)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 4 L 50 4 L 50 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 196 L 0.5 196 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(74 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 196 L 0.5 196 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 98 0.5 L 98 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 196)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 98 0.5 L 98 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-24 60.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(74 60.5)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(23.5 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(23.5 196)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="71 25 98 196"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 66%
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card crop-comparison-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Crop Marks: Hidden Inactive</div>
|
|
<div class="card-description">Clean layout with hidden inactive beads and crop marks</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>555</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>alternating</code><br><strong>hide_inactive:</strong> <code>true</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>10pt</code><br><strong>base_size:</strong> <code>1.5</code>
|
|
</div>
|
|
</div>
|
|
<div class="crop-comparison">
|
|
<div class="comparison-side before">
|
|
<div class="side-label">🎯 Before: Original ViewBox</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="0 0 366 198" width="366pt" height="198pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 198 L 366 198 L 366 0 Z "/>
|
|
<g>
|
|
<g transform="translate(130.5 17)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(15.4 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(5.740000000000002 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(50.4 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(40.74 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(85.39999999999999 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(75.74 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 42)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.8 L 105 2.8 L 105 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 190.96 L 0.5 190.96 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(128.51999999999998 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 190.96 L 0.5 190.96 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 152.04 0.5 L 152.04 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 174.16)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 152.04 0.5 L 152.04 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 41.9)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(128.51999999999998 41.9)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(51 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(51 174.16)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 366 198"</div>
|
|
</div>
|
|
<div class="comparison-side after">
|
|
<div class="side-label">✂️ After: Crop Mark Processed</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="106.98 0.20000000000000995 152.03999999999996 190.95999999999998" width="152.03999999999996pt" height="190.95999999999998pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 198 L 366 198 L 366 0 Z "/>
|
|
<g>
|
|
<g transform="translate(130.5 17)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(15.4 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(5.740000000000002 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(50.4 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(40.74 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(85.39999999999999 24.199999999999996)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 19.2 L 4.2 19.2 L 4.2 0 Z "/>
|
|
</g>
|
|
<g transform="translate(75.74 24.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 11.76 0 L 23.52 8.4 L 11.76 16.8 L 0 8.4 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 42)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.8 L 105 2.8 L 105 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 190.96 L 0.5 190.96 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(128.51999999999998 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 190.96 L 0.5 190.96 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 152.04 0.5 L 152.04 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 174.16)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 152.04 0.5 L 152.04 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-23.519999999999996 41.9)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(128.51999999999998 41.9)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(51 -16.79999999999999)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(51 174.16)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="106.98 0.20000000000000995 152.03999999999996 190.95999999999998"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 49%
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card crop-comparison-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Crop Marks: Mixed Geometry</div>
|
|
<div class="card-description">Circle beads with heaven-earth colors and crop boundaries</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>321</code><br>
|
|
<strong>bead_shape:</strong> <code>circle</code><br><strong>color_scheme:</strong> <code>heaven-earth</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>12pt</code><br><strong>base_size:</strong> <code>1.3</code>
|
|
</div>
|
|
</div>
|
|
<div class="crop-comparison">
|
|
<div class="comparison-side before">
|
|
<div class="side-label">🎯 Before: Original ViewBox</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="0 0 274 160" width="274pt" height="160pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 160 L 274 160 L 274 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95.75 14.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(12.100000000000001 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 49.949999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 63.69999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(39.60000000000001 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 49.949999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 71.14999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.10000000000002 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 57.39999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 71.14999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 33)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.2 L 82.5 2.2 L 82.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 107.8 L 0.5 107.8 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(95.70000000000002 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 107.8 L 0.5 107.8 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 108.9 0.5 L 108.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 107.8)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 108.9 0.5 L 108.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 32.6)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(95.70000000000002 32.6)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(39.75000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(39.75000000000001 107.8)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 274 160"</div>
|
|
</div>
|
|
<div class="comparison-side after">
|
|
<div class="side-label">✂️ After: Crop Mark Processed</div>
|
|
<div class="svg-container"><svg class="typst-doc" viewBox="82.55 14.5 108.90000000000002 107.8" width="108.90000000000002pt" height="107.8pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 160 L 274 160 L 274 0 Z "/>
|
|
<g>
|
|
<g transform="translate(95.75 14.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(12.100000000000001 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 49.949999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 63.69999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.150000000000001 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(39.60000000000001 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 49.949999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 71.14999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(34.650000000000006 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.10000000000002 11.8)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 86.3 L 3.3 86.3 L 3.3 0 Z "/>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 11.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 36.199999999999996)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 57.39999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 71.14999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(62.15000000000001 84.89999999999999)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 6.6 C 0 2.9582255 2.9582255 0 6.6 0 C 10.241775 0 13.2 2.9582255 13.2 6.6 C 13.2 10.241775 10.241775 13.2 6.6 13.2 C 2.9582255 13.2 0 10.241775 0 6.6 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 33)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.2 L 82.5 2.2 L 82.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 107.8 L 0.5 107.8 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(95.70000000000002 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 107.8 L 0.5 107.8 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 108.9 0.5 L 108.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 107.8)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 108.9 0.5 L 108.9 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-13.200000000000001 32.6)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(95.70000000000002 32.6)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(39.75000000000001 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(39.75000000000001 107.8)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="82.55 14.5 108.90000000000002 107.8"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 79%
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="debug" class="tab-content">
|
|
<h2 style="margin-bottom: 20px; color: #2c3e50;">🔧 Debug & Development Tools</h2>
|
|
<p style="margin-bottom: 30px; color: #666;">Debug examples with visible crop marks for development and testing purposes.</p>
|
|
<div class="gallery">
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Debug: Crop Marks - 89</div>
|
|
<div class="card-description">Visible red crop marks showing viewBox boundaries</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>89</code><br>
|
|
<strong>bead_shape:</strong> <code>diamond</code><br><strong>color_scheme:</strong> <code>place-value</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>15pt</code><br><strong>base_size:</strong> <code>1.5</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 270 210" width="270pt" height="210pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 210 L 270 210 L 270 0 Z "/>
|
|
<g>
|
|
<g transform="translate(97.5 17.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(16.5 26)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 104.5 L 4.5 104.5 L 4.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 26)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 49)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 67.75)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 86.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#a23b72" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(6.150000000000001 112.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(54 26)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 97.25 L 4.5 97.25 L 4.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(43.65 26)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.65 49)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.65 67.75)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.65 86.5)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.65 105.25)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 12.6 0 L 25.2 9 L 12.6 18 L 0 9 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 45)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 3 L 75 3 L 75 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-25.199999999999996 -17.999999999999993)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 204.6 L 0.5 204.6 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(100.2 -17.999999999999993)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 204.6 L 0.5 204.6 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-25.199999999999996 -17.999999999999993)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 125.4 0.5 L 125.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-25.199999999999996 186.59999999999997)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 125.4 0.5 L 125.4 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-25.199999999999996 45)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(100.2 45)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(36 -17.999999999999993)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(36 186.59999999999997)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Debug: Crop Marks - 456</div>
|
|
<div class="card-description">Three-digit number with visible crop boundaries</div>
|
|
<div class="config-details">
|
|
<strong>Number:</strong> <code>456</code><br>
|
|
<strong>bead_shape:</strong> <code>circle</code><br><strong>color_scheme:</strong> <code>heaven-earth</code><br><strong>show_crop_marks:</strong> <code>true</code><br><strong>crop_margin:</strong> <code>12pt</code><br><strong>base_size:</strong> <code>1.2</code>
|
|
</div>
|
|
</div>
|
|
<div class="card-content">
|
|
<svg class="typst-doc" viewBox="0 0 312 174" width="312pt" height="174pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
|
|
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 174 L 312 174 L 312 0 Z "/>
|
|
<g>
|
|
<g transform="translate(111 16)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(0 0)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(13.200000000000001 13.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 85.2 L 3.6 85.2 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(7.8 13.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.8 39.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.8 54.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.8 69.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(7.8 84.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(43.199999999999996 20.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 85.2 L 3.6 85.2 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(37.800000000000004 20.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(37.800000000000004 46.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(37.800000000000004 61.400000000000006)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(37.800000000000004 76.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(37.800000000000004 91.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(73.2 20.599999999999998)">
|
|
<path class="typst-shape" fill="#eeeeee" fill-rule="nonzero" d="M 0 0 L 0 85.6 L 3.6 85.6 L 3.6 0 Z "/>
|
|
</g>
|
|
<g transform="translate(67.8 20.599999999999998)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#f18f01" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.8 39.4)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#2e86ab" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.8 61.800000000000004)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.8 76.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(67.8 91.8)">
|
|
<g class="typst-group">
|
|
<g>
|
|
<g transform="translate(-0 -0)">
|
|
<path class="typst-shape" fill="#e6e6e6" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 7.2 C 0 3.2271552 3.2271552 0 7.2 0 C 11.172845 0 14.4 3.2271552 14.4 7.2 C 14.4 11.172845 11.172845 14.4 7.2 14.4 C 3.2271552 14.4 0 11.172845 0 7.2 "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g transform="translate(0 36)">
|
|
<path class="typst-shape" fill="#000000" fill-rule="nonzero" d="M 0 0 L 0 2.4 L 90 2.4 L 90 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-14.4 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 117.6 L 0.5 117.6 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(104.39999999999999 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 117.6 L 0.5 117.6 L 0.5 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-14.4 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 118.8 0.5 L 118.8 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-14.4 117.60000000000001)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dashoffset="0" stroke-dasharray="3 3" d="M 0 0 L 0 0.5 L 118.8 0.5 L 118.8 0 Z "/>
|
|
</g>
|
|
<g transform="translate(-14.4 35.699999999999996)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(104.39999999999999 35.699999999999996)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(43.5 0)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
<g transform="translate(43.5 117.60000000000001)">
|
|
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" d="M 0 0 L 0 0.1 L 0.1 0.1 L 0.1 0 Z "/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<h3>🛠️ How to Use This Gallery</h3>
|
|
<p><strong>Basic Examples:</strong> Standard soroban representations for learning and reference</p>
|
|
<p><strong>Crop Marks:</strong> Automated viewBox processing examples with before/after comparisons</p>
|
|
<p><strong>Debug Tools:</strong> Development examples with visible crop boundaries</p>
|
|
<p style="margin-top: 15px; font-size: 0.9rem; color: #999;">
|
|
Built with ❤️ using <code>flashcards.typ</code> templates and Typst CLI
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(evt, tabName) {
|
|
// Hide all tab content
|
|
const tabContents = document.getElementsByClassName('tab-content');
|
|
for (let i = 0; i < tabContents.length; i++) {
|
|
tabContents[i].classList.remove('active');
|
|
}
|
|
|
|
// Remove active class from all tab buttons
|
|
const tabButtons = document.getElementsByClassName('tab-button');
|
|
for (let i = 0; i < tabButtons.length; i++) {
|
|
tabButtons[i].classList.remove('active');
|
|
}
|
|
|
|
// Show the selected tab and mark button as active
|
|
document.getElementById(tabName).classList.add('active');
|
|
evt.currentTarget.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |