9196 lines
471 KiB
HTML
9196 lines
471 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 12/7/2025 at
|
|
2:40:16 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 0v 180 h 200 v -180 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 81.25 2.5)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 16.5 26)"
|
|
d="M 0 0v 104.25 h 4.5 v -104.25 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 26)"
|
|
>
|
|
<g>
|
|
<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 0 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 26)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 56)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 56)"
|
|
href="bead://earth-col0-pos0-active0"
|
|
xlink:href="bead://earth-col0-pos0-active0"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 74.75)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 74.75)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 93.5)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 93.5)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 112.25)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 112.25)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 45)"
|
|
d="M 0 0v 3 h 37.5 v -3 Z "
|
|
/>
|
|
</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 0v 150 h 288 v -150 Z "
|
|
/>
|
|
<g>
|
|
<g class="typst-group" transform="matrix(1 0 0 1 99 4)">
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 13.200000000000001 13.599999999999998)"
|
|
d="M 0 0v 92.6 h 3.6 v -92.6 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.920000000000001 13.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.920000000000001 13.599999999999998)"
|
|
href="bead://heaven-col2-active0"
|
|
xlink:href="bead://heaven-col2-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.920000000000001 39.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.920000000000001 39.4)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.920000000000001 61.800000000000004)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.920000000000001 61.800000000000004)"
|
|
href="bead://earth-col2-pos1-active0"
|
|
xlink:href="bead://earth-col2-pos1-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.920000000000001 76.8)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.920000000000001 76.8)"
|
|
href="bead://earth-col2-pos2-active0"
|
|
xlink:href="bead://earth-col2-pos2-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.920000000000001 91.8)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.920000000000001 91.8)"
|
|
href="bead://earth-col2-pos3-active0"
|
|
xlink:href="bead://earth-col2-pos3-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 43.199999999999996 13.599999999999998)"
|
|
d="M 0 0v 92.6 h 3.6 v -92.6 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.92 13.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.92 13.599999999999998)"
|
|
href="bead://heaven-col1-active0"
|
|
xlink:href="bead://heaven-col1-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.92 39.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.92 39.4)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.92 54.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.92 54.4)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.92 76.8)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.92 76.8)"
|
|
href="bead://earth-col1-pos2-active0"
|
|
xlink:href="bead://earth-col1-pos2-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.92 91.8)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.92 91.8)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 73.2 13.599999999999998)"
|
|
d="M 0 0v 92.6 h 3.6 v -92.6 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 64.92 13.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 64.92 13.599999999999998)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 64.92 39.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 64.92 39.4)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 64.92 54.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 64.92 54.4)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 64.92 69.4)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 64.92 69.4)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 64.92 91.8)"
|
|
>
|
|
<g>
|
|
<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 0m 10.08 0 l 10.08 7.2 l -10.08 7.2 l -10.08 -7.2 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 64.92 91.8)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="20.159999999999997"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 36)"
|
|
d="M 0 0v 2.4 h 90 v -2.4 Z "
|
|
/>
|
|
</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 0v 216 h 288 v -216 Z "
|
|
/>
|
|
<g>
|
|
<g class="typst-group" transform="matrix(1 0 0 1 99 4)">
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 19.8 24.399999999999995)"
|
|
d="M 0 0v 123.3 h 5.4 v -123.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 11.7 24.399999999999995)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 11.7 24.399999999999995)"
|
|
href="bead://heaven-col1-active0"
|
|
xlink:href="bead://heaven-col1-active0"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 11.7 58.599999999999994)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 11.7 58.599999999999994)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 11.7 81.1)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 11.7 81.1)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 11.7 103.6)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 11.7 103.6)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 11.7 126.10000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 11.7 126.10000000000002)"
|
|
href="bead://earth-col1-pos3-active1"
|
|
xlink:href="bead://earth-col1-pos3-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 64.8 24.399999999999995)"
|
|
d="M 0 0v 130.4 h 5.4 v -130.4 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 56.699999999999996 24.399999999999995)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.699999999999996 24.399999999999995)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 56.699999999999996 58.599999999999994)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.699999999999996 58.599999999999994)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 56.699999999999996 81.1)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.699999999999996 81.1)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 56.699999999999996 110.7)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.699999999999996 110.7)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 56.699999999999996 133.20000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 10.8 c 0 -5.9592676 4.8407326 -10.8 10.8 -10.8 c 5.9592676 0 10.8 4.8407326 10.8 10.8 c 0 5.9592676 -4.8407326 10.8 -10.8 10.8 c -5.9592676 0 -10.8 -4.8407326 -10.8 -10.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.699999999999996 133.20000000000002)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="21.6"
|
|
height="21.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 54)"
|
|
d="M 0 0v 3.6 h 90 v -3.6 Z "
|
|
/>
|
|
</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 0v 300 h 200 v -300 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 68.75 7.5)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 27.5 44)"
|
|
d="M 0 0v 167.5 h 7.5 v -167.5 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 10.25 44)"
|
|
>
|
|
<g>
|
|
<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 0m 21 0 l 21 15 l -21 15 l -21 -15 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 10.25 44)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="42"
|
|
height="30"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 10.25 81)"
|
|
>
|
|
<g>
|
|
<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 0m 21 0 l 21 15 l -21 15 l -21 -15 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 10.25 81)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="42"
|
|
height="30"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 10.25 112.25)"
|
|
>
|
|
<g>
|
|
<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 0m 21 0 l 21 15 l -21 15 l -21 -15 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 10.25 112.25)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="42"
|
|
height="30"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 10.25 150.25)"
|
|
>
|
|
<g>
|
|
<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 0m 21 0 l 21 15 l -21 15 l -21 -15 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 10.25 150.25)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="42"
|
|
height="30"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 10.25 181.5)"
|
|
>
|
|
<g>
|
|
<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 0m 21 0 l 21 15 l -21 15 l -21 -15 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 10.25 181.5)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="42"
|
|
height="30"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 75)"
|
|
d="M 0 0v 5 h 62.5 v -5 Z "
|
|
/>
|
|
</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 0v 150 h 240 v -150 Z "
|
|
/>
|
|
<g>
|
|
<g class="typst-group" transform="matrix(1 0 0 1 82.5 15)">
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 17)"
|
|
d="M 0 0v 65.5 h 3 v -65.5 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 6.5 17)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 6.5 17)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.5 17)"
|
|
href="bead://heaven-col2-active1"
|
|
xlink:href="bead://heaven-col2-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 6.5 33)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 6.5 33)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.5 33)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 6.5 45.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 6.5 45.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.5 45.5)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 6.5 58)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 6.5 58)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.5 58)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 6.5 70.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 6.5 70.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.5 70.5)"
|
|
href="bead://earth-col2-pos3-active1"
|
|
xlink:href="bead://earth-col2-pos3-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 36 17)"
|
|
d="M 0 0v 65.5 h 3 v -65.5 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#43a047"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 31.5 17)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 31.5 17)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 31.5 17)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#43a047"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 31.5 33)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 31.5 33)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 31.5 33)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#43a047"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 31.5 45.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 31.5 45.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 31.5 45.5)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#43a047"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 31.5 58)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 31.5 58)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 31.5 58)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#43a047"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 31.5 70.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 31.5 70.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 31.5 70.5)"
|
|
href="bead://earth-col1-pos3-active1"
|
|
xlink:href="bead://earth-col1-pos3-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 61 17)"
|
|
d="M 0 0v 65.5 h 3 v -65.5 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 56.5 17)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 56.5 17)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.5 17)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 56.5 33)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 56.5 33)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.5 33)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 56.5 45.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 56.5 45.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.5 45.5)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 56.5 58)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 56.5 58)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.5 58)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#1e88e5"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 56.5 70.5)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 56.5 70.5)"
|
|
d="M 0 0m 0.75 0 h 10.5 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 10.5 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -10.5 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -10.5 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 56.5 70.5)"
|
|
href="bead://earth-col0-pos3-active1"
|
|
xlink:href="bead://earth-col0-pos3-active1"
|
|
>
|
|
<rect
|
|
width="12"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 30)"
|
|
d="M 0 0v 2 h 75 v -2 Z "
|
|
/>
|
|
</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 0v 156 h 416 v -156 Z "
|
|
/>
|
|
<g>
|
|
<g class="typst-group" transform="matrix(1 0 0 1 143 1.5)">
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 14.299999999999999 15.400000000000002)"
|
|
d="M 0 0v 98.9 h 3.9 v -98.9 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 8.450000000000001 15.400000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 8.450000000000001 15.400000000000002)"
|
|
href="bead://heaven-col3-active0"
|
|
xlink:href="bead://heaven-col3-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 8.450000000000001 42.6)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 8.450000000000001 42.6)"
|
|
href="bead://earth-col3-pos0-active1"
|
|
xlink:href="bead://earth-col3-pos0-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 8.450000000000001 66.20000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 8.450000000000001 66.20000000000002)"
|
|
href="bead://earth-col3-pos1-active0"
|
|
xlink:href="bead://earth-col3-pos1-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 8.450000000000001 82.45000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 8.450000000000001 82.45000000000002)"
|
|
href="bead://earth-col3-pos2-active0"
|
|
xlink:href="bead://earth-col3-pos2-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 8.450000000000001 98.70000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 8.450000000000001 98.70000000000002)"
|
|
href="bead://earth-col3-pos3-active0"
|
|
xlink:href="bead://earth-col3-pos3-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 46.800000000000004 15.400000000000002)"
|
|
d="M 0 0v 98.9 h 3.9 v -98.9 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.949999999999996 15.400000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.949999999999996 15.400000000000002)"
|
|
href="bead://heaven-col2-active0"
|
|
xlink:href="bead://heaven-col2-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.949999999999996 42.6)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.949999999999996 42.6)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.949999999999996 58.849999999999994)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.949999999999996 58.849999999999994)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.949999999999996 82.45)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.949999999999996 82.45)"
|
|
href="bead://earth-col2-pos2-active0"
|
|
xlink:href="bead://earth-col2-pos2-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.949999999999996 98.7)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.949999999999996 98.7)"
|
|
href="bead://earth-col2-pos3-active0"
|
|
xlink:href="bead://earth-col2-pos3-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 79.3 15.400000000000002)"
|
|
d="M 0 0v 98.9 h 3.9 v -98.9 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 73.45 15.400000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 73.45 15.400000000000002)"
|
|
href="bead://heaven-col1-active0"
|
|
xlink:href="bead://heaven-col1-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 73.45 42.6)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 73.45 42.6)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 73.45 58.849999999999994)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 73.45 58.849999999999994)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 73.45 75.1)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 73.45 75.1)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 73.45 98.7)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 73.45 98.7)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 111.8 15.400000000000002)"
|
|
d="M 0 0v 91.55 h 3.9 v -91.55 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 105.95 15.400000000000002)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 105.95 15.400000000000002)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 105.95 42.6)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 105.95 42.6)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 105.95 58.849999999999994)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 105.95 58.849999999999994)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 105.95 75.1)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 105.95 75.1)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 105.95 91.35)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.8 c 0 -4.3039155 3.4960847 -7.8 7.8 -7.8 c 4.303915 0 7.8 3.4960847 7.8 7.8 c 0 4.303915 -3.4960852 7.8 -7.8 7.8 c -4.3039155 0 -7.8 -3.4960852 -7.8 -7.8 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 105.95 91.35)"
|
|
href="bead://earth-col0-pos3-active1"
|
|
xlink:href="bead://earth-col0-pos3-active1"
|
|
>
|
|
<rect
|
|
width="15.6"
|
|
height="15.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 39)"
|
|
d="M 0 0v 2.6 h 130 v -2.6 Z "
|
|
/>
|
|
</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 0v 166 h 216 v -166 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95.5 23)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 10)"
|
|
d="M 0 0v 80 h 3 v -80 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 10)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 10)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 33)"
|
|
>
|
|
<g>
|
|
<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 0 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 33)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 53)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 53)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 65.5)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 65.5)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 78)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 78)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 30)"
|
|
d="M 0 0v 2 h 25 v -2 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 -12)"
|
|
d="M 0 0v 136.4 h 0.5 v -136.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 41.800000000000004 -12)"
|
|
d="M 0 0v 136.4 h 0.5 v -136.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 -12)"
|
|
d="M 0 0v 0.5 h 58.6 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 124.39999999999999)"
|
|
d="M 0 0v 0.5 h 58.6 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -16.8 29.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -16.8 29.5)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 41.800000000000004 29.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 41.800000000000004 29.5)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 -12)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 11 -12)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 124.39999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 11 124.39999999999999)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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="0 0 0 0"
|
|
width="0pt"
|
|
height="0pt"
|
|
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 0v 166 h 216 v -166 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95.5 23)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 10)"
|
|
d="M 0 0v 80 h 3 v -80 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 10)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 10)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 33)"
|
|
>
|
|
<g>
|
|
<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 0 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 33)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 53)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 53)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 65.5)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 65.5)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 4.1000000000000005 78)"
|
|
>
|
|
<g>
|
|
<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 0m 8.4 0 l 8.4 6 l -8.4 6 l -8.4 -6 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 4.1000000000000005 78)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="16.8"
|
|
height="12"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 30)"
|
|
d="M 0 0v 2 h 25 v -2 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 -12)"
|
|
d="M 0 0v 136.4 h 0.5 v -136.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 41.800000000000004 -12)"
|
|
d="M 0 0v 136.4 h 0.5 v -136.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 -12)"
|
|
d="M 0 0v 0.5 h 58.6 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -16.8 124.39999999999999)"
|
|
d="M 0 0v 0.5 h 58.6 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -16.8 29.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -16.8 29.5)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 41.800000000000004 29.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 41.800000000000004 29.5)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 -12)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 11 -12)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 11 124.39999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 11 124.39999999999999)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 0 0"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 100%
|
|
</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 0v 170 h 276 v -170 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 98 36)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 8.799999999999999 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
href="bead://heaven-col3-active1"
|
|
xlink:href="bead://heaven-col3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
href="bead://earth-col3-pos0-active1"
|
|
xlink:href="bead://earth-col3-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
href="bead://earth-col3-pos1-active1"
|
|
xlink:href="bead://earth-col3-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
href="bead://earth-col3-pos2-active1"
|
|
xlink:href="bead://earth-col3-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
href="bead://earth-col3-pos3-active1"
|
|
xlink:href="bead://earth-col3-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 28.8 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
href="bead://heaven-col2-active1"
|
|
xlink:href="bead://heaven-col2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
href="bead://earth-col2-pos3-active1"
|
|
xlink:href="bead://earth-col2-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 48.800000000000004 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
href="bead://earth-col1-pos3-active1"
|
|
xlink:href="bead://earth-col1-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 68.8 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
href="bead://earth-col0-pos3-active1"
|
|
xlink:href="bead://earth-col0-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 24)"
|
|
d="M 0 0v 1.6 h 80 v -1.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 0)"
|
|
d="M 0 0v 78.4 h 0.5 v -78.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 89.60000000000001 0)"
|
|
d="M 0 0v 78.4 h 0.5 v -78.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 0)"
|
|
d="M 0 0v 0.5 h 99.2 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 78.39999999999999)"
|
|
d="M 0 0v 0.5 h 99.2 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -9.6 23.3)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -9.6 23.3)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 89.60000000000001 23.3)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 89.60000000000001 23.3)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 38.5 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 38.5 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 38.5 78.39999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 38.5 78.39999999999999)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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="0 0 0 0"
|
|
width="0pt"
|
|
height="0pt"
|
|
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 0v 170 h 276 v -170 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 98 36)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 8.799999999999999 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 13.400000000000002)"
|
|
href="bead://heaven-col3-active1"
|
|
xlink:href="bead://heaven-col3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 26.599999999999998)"
|
|
href="bead://earth-col3-pos0-active1"
|
|
xlink:href="bead://earth-col3-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 36.599999999999994)"
|
|
href="bead://earth-col3-pos1-active1"
|
|
xlink:href="bead://earth-col3-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 46.599999999999994)"
|
|
href="bead://earth-col3-pos2-active1"
|
|
xlink:href="bead://earth-col3-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#6a994e"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.2 56.599999999999994)"
|
|
href="bead://earth-col3-pos3-active1"
|
|
xlink:href="bead://earth-col3-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 28.8 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 13.400000000000002)"
|
|
href="bead://heaven-col2-active1"
|
|
xlink:href="bead://heaven-col2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 26.599999999999998)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 36.599999999999994)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 46.599999999999994)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#f18f01"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 25.2 56.599999999999994)"
|
|
href="bead://earth-col2-pos3-active1"
|
|
xlink:href="bead://earth-col2-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 48.800000000000004 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 13.400000000000002)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 26.599999999999998)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 36.599999999999994)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 46.599999999999994)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#a23b72"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 45.199999999999996 56.599999999999994)"
|
|
href="bead://earth-col1-pos3-active1"
|
|
xlink:href="bead://earth-col1-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 68.8 13.400000000000002)"
|
|
d="M 0 0v 52.8 h 2.4 v -52.8 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 13.400000000000002)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 26.599999999999998)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 36.599999999999994)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 46.599999999999994)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#2e86ab"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
d="M 0 0m 0 0.75 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 Z "
|
|
/>
|
|
<path
|
|
class="typst-shape"
|
|
fill="none"
|
|
stroke="#000000"
|
|
stroke-width="0.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="miter"
|
|
stroke-miterlimit="4"
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
d="M 0 0m 0.75 0 h 8.1 c 0.41421318 0 0.75 0.33578643 0.75 0.75 v 8.1 c 0 0.41421318 -0.33578682 0.75 -0.75 0.75 h -8.1 c -0.41421357 0 -0.75 -0.33578682 -0.75 -0.75 v -8.1 c 0 -0.41421357 0.33578643 -0.75 0.75 -0.75 "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 65.2 56.599999999999994)"
|
|
href="bead://earth-col0-pos3-active1"
|
|
xlink:href="bead://earth-col0-pos3-active1"
|
|
>
|
|
<rect
|
|
width="9.6"
|
|
height="9.6"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 24)"
|
|
d="M 0 0v 1.6 h 80 v -1.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 0)"
|
|
d="M 0 0v 78.4 h 0.5 v -78.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 89.60000000000001 0)"
|
|
d="M 0 0v 78.4 h 0.5 v -78.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 0)"
|
|
d="M 0 0v 0.5 h 99.2 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -9.6 78.39999999999999)"
|
|
d="M 0 0v 0.5 h 99.2 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -9.6 23.3)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -9.6 23.3)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 89.60000000000001 23.3)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 89.60000000000001 23.3)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 38.5 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 38.5 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 38.5 78.39999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 38.5 78.39999999999999)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 0 0"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 100%
|
|
</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 0v 280 h 240 v -280 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95 25)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 22 28)"
|
|
d="M 0 0v 143 h 6 v -143 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 28)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 28)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 72)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 72)"
|
|
href="bead://earth-col0-pos0-active0"
|
|
xlink:href="bead://earth-col0-pos0-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 97)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 97)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 122)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 122)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 147)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 147)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 60)"
|
|
d="M 0 0v 4 h 50 v -4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 0)"
|
|
d="M 0 0v 196 h 0.5 v -196 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 74 0)"
|
|
d="M 0 0v 196 h 0.5 v -196 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 0)"
|
|
d="M 0 0v 0.5 h 98 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 196)"
|
|
d="M 0 0v 0.5 h 98 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -24 60.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -24 60.5)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 74 60.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 74 60.5)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 23.5 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 23.5 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 23.5 196)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 23.5 196)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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="0 0 0 0"
|
|
width="0pt"
|
|
height="0pt"
|
|
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 0v 280 h 240 v -280 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95 25)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 22 28)"
|
|
d="M 0 0v 143 h 6 v -143 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 28)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 28)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 72)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 72)"
|
|
href="bead://earth-col0-pos0-active0"
|
|
xlink:href="bead://earth-col0-pos0-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 97)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 97)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 122)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 122)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 13 147)"
|
|
>
|
|
<g>
|
|
<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 0m 0 12 c 0 -6.621408 5.378592 -12 12 -12 c 6.6214085 0 12 5.378592 12 12 c 0 6.6214085 -5.3785915 12 -12 12 c -6.621408 0 -12 -5.3785915 -12 -12 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 13 147)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="24"
|
|
height="24"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 60)"
|
|
d="M 0 0v 4 h 50 v -4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 0)"
|
|
d="M 0 0v 196 h 0.5 v -196 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 74 0)"
|
|
d="M 0 0v 196 h 0.5 v -196 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 0)"
|
|
d="M 0 0v 0.5 h 98 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -24 196)"
|
|
d="M 0 0v 0.5 h 98 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -24 60.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -24 60.5)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 74 60.5)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 74 60.5)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 23.5 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 23.5 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 23.5 196)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 23.5 196)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 0 0"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 100%
|
|
</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 0v 198 h 366 v -198 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 130.5 17)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 15.4 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 5.740000000000002 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.740000000000002 24.199999999999996)"
|
|
href="bead://heaven-col2-active1"
|
|
xlink:href="bead://heaven-col2-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 50.4 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.74 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.74 24.199999999999996)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 85.39999999999999 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 75.74 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 75.74 24.199999999999996)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 42)"
|
|
d="M 0 0v 2.8 h 105 v -2.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 -16.79999999999999)"
|
|
d="M 0 0v 190.96 h 0.5 v -190.96 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 128.51999999999998 -16.79999999999999)"
|
|
d="M 0 0v 190.96 h 0.5 v -190.96 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 -16.79999999999999)"
|
|
d="M 0 0v 0.5 h 152.04 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 174.16)"
|
|
d="M 0 0v 0.5 h 152.04 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 41.9)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -23.519999999999996 41.9)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 128.51999999999998 41.9)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 128.51999999999998 41.9)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 51 -16.79999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 51 -16.79999999999999)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 51 174.16)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 51 174.16)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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="0 0 0 0"
|
|
width="0pt"
|
|
height="0pt"
|
|
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 0v 198 h 366 v -198 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 130.5 17)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 15.4 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 5.740000000000002 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 5.740000000000002 24.199999999999996)"
|
|
href="bead://heaven-col2-active1"
|
|
xlink:href="bead://heaven-col2-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 50.4 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 40.74 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 40.74 24.199999999999996)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 85.39999999999999 24.199999999999996)"
|
|
d="M 0 0v 19.2 h 4.2 v -19.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 75.74 24.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 11.76 0 l 11.76 8.4 l -11.76 8.4 l -11.76 -8.4 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 75.74 24.199999999999996)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="23.519999999999996"
|
|
height="16.8"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 42)"
|
|
d="M 0 0v 2.8 h 105 v -2.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 -16.79999999999999)"
|
|
d="M 0 0v 190.96 h 0.5 v -190.96 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 128.51999999999998 -16.79999999999999)"
|
|
d="M 0 0v 190.96 h 0.5 v -190.96 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 -16.79999999999999)"
|
|
d="M 0 0v 0.5 h 152.04 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 174.16)"
|
|
d="M 0 0v 0.5 h 152.04 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -23.519999999999996 41.9)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -23.519999999999996 41.9)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 128.51999999999998 41.9)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 128.51999999999998 41.9)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 51 -16.79999999999999)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 51 -16.79999999999999)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 51 174.16)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 51 174.16)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 0 0"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 100%
|
|
</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 0v 160 h 274 v -160 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95.75 14.5)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 12.100000000000001 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 11.8)"
|
|
href="bead://heaven-col2-active0"
|
|
xlink:href="bead://heaven-col2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 36.199999999999996)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 49.949999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 49.949999999999996)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 63.69999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 63.69999999999999)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 84.89999999999999)"
|
|
href="bead://earth-col2-pos3-active0"
|
|
xlink:href="bead://earth-col2-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.60000000000001 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 11.8)"
|
|
href="bead://heaven-col1-active0"
|
|
xlink:href="bead://heaven-col1-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 36.199999999999996)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 49.949999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 49.949999999999996)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 71.14999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 71.14999999999999)"
|
|
href="bead://earth-col1-pos2-active0"
|
|
xlink:href="bead://earth-col1-pos2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 84.89999999999999)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 67.10000000000002 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 11.8)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 36.199999999999996)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 57.39999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 57.39999999999999)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 71.14999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 71.14999999999999)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 84.89999999999999)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 33)"
|
|
d="M 0 0v 2.2 h 82.5 v -2.2 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 0)"
|
|
d="M 0 0v 107.8 h 0.5 v -107.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 95.70000000000002 0)"
|
|
d="M 0 0v 107.8 h 0.5 v -107.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 0)"
|
|
d="M 0 0v 0.5 h 108.9 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 107.8)"
|
|
d="M 0 0v 0.5 h 108.9 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 32.6)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -13.200000000000001 32.6)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 95.70000000000002 32.6)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 95.70000000000002 32.6)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.75000000000001 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 39.75000000000001 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.75000000000001 107.8)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 39.75000000000001 107.8)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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="0 0 0 0"
|
|
width="0pt"
|
|
height="0pt"
|
|
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 0v 160 h 274 v -160 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 95.75 14.5)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 12.100000000000001 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 11.8)"
|
|
href="bead://heaven-col2-active0"
|
|
xlink:href="bead://heaven-col2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 36.199999999999996)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 49.949999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 49.949999999999996)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 63.69999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 63.69999999999999)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.150000000000001 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.150000000000001 84.89999999999999)"
|
|
href="bead://earth-col2-pos3-active0"
|
|
xlink:href="bead://earth-col2-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.60000000000001 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 11.8)"
|
|
href="bead://heaven-col1-active0"
|
|
xlink:href="bead://heaven-col1-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 36.199999999999996)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 49.949999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 49.949999999999996)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 71.14999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 71.14999999999999)"
|
|
href="bead://earth-col1-pos2-active0"
|
|
xlink:href="bead://earth-col1-pos2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 34.650000000000006 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 34.650000000000006 84.89999999999999)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 67.10000000000002 11.8)"
|
|
d="M 0 0v 86.3 h 3.3 v -86.3 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 11.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 11.8)"
|
|
href="bead://heaven-col0-active0"
|
|
xlink:href="bead://heaven-col0-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 36.199999999999996)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 36.199999999999996)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 57.39999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 57.39999999999999)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 71.14999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 71.14999999999999)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 62.15000000000001 84.89999999999999)"
|
|
>
|
|
<g>
|
|
<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 0m 0 6.6 c 0 -3.6417744 2.9582255 -6.6 6.6 -6.6 c 3.6417747 0 6.6 2.9582255 6.6 6.6 c 0 3.6417747 -2.9582253 6.6 -6.6 6.6 c -3.6417744 0 -6.6 -2.9582253 -6.6 -6.6 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 62.15000000000001 84.89999999999999)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="13.200000000000001"
|
|
height="13.200000000000001"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 33)"
|
|
d="M 0 0v 2.2 h 82.5 v -2.2 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 0)"
|
|
d="M 0 0v 107.8 h 0.5 v -107.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 95.70000000000002 0)"
|
|
d="M 0 0v 107.8 h 0.5 v -107.8 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 0)"
|
|
d="M 0 0v 0.5 h 108.9 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 107.8)"
|
|
d="M 0 0v 0.5 h 108.9 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -13.200000000000001 32.6)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -13.200000000000001 32.6)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 95.70000000000002 32.6)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 95.70000000000002 32.6)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.75000000000001 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 39.75000000000001 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 39.75000000000001 107.8)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 39.75000000000001 107.8)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="viewbox-info">viewBox="0 0 0 0"</div>
|
|
</div>
|
|
</div>
|
|
<div class="crop-stats">
|
|
<strong>Size Reduction:</strong> 100%
|
|
</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 0v 210 h 270 v -210 Z "
|
|
/>
|
|
<g>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 97.5 17.5)"
|
|
>
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 16.5 26)"
|
|
d="M 0 0v 104.5 h 4.5 v -104.5 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 26)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 26)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 49)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 49)"
|
|
href="bead://earth-col1-pos0-active1"
|
|
xlink:href="bead://earth-col1-pos0-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 67.75)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 67.75)"
|
|
href="bead://earth-col1-pos1-active1"
|
|
xlink:href="bead://earth-col1-pos1-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 86.5)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 86.5)"
|
|
href="bead://earth-col1-pos2-active1"
|
|
xlink:href="bead://earth-col1-pos2-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 6.150000000000001 112.5)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 6.150000000000001 112.5)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 54 26)"
|
|
d="M 0 0v 97.25 h 4.5 v -97.25 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 43.65 26)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.65 26)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 43.65 49)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.65 49)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 43.65 67.75)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.65 67.75)"
|
|
href="bead://earth-col0-pos1-active1"
|
|
xlink:href="bead://earth-col0-pos1-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 43.65 86.5)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.65 86.5)"
|
|
href="bead://earth-col0-pos2-active1"
|
|
xlink:href="bead://earth-col0-pos2-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 43.65 105.25)"
|
|
>
|
|
<g>
|
|
<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 0m 12.6 0 l 12.6 9 l -12.6 9 l -12.6 -9 Z "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.65 105.25)"
|
|
href="bead://earth-col0-pos3-active1"
|
|
xlink:href="bead://earth-col0-pos3-active1"
|
|
>
|
|
<rect
|
|
width="25.199999999999996"
|
|
height="18"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 45)"
|
|
d="M 0 0v 3 h 75 v -3 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -25.199999999999996 -17.999999999999993)"
|
|
d="M 0 0v 204.6 h 0.5 v -204.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 100.2 -17.999999999999993)"
|
|
d="M 0 0v 204.6 h 0.5 v -204.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -25.199999999999996 -17.999999999999993)"
|
|
d="M 0 0v 0.5 h 125.4 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -25.199999999999996 186.59999999999997)"
|
|
d="M 0 0v 0.5 h 125.4 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -25.199999999999996 45)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -25.199999999999996 45)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 100.2 45)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 100.2 45)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 36 -17.999999999999993)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 36 -17.999999999999993)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 36 186.59999999999997)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 36 186.59999999999997)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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 0v 174 h 312 v -174 Z "
|
|
/>
|
|
<g>
|
|
<g class="typst-group" transform="matrix(1 0 0 1 111 16)">
|
|
<g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 13.200000000000001 13.599999999999998)"
|
|
d="M 0 0v 85.2 h 3.6 v -85.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.8 13.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.8 13.599999999999998)"
|
|
href="bead://heaven-col2-active0"
|
|
xlink:href="bead://heaven-col2-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.8 39.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.8 39.4)"
|
|
href="bead://earth-col2-pos0-active1"
|
|
xlink:href="bead://earth-col2-pos0-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.8 54.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.8 54.4)"
|
|
href="bead://earth-col2-pos1-active1"
|
|
xlink:href="bead://earth-col2-pos1-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.8 69.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.8 69.4)"
|
|
href="bead://earth-col2-pos2-active1"
|
|
xlink:href="bead://earth-col2-pos2-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 7.8 84.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 7.8 84.4)"
|
|
href="bead://earth-col2-pos3-active1"
|
|
xlink:href="bead://earth-col2-pos3-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 43.199999999999996 20.599999999999998)"
|
|
d="M 0 0v 85.2 h 3.6 v -85.2 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 37.800000000000004 20.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 37.800000000000004 20.599999999999998)"
|
|
href="bead://heaven-col1-active1"
|
|
xlink:href="bead://heaven-col1-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 37.800000000000004 46.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 37.800000000000004 46.4)"
|
|
href="bead://earth-col1-pos0-active0"
|
|
xlink:href="bead://earth-col1-pos0-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 37.800000000000004 61.400000000000006)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 37.800000000000004 61.400000000000006)"
|
|
href="bead://earth-col1-pos1-active0"
|
|
xlink:href="bead://earth-col1-pos1-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 37.800000000000004 76.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 37.800000000000004 76.4)"
|
|
href="bead://earth-col1-pos2-active0"
|
|
xlink:href="bead://earth-col1-pos2-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 37.800000000000004 91.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 37.800000000000004 91.4)"
|
|
href="bead://earth-col1-pos3-active0"
|
|
xlink:href="bead://earth-col1-pos3-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#eeeeee"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 73.2 20.599999999999998)"
|
|
d="M 0 0v 85.6 h 3.6 v -85.6 Z "
|
|
/>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 67.8 20.599999999999998)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 67.8 20.599999999999998)"
|
|
href="bead://heaven-col0-active1"
|
|
xlink:href="bead://heaven-col0-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 67.8 39.4)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 67.8 39.4)"
|
|
href="bead://earth-col0-pos0-active1"
|
|
xlink:href="bead://earth-col0-pos0-active1"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 67.8 61.800000000000004)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 67.8 61.800000000000004)"
|
|
href="bead://earth-col0-pos1-active0"
|
|
xlink:href="bead://earth-col0-pos1-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 67.8 76.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 67.8 76.8)"
|
|
href="bead://earth-col0-pos2-active0"
|
|
xlink:href="bead://earth-col0-pos2-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<g
|
|
class="typst-group"
|
|
transform="matrix(1 0 0 1 67.8 91.8)"
|
|
>
|
|
<g>
|
|
<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 0m 0 7.2 c 0 -3.9728446 3.2271552 -7.2 7.2 -7.2 c 3.972845 0 7.2 3.2271552 7.2 7.2 c 0 3.972845 -3.2271547 7.2 -7.2 7.2 c -3.9728446 0 -7.2 -3.2271547 -7.2 -7.2 "
|
|
/>
|
|
</g>
|
|
</g>
|
|
<a
|
|
transform="matrix(1 0 0 1 67.8 91.8)"
|
|
href="bead://earth-col0-pos3-active0"
|
|
xlink:href="bead://earth-col0-pos3-active0"
|
|
>
|
|
<rect
|
|
width="14.4"
|
|
height="14.4"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#000000"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 0 36)"
|
|
d="M 0 0v 2.4 h 90 v -2.4 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -14.4 0)"
|
|
d="M 0 0v 117.6 h 0.5 v -117.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 104.39999999999999 0)"
|
|
d="M 0 0v 117.6 h 0.5 v -117.6 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -14.4 0)"
|
|
d="M 0 0v 0.5 h 118.8 v -0.5 Z "
|
|
/>
|
|
<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"
|
|
transform="matrix(1 0 0 1 -14.4 117.60000000000001)"
|
|
d="M 0 0v 0.5 h 118.8 v -0.5 Z "
|
|
/>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 -14.4 35.699999999999996)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 -14.4 35.699999999999996)"
|
|
href="crop-mark://left"
|
|
xlink:href="crop-mark://left"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 104.39999999999999 35.699999999999996)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 104.39999999999999 35.699999999999996)"
|
|
href="crop-mark://right"
|
|
xlink:href="crop-mark://right"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 43.5 0)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.5 0)"
|
|
href="crop-mark://top"
|
|
xlink:href="crop-mark://top"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</g>
|
|
</g>
|
|
<g class="typst-group">
|
|
<g>
|
|
<path
|
|
class="typst-shape"
|
|
fill="#ff4136"
|
|
fill-rule="nonzero"
|
|
transform="matrix(1 0 0 1 43.5 117.60000000000001)"
|
|
d="M 0 0v 0.1 h 0.1 v -0.1 Z "
|
|
/>
|
|
<a
|
|
transform="matrix(1 0 0 1 43.5 117.60000000000001)"
|
|
href="crop-mark://bottom"
|
|
xlink:href="crop-mark://bottom"
|
|
>
|
|
<rect
|
|
width="0.1"
|
|
height="0.1"
|
|
fill="transparent"
|
|
stroke="none"
|
|
/>
|
|
</a>
|
|
</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>
|