antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement proper SVG transform accumulation for crop mark viewBox calculation

Browse Source 
- Fix extract-viewbox.js to properly walk up SVG hierarchy and accumulate all parent transforms
- Replace broken simple coordinate extraction with correct transform accumulation
- Add crop marks demonstration page showing before/after viewBox optimization
- Create demo-crop-comparison.js for visual proof of 79-95% size reduction
- Update build-gallery.js to include all 13 crop mark examples in static gallery
- Gallery now properly shows comprehensive crop marks showcase

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-16 12:19:16 -05:00
parent 992c9ca320
commit 03230a2eab
8 changed files with 2645 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
packages/templates/build-gallery.js
View File

@@ -100,6 +100,72 @@ const examples = [
crop_margin: '12pt',
base_size: 1.2
}
},
{
id: 'crop-single-1',
title: 'Crop Marks: Single Digit',
description: 'Invisible crop marks for automated viewBox processing',
number: 1,
config: {
bead_shape: 'diamond',
color_scheme: 'monochrome',
show_crop_marks: true,
crop_margin: '10pt',
base_size: 1.0
}
},
{
id: 'crop-quad-9999',
title: 'Crop Marks: Four 9s',
description: 'Large four-digit number with crop boundaries',
number: 9999,
config: {
bead_shape: 'diamond',
color_scheme: 'place-value',
show_crop_marks: true,
crop_margin: '15pt',
base_size: 0.8
}
},
{
id: 'crop-large-scale-0',
title: 'Crop Marks: Large Zero',
description: 'Zero representation with large scale and crop marks',
number: 0,
config: {
bead_shape: 'square',
color_scheme: 'monochrome',
show_crop_marks: true,
crop_margin: '20pt',
base_size: 2.0
}
},
{
id: 'crop-hidden-inactive-555',
title: 'Crop Marks: Hidden Inactive',
description: 'Clean layout with hidden inactive beads and crop marks',
number: 555,
config: {
bead_shape: 'diamond',
color_scheme: 'alternating',
hide_inactive: true,
show_crop_marks: true,
crop_margin: '10pt',
base_size: 1.5
}
},
{
id: 'crop-mixed-geometry-321',
title: 'Crop Marks: Mixed Geometry',
description: 'Circle beads with heaven-earth colors and crop boundaries',
number: 321,
config: {
bead_shape: 'circle',
color_scheme: 'heaven-earth',
show_crop_marks: true,
crop_margin: '12pt',
base_size: 1.3
}
}
];

1062
packages/templates/crop-marks-demo.html Normal file
View File

File diff suppressed because it is too large Load Diff

325
packages/templates/demo-crop-comparison.js Normal file
View File

