Ticket lab
Adjust any field and watch the ticket redraw. Download the SVG to compare versions.
CANVAS
MARKET
SIDE
STATE
STRIKE USD
STAKE BNB
TICKET NO.
ABOVE 60%
One pure function draws everything from the ticket's data. Barcode and grain are seeded by the ticket number. The square canvas is what marketplace grids will show; the slip is the ticket itself.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 760" width="480" height="760">
<defs>
<linearGradient id="foil" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#FFE48A"/><stop offset="0.35" stop-color="#F0B90B"/><stop offset="0.6" stop-color="#FFF1B8"/><stop offset="1" stop-color="#C99400"/>
</linearGradient>
<filter id="grain" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="42" result="n"/>
<feColorMatrix in="n" type="saturate" values="0"/>
<feComponentTransfer><feFuncA type="linear" slope="0.07"/></feComponentTransfer>
</filter>
<filter id="gray"><feColorMatrix type="saturate" values="0.08"/></filter>
<mask id="notch">
<rect width="480" height="760" fill="#fff"/>
<circle cx="24" cy="584" r="14" fill="#000"/>
<circle cx="456" cy="584" r="14" fill="#000"/>
</mask>
</defs>
<rect width="480" height="760" fill="#0B0E11"/>
<g mask="url(#notch)">
<rect x="24" y="24" width="432" height="712" fill="#0B0E11" stroke="#F0B90B" stroke-width="3"/>
<rect x="24" y="24" width="432" height="88" fill="#F0B90B"/>
<text x="44" y="86" font-family="Archivo, 'Arial Narrow', Arial, Helvetica, sans-serif" font-weight="900" font-size="46" fill="#0B0E11" letter-spacing="-1">STUBS</text>
<text x="436" y="58" text-anchor="end" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="12" fill="#0B0E11" letter-spacing="2">ROUND 04</text>
<text x="436" y="86" text-anchor="end" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-weight="600" font-size="20" fill="#0B0E11">No. 000042</text>
<g>
<circle cx="60" cy="130" r="4" fill="#0ECB81"/><text x="72" y="134" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#0ECB81" letter-spacing="2">LIVE</text>
<text x="436" y="134" text-anchor="end" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#848E9C" letter-spacing="2">BNB CHAIN</text>
<text x="44" y="172" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#848E9C" letter-spacing="2">MARKET</text>
<text x="44" y="226" font-family="Archivo, 'Arial Narrow', Arial, Helvetica, sans-serif" font-weight="900" font-size="58" fill="#F0B90B" letter-spacing="-2">NVDAb</text>
<text x="44" y="252" font-family="Archivo, 'Arial Narrow', Arial, Helvetica, sans-serif" font-size="15" fill="#EAECEF">NVIDIA bStock</text>
<rect x="44" y="286" width="118" height="44" rx="4" fill="#0ECB81"/>
<text x="103" y="316" text-anchor="middle" font-family="Archivo, 'Arial Narrow', Arial, Helvetica, sans-serif" font-weight="900" font-size="22" fill="#0B0E11" letter-spacing="2">ABOVE</text>
<text x="180" y="318" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-weight="600" font-size="38" fill="#EAECEF">215.00</text>
<text x="180" y="340" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#848E9C" letter-spacing="2">USD STRIKE</text>
<line x1="44" y1="368" x2="436" y2="368" stroke="#2B3139" stroke-width="1"/>
<text x="44" y="394" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="2">SETTLES</text>
<text x="44" y="414" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="13" fill="#EAECEF">FRI 30 OCT 20:00 UTC</text>
<text x="300" y="394" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="2">STAKE</text>
<text x="300" y="414" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="13" fill="#EAECEF">0.01 BNB</text>
<text x="44" y="446" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="2">PRICE SOURCE</text>
<text x="44" y="466" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="13" fill="#EAECEF">PancakeSwap NVDAb/USDT TWAP</text>
<text x="300" y="446" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="2">IF RIGHT</text>
<text x="300" y="466" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="13" fill="#F0B90B">0.0165 BNB</text>
<text x="44" y="500" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="2">POOL 5.00 BNB</text>
<rect x="44" y="510" width="392" height="10" fill="#1E2026"/>
<rect x="44" y="510" width="235" height="10" fill="#0ECB81"/>
<rect x="279" y="510" width="157" height="10" fill="#F6465D"/>
<text x="44" y="540" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#0ECB81">ABOVE 60%</text>
<text x="436" y="540" text-anchor="end" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#F6465D">BELOW 40%</text>
</g>
<rect x="28" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="40" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="52" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="64" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="76" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="88" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="100" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="112" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="124" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="136" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="148" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="160" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="172" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="184" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="196" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="208" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="220" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="232" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="244" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="256" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="268" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="280" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="292" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="304" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="316" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="328" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="340" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="352" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="364" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="376" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="388" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="400" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="412" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="424" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="436" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/><rect x="448" y="583" width="6" height="2" fill="#F0B90B" opacity="0.8"/>
<g>
<text x="44" y="620" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="11" fill="#848E9C" letter-spacing="2">STUB-04-000042</text>
<text x="436" y="620" text-anchor="end" font-family="Archivo, 'Arial Narrow', Arial, Helvetica, sans-serif" font-size="13" fill="#F0B90B">赌票人生</text>
<rect x="44" y="640" width="3" height="64" fill="#EAECEF"/><rect x="49" y="640" width="2" height="64" fill="#EAECEF"/><rect x="54" y="640" width="3" height="64" fill="#EAECEF"/><rect x="59" y="640" width="3" height="64" fill="#EAECEF"/><rect x="64" y="640" width="4" height="64" fill="#EAECEF"/><rect x="72" y="640" width="5" height="64" fill="#EAECEF"/><rect x="80" y="640" width="2" height="64" fill="#EAECEF"/><rect x="85" y="640" width="2" height="64" fill="#EAECEF"/><rect x="90" y="640" width="5" height="64" fill="#EAECEF"/><rect x="97" y="640" width="4" height="64" fill="#EAECEF"/><rect x="104" y="640" width="5" height="64" fill="#EAECEF"/><rect x="113" y="640" width="4" height="64" fill="#EAECEF"/><rect x="119" y="640" width="4" height="64" fill="#EAECEF"/><rect x="127" y="640" width="3" height="64" fill="#EAECEF"/><rect x="133" y="640" width="4" height="64" fill="#EAECEF"/><rect x="140" y="640" width="4" height="64" fill="#EAECEF"/><rect x="146" y="640" width="5" height="64" fill="#EAECEF"/><rect x="154" y="640" width="2" height="64" fill="#EAECEF"/><rect x="159" y="640" width="3" height="64" fill="#EAECEF"/><rect x="166" y="640" width="2" height="64" fill="#EAECEF"/><rect x="171" y="640" width="4" height="64" fill="#EAECEF"/><rect x="178" y="640" width="4" height="64" fill="#EAECEF"/><rect x="184" y="640" width="2" height="64" fill="#EAECEF"/><rect x="188" y="640" width="3" height="64" fill="#EAECEF"/><rect x="193" y="640" width="2" height="64" fill="#EAECEF"/><rect x="197" y="640" width="4" height="64" fill="#EAECEF"/><rect x="203" y="640" width="5" height="64" fill="#EAECEF"/><rect x="211" y="640" width="4" height="64" fill="#EAECEF"/><rect x="218" y="640" width="3" height="64" fill="#EAECEF"/><rect x="223" y="640" width="5" height="64" fill="#EAECEF"/><rect x="230" y="640" width="4" height="64" fill="#EAECEF"/><rect x="238" y="640" width="4" height="64" fill="#EAECEF"/><rect x="245" y="640" width="4" height="64" fill="#EAECEF"/><rect x="253" y="640" width="5" height="64" fill="#EAECEF"/><rect x="260" y="640" width="4" height="64" fill="#EAECEF"/><rect x="267" y="640" width="3" height="64" fill="#EAECEF"/><rect x="274" y="640" width="2" height="64" fill="#EAECEF"/><rect x="280" y="640" width="3" height="64" fill="#EAECEF"/><rect x="285" y="640" width="4" height="64" fill="#EAECEF"/><rect x="292" y="640" width="4" height="64" fill="#EAECEF"/><rect x="299" y="640" width="3" height="64" fill="#EAECEF"/><rect x="305" y="640" width="3" height="64" fill="#EAECEF"/><rect x="311" y="640" width="4" height="64" fill="#EAECEF"/><rect x="319" y="640" width="3" height="64" fill="#EAECEF"/><rect x="324" y="640" width="4" height="64" fill="#EAECEF"/><rect x="330" y="640" width="3" height="64" fill="#EAECEF"/><rect x="336" y="640" width="5" height="64" fill="#EAECEF"/><rect x="343" y="640" width="5" height="64" fill="#EAECEF"/><rect x="352" y="640" width="2" height="64" fill="#EAECEF"/><rect x="358" y="640" width="4" height="64" fill="#EAECEF"/><rect x="366" y="640" width="4" height="64" fill="#EAECEF"/><rect x="373" y="640" width="4" height="64" fill="#EAECEF"/><rect x="380" y="640" width="2" height="64" fill="#EAECEF"/><rect x="386" y="640" width="3" height="64" fill="#EAECEF"/><rect x="392" y="640" width="5" height="64" fill="#EAECEF"/><rect x="401" y="640" width="4" height="64" fill="#EAECEF"/><rect x="408" y="640" width="2" height="64" fill="#EAECEF"/><rect x="413" y="640" width="4" height="64" fill="#EAECEF"/><rect x="421" y="640" width="4" height="64" fill="#EAECEF"/><rect x="428" y="640" width="3" height="64" fill="#EAECEF"/><rect x="434" y="640" width="4" height="64" fill="#EAECEF"/>
<text x="44" y="726" font-family="'IBM Plex Mono', Menlo, Consolas, monospace" font-size="10" fill="#848E9C" letter-spacing="1">KEEP THIS STUB · PARIMUTUEL · 3% HOUSE</text>
</g>
</g>
<rect width="480" height="760" filter="url(#grain)" opacity="0.9" style="mix-blend-mode:screen"/>
</svg>