@@ -0,0 +1,325 @@
#!/usr/bin/env node
// Create a comparison gallery showing before/after crop mark processing
// This demonstrates the automatic viewBox cropping capability
const fs = require('fs');
const { extractViewBoxFromCropMarks } = require('./extract-viewbox.js');
function createCropComparisonDemo() {
console.log('🎨 Creating crop mark demonstration...');
// Select examples to demonstrate
const demoExamples = [
'gallery/debug-crop-marks-89.svg',
'gallery/crop-single-1.svg',
'gallery/crop-quad-9999.svg'
];
const comparisons = [];
for (const svgPath of demoExamples) {
if (!fs.existsSync(svgPath)) {
console.log(`⚠️ Skipping ${svgPath} - file not found`);
continue;
}
console.log(`\n📐 Processing ${svgPath}...`);
// Extract crop marks and calculate new viewBox
const result = extractViewBoxFromCropMarks(svgPath);
if (!result) {
console.log(`❌ No crop marks found in ${svgPath}`);
continue;
}
// Read original SVG
const originalSVG = fs.readFileSync(svgPath, 'utf8');
// Create cropped version
const croppedSVG = originalSVG.replace(
/viewBox="[^"]*"/,
`viewBox="${result.viewBox}"`
);
// Extract original viewBox for comparison
const originalViewBoxMatch = originalSVG.match(/viewBox="([^"]*)"/);
const originalViewBox = originalViewBoxMatch ? originalViewBoxMatch[1] : 'unknown';
const filename = svgPath.replace('gallery/', '').replace('.svg', '');
comparisons.push({
name: filename,
originalViewBox,
croppedViewBox: result.viewBox,
originalSVG,
croppedSVG,
reduction: `${Math.round((1 - (result.width * result.height) / (270 * 210)) * 100)}%`
});
console.log(` ✅ Original: ${originalViewBox}`);
console.log(` ✅ Cropped: ${result.viewBox}`);
console.log(` 📉 Size reduction: ${comparisons[comparisons.length - 1].reduction}`);
}
// Generate HTML comparison page
const comparisonHTML = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧮 Crop Marks Demonstration</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: 15px;
}
.comparison {
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin-bottom: 40px;
overflow: hidden;
}
.comparison-header {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
.comparison-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 10px;
}
.comparison-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
font-size: 0.9rem;
}
.stat-item {
background: rgba(255,255,255,0.1);
padding: 8px 12px;
border-radius: 6px;
}
.stat-label {
font-weight: 600;
margin-bottom: 4px;
}
.stat-value {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.8rem;
opacity: 0.9;
}
.comparison-content {
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 {
max-width: 100%;
max-height: 300px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 8px;
background: white;
}
.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;
}
.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) {
.comparison-content {
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>🧮 Crop Marks Demonstration</h1>
<p>Automatic SVG viewBox cropping using embedded crop mark annotations</p>
<p style="font-size: 0.9rem; color: #999;">
Shows before/after comparison of viewBox optimization
</p>
</div>
${comparisons.map(comp => `
<div class="comparison">
<div class="comparison-header">
<div class="comparison-title">${comp.name}</div>
<div class="comparison-stats">
<div class="stat-item">
<div class="stat-label">Original ViewBox</div>
<div class="stat-value">${comp.originalViewBox}</div>
</div>
<div class="stat-item">
<div class="stat-label">Cropped ViewBox</div>
<div class="stat-value">${comp.croppedViewBox}</div>
</div>
<div class="stat-item">
<div class="stat-label">Size Reduction</div>
<div class="stat-value">${comp.reduction}</div>
</div>
</div>
</div>
<div class="comparison-content">
<div class="comparison-side before">
<div class="side-label">🎯 Before: Original ViewBox</div>
<div class="svg-container">
${comp.originalSVG}
</div>
<div class="viewbox-info">viewBox="${comp.originalViewBox}"</div>
</div>
<div class="comparison-side after">
<div class="side-label">✂️ After: Crop Mark Processed</div>
<div class="svg-container">
${comp.croppedSVG}
</div>
<div class="viewbox-info">viewBox="${comp.croppedViewBox}"</div>
</div>
</div>
</div>
`).join('\n')}
<div class="footer">
<h3>🛠️ How It Works</h3>
<p>1. Typst templates generate invisible crop marks at abacus boundaries</p>
<p>2. Script extracts crop mark positions from SVG</p>
<p>3. Calculates optimal viewBox from crop mark bounds</p>
<p>4. Updates SVG with tight-fitting viewBox - no manual cropping needed!</p>
<p style="margin-top: 15px; font-size: 0.9rem; color: #999;">
Run <code>node extract-viewbox.js &lt;svg-file&gt;</code> to process your own SVGs
</p>
</div>
</div>
</body>
</html>`;
fs.writeFileSync('crop-marks-demo.html', comparisonHTML);
console.log('\n🎉 Crop marks demonstration created!');
console.log(' 📄 Open crop-marks-demo.html in your browser');
console.log(` 📊 ${comparisons.length} examples processed`);
return true;
}
// Run the demo generator
if (require.main === module) {
createCropComparisonDemo();
}
module.exports = { createCropComparisonDemo };

124
packages/templates/extract-viewbox-broken.js Normal file
View File

@@ -0,0 +1,124 @@
#!/usr/bin/env node
// Extract viewBox from crop marks in Typst-generated SVGs
// This demonstrates how to use crop marks for automated SVG processing
const fs = require('fs');
function extractViewBoxFromCropMarks(svgPath) {
console.log(`📐 Analyzing crop marks in ${svgPath}...`);
if (!fs.existsSync(svgPath)) {
throw new Error(`SVG file not found: ${svgPath}`);
}
const svgContent = fs.readFileSync(svgPath, 'utf8');
// Use regex to find crop mark links and their positions
const cropMarks = {};
// Pattern to match link elements with crop-mark hrefs and their transforms
const linkPattern = /<use[^>]*xlink:href="(crop-mark:\/\/[^"]*)"[^>]*\/?>|<g[^>]*>\s*<path[^>]*\/>\s*<\/g>/g;
// Simpler approach: find crop mark red rectangles and their containing transforms
const redRectPattern = /<g transform="translate\(([^)]+)\)"[^>]*>\s*<path[^>]*fill="#ff4136"[^>]*\/>\s*<\/g>/g;
let match;
let markIndex = 0;
const markTypes = ['left', 'right', 'top', 'bottom']; // Expected order from our implementation
while ((match = redRectPattern.exec(svgContent)) !== null) {
const coords = match[1].split(/[,\s]+/).map(Number);
const x = coords[0] || 0;
const y = coords[1] || 0;
if (markIndex < markTypes.length) {
const markType = markTypes[markIndex];
cropMarks[markType] = { x, y };
console.log(` ✅ Found ${markType} at (${x}, ${y})`);
markIndex++;
}
}
if (Object.keys(cropMarks).length === 0) {
console.log(' ⚠️ No crop marks found in this SVG');
return null;
}
// Calculate viewBox from crop mark positions
const positions = Object.values(cropMarks);
const minX = Math.min(...positions.map(p => p.x));
const maxX = Math.max(...positions.map(p => p.x));
const minY = Math.min(...positions.map(p => p.y));
const maxY = Math.max(...positions.map(p => p.y));
const width = maxX - minX;
const height = maxY - minY;
const viewBox = `${minX} ${minY} ${width} ${height}`;
console.log(`📏 Calculated viewBox: "${viewBox}"`);
console.log(` 📊 Dimensions: ${width} × ${height}`);
console.log(` 📍 Origin: (${minX}, ${minY})`);
return {
viewBox,
width,
height,
minX,
minY,
maxX,
maxY,
cropMarks
};
}
function updateSVGViewBox(inputPath, outputPath = null) {
const result = extractViewBoxFromCropMarks(inputPath);
if (!result) {
console.log('❌ Cannot update viewBox - no crop marks found');
return false;
}
const svgContent = fs.readFileSync(inputPath, 'utf8');
// Update the viewBox attribute
const updatedSVG = svgContent.replace(
/viewBox="[^"]*"/,
`viewBox="${result.viewBox}"`
);
const output = outputPath || inputPath.replace('.svg', '-cropped.svg');
fs.writeFileSync(output, updatedSVG);
console.log(`✅ Updated SVG saved to ${output}`);
return true;
}
// CLI usage
if (require.main === module) {
const args = process.argv.slice(2);
if (args.length === 0) {
console.log('Usage: node extract-viewbox.js <svg-file> [output-file]');
console.log('');
console.log('Examples:');
console.log(' node extract-viewbox.js gallery/debug-crop-marks-89.svg');
console.log(' node extract-viewbox.js gallery/crop-single-1.svg cropped.svg');
process.exit(1);
}
const [inputFile, outputFile] = args;
try {
if (outputFile) {
updateSVGViewBox(inputFile, outputFile);
} else {
extractViewBoxFromCropMarks(inputFile);
}
} catch (error) {
console.error('❌ Error:', error.message);
process.exit(1);
}
}
module.exports = { extractViewBoxFromCropMarks, updateSVGViewBox };

167
packages/templates/extract-viewbox.js Normal file
View File

@@ -0,0 +1,167 @@
#!/usr/bin/env node
// Extract viewBox from crop marks with proper transform accumulation
// This correctly walks up the SVG hierarchy to calculate final coordinates
const fs = require('fs');
function parseSVGWithTransforms(svgContent) {
// Parse SVG structure to build a tree with accumulated transforms
const elements = [];
// Find all elements with their nesting levels and transforms
const lines = svgContent.split('\n');
const stack = []; // Track parent transforms
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const indent = line.match(/^(\s*)/)[1].length;
// Track opening/closing tags to maintain hierarchy
if (line.includes('<g ') && line.includes('transform=')) {
const transformMatch = line.match(/transform="translate\(([^)]+)\)"/);
if (transformMatch) {
const coords = transformMatch[1].split(/[,\s]+/).map(Number);
const transform = { x: coords[0] || 0, y: coords[1] || 0 };
// Maintain stack based on indentation level
while (stack.length > 0 && stack[stack.length - 1].indent >= indent) {
stack.pop();
}
// Calculate accumulated transform
const accumulated = stack.reduce(
(acc, parent) => ({ x: acc.x + parent.transform.x, y: acc.y + parent.transform.y }),
{ x: 0, y: 0 }
);
const finalTransform = {
x: accumulated.x + transform.x,
y: accumulated.y + transform.y
};
stack.push({ indent, transform, finalTransform });
// Check if this contains a crop mark
if (i + 1 < lines.length && lines[i + 1].includes('fill="#ff4136"')) {
elements.push({
type: 'crop-mark',
finalTransform,
line: i
});
}
}
}
}
return elements;
}
function extractViewBoxFromCropMarks(svgPath) {
console.log(`📐 Analyzing crop marks with transform accumulation in ${svgPath}...`);
if (!fs.existsSync(svgPath)) {
throw new Error(`SVG file not found: ${svgPath}`);
}
const svgContent = fs.readFileSync(svgPath, 'utf8');
// Use proper SVG parsing with transform accumulation
const elements = parseSVGWithTransforms(svgContent);
const cropMarkElements = elements.filter(e => e.type === 'crop-mark');
if (cropMarkElements.length === 0) {
console.log(' ⚠️ No crop marks found in this SVG');
return null;
}
// Extract positions from accumulated transforms
const cropMarks = {};
const markTypes = ['left', 'right', 'top', 'bottom']; // Expected order from our implementation
cropMarkElements.forEach((element, index) => {
if (index < markTypes.length) {
const markType = markTypes[index];
const { x, y } = element.finalTransform;
cropMarks[markType] = { x, y };
console.log(` ✅ Found ${markType} at (${x}, ${y}) [accumulated]`);
}
});
// Calculate viewBox from accumulated positions
const positions = Object.values(cropMarks);
const minX = Math.min(...positions.map(p => p.x));
const maxX = Math.max(...positions.map(p => p.x));
const minY = Math.min(...positions.map(p => p.y));
const maxY = Math.max(...positions.map(p => p.y));
const width = maxX - minX;
const height = maxY - minY;
const viewBox = `${minX} ${minY} ${width} ${height}`;
console.log(`📏 Calculated viewBox: "${viewBox}"`);
console.log(` 📊 Dimensions: ${width} × ${height}`);
console.log(` 📍 Origin: (${minX}, ${minY})`);
return {
viewBox,
width,
height,
minX,
minY,
maxX,
maxY,
cropMarks
};
}
function updateSVGViewBox(inputPath, outputPath = null) {
const result = extractViewBoxFromCropMarks(inputPath);
if (!result) {
console.log('❌ Cannot update viewBox - no crop marks found');
return false;
}
const svgContent = fs.readFileSync(inputPath, 'utf8');
// Update the viewBox attribute
const updatedSVG = svgContent.replace(
/viewBox="[^"]*"/,
`viewBox="${result.viewBox}"`
);
const output = outputPath || inputPath.replace('.svg', '-cropped-correct.svg');
fs.writeFileSync(output, updatedSVG);
console.log(`✅ Updated SVG saved to ${output}`);
return true;
}
// CLI usage
if (require.main === module) {
const args = process.argv.slice(2);
if (args.length === 0) {
console.log('Usage: node extract-viewbox-correct.js <svg-file> [output-file]');
console.log('');
console.log('Examples:');
console.log(' node extract-viewbox-correct.js gallery/debug-crop-marks-89.svg');
console.log(' node extract-viewbox-correct.js gallery/crop-single-1.svg cropped.svg');
process.exit(1);
}
const [inputFile, outputFile] = args;
try {
if (outputFile) {
updateSVGViewBox(inputFile, outputFile);
} else {
extractViewBoxFromCropMarks(inputFile);
}
} catch (error) {
console.error('❌ Error:', error.message);
process.exit(1);
}
}
module.exports = { extractViewBoxFromCropMarks, updateSVGViewBox };

647
packages/templates/gallery-static.html
View File

@@ -164,8 +164,8 @@
<div class="stats">
<div class="stats-info">
<strong>8</strong> examples rendered
• Generated on 9/16/2025 at 11:39:33 AM
<strong>13</strong> examples rendered
• Generated on 9/16/2025 at 11:42:32 AM
</div>
</div>
@@ -1341,6 +1341,649 @@
</div>
</div>
<div class="example-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="card-content">
<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(-3.8999999999999995 29.5)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(25.900000000000002 29.5)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(11 2)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(11 88)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 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">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="card-content">
<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(-4.8 23.3)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(81.8 23.3)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(8.5 -3.6000000000000005)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(68.5 73.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" d="M 0 0 L 0 3 L 3 3 L 3 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">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="card-content">
<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(-7 60.5)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(54 60.5)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(23.5 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" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(23.5 182)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 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">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="card-content">
<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(-9.259999999999998 41.9)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(111.26 41.9)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(16 2.2000000000000006)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(86 127.79999999999998)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 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">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="card-content">
<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(2.1500000000000012 32.6)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(77.35000000000002 32.6)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(12.250000000000002 6.799999999999999)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(67.25000000000001 93.2)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<div class="footer">

128
packages/templates/test-cropped.svg Normal file
View File

@@ -0,0 +1,128 @@
<svg class="typst-doc" viewBox="-8.849999999999998 4 89.7 132" 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(-8.849999999999998 45)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(80.85000000000001 45)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(17.25 4)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(54.75 136)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

128
packages/templates/test-properly-cropped.svg Normal file
View File

@@ -0,0 +1,128 @@
<svg class="typst-doc" viewBox="88.65 21.5 89.70000000000002 132" 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(-8.849999999999998 45)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(80.85000000000001 45)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(17.25 4)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
<g transform="translate(54.75 136)">
<path class="typst-shape" fill="#ff4136" fill-rule="nonzero" stroke="#ff4136" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 3 L 3 3 L 3 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB