smiles-drawer
Version:
A SMILES drawer and parser. Generate molecular structure depictions in pure JavaScript.
146 lines • 59.6 kB
HTML
<!DOCTYPE html><html lang="en"> <head><!-- Google tag (gtag.js) --><script async src="https://www.googletagmanager.com/gtag/js?id=G-DWK15V0MRS"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DWK15V0MRS');
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Gallery of molecules, reactions, and atom-weight overlays rendered with SmilesDrawer."><link rel="icon" type="image/svg+xml" href="/smilesDrawer/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><title>Examples | SmilesDrawer</title><!-- SmilesDrawer library + shared rendering helpers --><script src="/smilesDrawer/js/smiles-drawer.min.js"></script><script src="/smilesDrawer/js/smiles-website.js"></script><link rel="stylesheet" href="/smilesDrawer/_astro/examples.7q3mxKxv.css"></head> <body class="min-h-screen flex flex-col"> <header class="sticky top-0 z-40 bg-paper border-b border-ink"> <div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4"> <a href="/smilesDrawer" class="flex items-baseline gap-2 no-underline"> <span class="text-[14px] font-extrabold tracking-tight text-ink">SMILESDRAWER</span> <span class="text-[10px] font-medium text-ink-hint uppercase tracking-[0.1em]">v2.2.1</span> </a> <nav class="flex items-center gap-7"> <a href="/smilesDrawer/getting-started" class="btn-ghost "> <span class="text-[9px] text-ink-faint font-semibold">01</span> <span>Docs</span> </a> <a href="/smilesDrawer/playground" class="btn-ghost "> <span class="text-[9px] text-ink-faint font-semibold">02</span> <span>Playground</span> </a> <a href="/smilesDrawer/examples" class="btn-ghost text-mint-deep"> <span class="text-[9px] text-ink-faint font-semibold">03</span> <span>Examples</span> </a> <a href="https://github.com/reymond-group/smilesDrawer" target="_blank" rel="noopener" class="btn-ghost"> <span class="text-[9px] text-ink-faint font-semibold">04</span> <span>GitHub ↗</span> </a> </nav> </div> </header> <main class="flex-1"> <section class="border-b border-ink bg-paper"> <div class="max-w-7xl mx-auto px-6 py-10"> <div class="eyebrow mb-2">03 / EXAMPLES</div> <h1 class="text-[34px] sm:text-[40px] font-extrabold tracking-[-0.025em] text-ink">Reference renders.</h1> <p class="mt-3 max-w-2xl text-[14px] text-ink-muted">
Molecules, reactions, and weighted overlays across every theme. Click a card to open in the playground.
</p> </div> </section> <section class="border-b border-rule bg-white sticky top-[65px] z-30"> <div class="max-w-7xl mx-auto px-6 py-3 flex flex-wrap items-center gap-3"> <div class="flex flex-wrap gap-1"> <a href="#simple" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Simple Molecules </a><a href="#aromatic" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Aromatic Rings </a><a href="#heterocycles" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Heterocycles </a><a href="#drugs" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Drugs </a><a href="#complex" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Complex Molecules </a><a href="#stereo" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Stereochemistry </a><a href="#reactions" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Reactions </a><a href="#weights" class="text-[10px] font-bold uppercase tracking-[0.06em] px-2.5 py-1.5 border border-rule rounded-sm text-ink hover:border-mint hover:bg-mint-tint transition-colors"> Weights </a> </div> <div class="ml-auto flex items-center gap-2"> <label for="gallery-theme" class="text-[10px] font-bold uppercase tracking-[0.12em] text-ink-hint">THEME</label> <select id="gallery-theme" class="text-[11px] font-mono border border-rule rounded-sm px-2 py-1 bg-white"> <option value="light">light</option><option value="dark">dark</option><option value="oldschool">oldschool</option><option value="solarized">solarized</option><option value="solarized-dark">solarized-dark</option><option value="matrix">matrix</option><option value="github">github</option><option value="carbon">carbon</option><option value="cyberpunk">cyberpunk</option><option value="gruvbox">gruvbox</option><option value="gruvbox-dark">gruvbox-dark</option> </select> </div> </div> </section> <div class="max-w-7xl mx-auto px-6 py-12"> <section id="simple" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Simple Molecules</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Basic organic structures and the fastest path to sanity-checking a render preset.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CO"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-methanol" data-smiles="CO" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Methanol</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CO">CO</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CO" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-methanol">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CCO"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-ethanol" data-smiles="CCO" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Ethanol</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CCO">CCO</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CCO" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-ethanol">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-acetic-acid" data-smiles="CC(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Acetic acid</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(=O)O">CC(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CC(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-acetic-acid">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="FC(F)(F)C(Cl)Br"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-halothane" data-smiles="FC(F)(F)C(Cl)Br" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Halothane</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="FC(F)(F)C(Cl)Br">FC(F)(F)C(Cl)Br</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=FC(F)(F)C(Cl)Br" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-halothane">
Download SVG
</button> </div> </div> </div> </section><section id="aromatic" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Aromatic Rings</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Aromatics, fused rings, and common systems where spacing and bond clarity matter.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="Cc1ccccc1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-toluene" data-smiles="Cc1ccccc1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Toluene</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="Cc1ccccc1">Cc1ccccc1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=Cc1ccccc1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-toluene">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="Oc1ccccc1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-phenol" data-smiles="Oc1ccccc1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Phenol</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="Oc1ccccc1">Oc1ccccc1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=Oc1ccccc1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-phenol">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="c1ccc2cc3ccccc3cc2c1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-anthracene" data-smiles="c1ccc2cc3ccccc3cc2c1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Anthracene</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="c1ccc2cc3ccccc3cc2c1">c1ccc2cc3ccccc3cc2c1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=c1ccc2cc3ccccc3cc2c1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-anthracene">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C1=CC=CC=C1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-benzene-(kekulé)" data-smiles="C1=CC=CC=C1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Benzene (Kekulé)</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C1=CC=CC=C1">C1=CC=CC=C1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C1%3DCC%3DCC%3DC1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-benzene-(kekulé)">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C1=CC=C2C=CC=CC2=C1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-naphthalene-(kekulé)" data-smiles="C1=CC=C2C=CC=CC2=C1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Naphthalene (Kekulé)</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C1=CC=C2C=CC=CC2=C1">C1=CC=C2C=CC=CC2=C1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C1%3DCC%3DC2C%3DCC%3DCC2%3DC1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-naphthalene-(kekulé)">
Download SVG
</button> </div> </div> </div> </section><section id="heterocycles" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Heterocycles</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Nitrogen-, oxygen-, and sulfur-containing rings that quickly expose label crowding.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="c1ccncc1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-pyridine" data-smiles="c1ccncc1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Pyridine</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="c1ccncc1">c1ccncc1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=c1ccncc1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-pyridine">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="c1ccc2[nH]ccc2c1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-indole" data-smiles="c1ccc2[nH]ccc2c1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Indole</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="c1ccc2[nH]ccc2c1">c1ccc2[nH]ccc2c1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=c1ccc2%5BnH%5Dccc2c1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-indole">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="c1ccsc1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-thiophene" data-smiles="c1ccsc1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Thiophene</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="c1ccsc1">c1ccsc1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=c1ccsc1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-thiophene">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C1=CC=NC=C1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-pyridine-(kekulé)" data-smiles="C1=CC=NC=C1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Pyridine (Kekulé)</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C1=CC=NC=C1">C1=CC=NC=C1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C1%3DCC%3DNC%3DC1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-pyridine-(kekulé)">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C1=CC=C2NC=CC2=C1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-indole-(kekulé)" data-smiles="C1=CC=C2NC=CC2=C1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Indole (Kekulé)</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C1=CC=C2NC=CC2=C1">C1=CC=C2NC=CC2=C1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C1%3DCC%3DC2NC%3DCC2%3DC1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-indole-(kekulé)">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CSC(=O)c1c(C)c(C(F)F)nc(C(F)(F)F)c1C(=O)SC"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-dithiopyr" data-smiles="CSC(=O)c1c(C)c(C(F)F)nc(C(F)(F)F)c1C(=O)SC" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Dithiopyr</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CSC(=O)c1c(C)c(C(F)F)nc(C(F)(F)F)c1C(=O)SC">CSC(=O)c1c(C)c(C(F)F)nc(C(F)(F)F)c1C(=O)SC</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CSC(%3DO)c1c(C)c(C(F)F)nc(C(F)(F)F)c1C(%3DO)SC" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-dithiopyr">
Download SVG
</button> </div> </div> </div> </section><section id="drugs" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Drugs</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Common pharmaceutical structures with stereochemistry and denser functional group labeling.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(=O)Oc1ccccc1C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-aspirin" data-smiles="CC(=O)Oc1ccccc1C(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Aspirin</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(=O)Oc1ccccc1C(=O)O">CC(=O)Oc1ccccc1C(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CC(%3DO)Oc1ccccc1C(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-aspirin">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-caffeine" data-smiles="CN1C=NC2=C1C(=O)N(C(=O)N2C)C" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Caffeine</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CN1C=NC2=C1C(=O)N(C(=O)N2C)C">CN1C=NC2=C1C(=O)N(C(=O)N2C)C</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CN1C%3DNC2%3DC1C(%3DO)N(C(%3DO)N2C)C" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-caffeine">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C1COCC(=O)N1C2=CC=C(C=C2)N3C[C@@H](OC3=O)CNC(=O)C4=CC=C(S4)Cl"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-rivaroxaban" data-smiles="C1COCC(=O)N1C2=CC=C(C=C2)N3C[C@@H](OC3=O)CNC(=O)C4=CC=C(S4)Cl" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Rivaroxaban</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C1COCC(=O)N1C2=CC=C(C=C2)N3C[C@@H](OC3=O)CNC(=O)C4=CC=C(S4)Cl">C1COCC(=O)N1C2=CC=C(C=C2)N3C[C@@H](OC3=O)CNC(=O)C4=CC=C(S4)Cl</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C1COCC(%3DO)N1C2%3DCC%3DC(C%3DC2)N3C%5BC%40%40H%5D(OC3%3DO)CNC(%3DO)C4%3DCC%3DC(S4)Cl" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-rivaroxaban">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="Cc1cc(NS(=O)(=O)c2ccc(N)cc2)no1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-sulfamethoxazole" data-smiles="Cc1cc(NS(=O)(=O)c2ccc(N)cc2)no1" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Sulfamethoxazole</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="Cc1cc(NS(=O)(=O)c2ccc(N)cc2)no1">Cc1cc(NS(=O)(=O)c2ccc(N)cc2)no1</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=Cc1cc(NS(%3DO)(%3DO)c2ccc(N)cc2)no1" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-sulfamethoxazole">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="O=C(NC(CO)C(O)c1ccc([N+](=O)[O-])cc1)C(Cl)Cl"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-chloramphenicol" data-smiles="O=C(NC(CO)C(O)c1ccc([N+](=O)[O-])cc1)C(Cl)Cl" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Chloramphenicol</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="O=C(NC(CO)C(O)c1ccc([N+](=O)[O-])cc1)C(Cl)Cl">O=C(NC(CO)C(O)c1ccc([N+](=O)[O-])cc1)C(Cl)Cl</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=O%3DC(NC(CO)C(O)c1ccc(%5BN%2B%5D(%3DO)%5BO-%5D)cc1)C(Cl)Cl" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-chloramphenicol">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(=O)OC[C@H]1O[C@@H](S[Au]P(CC)(CC)CC)[C@H](OC(C)=O)[C@@H](OC(C)=O)[C@@H]1OC(=O)C"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-auranofin" data-smiles="CC(=O)OC[C@H]1O[C@@H](S[Au]P(CC)(CC)CC)[C@H](OC(C)=O)[C@@H](OC(C)=O)[C@@H]1OC(=O)C" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Auranofin</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(=O)OC[C@H]1O[C@@H](S[Au]P(CC)(CC)CC)[C@H](OC(C)=O)[C@@H](OC(C)=O)[C@@H]1OC(=O)C">CC(=O)OC[C@H]1O[C@@H](S[Au]P(CC)(CC)CC)[C@H](OC(C)=O)[C@@H](OC(C)=O)[C@@H]1OC(=O)C</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CC(%3DO)OC%5BC%40H%5D1O%5BC%40%40H%5D(S%5BAu%5DP(CC)(CC)CC)%5BC%40H%5D(OC(C)%3DO)%5BC%40%40H%5D(OC(C)%3DO)%5BC%40%40H%5D1OC(%3DO)C" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-auranofin">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="N[C@@H](Cc1cc(I)c(Oc2cc(I)c(O)c(I)c2)c(I)c1)C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-thyroxine" data-smiles="N[C@@H](Cc1cc(I)c(Oc2cc(I)c(O)c(I)c2)c(I)c1)C(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Thyroxine</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="N[C@@H](Cc1cc(I)c(Oc2cc(I)c(O)c(I)c2)c(I)c1)C(=O)O">N[C@@H](Cc1cc(I)c(Oc2cc(I)c(O)c(I)c2)c(I)c1)C(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=N%5BC%40%40H%5D(Cc1cc(I)c(Oc2cc(I)c(O)c(I)c2)c(I)c1)C(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-thyroxine">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(C)OP(C)(F)=O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-sarin" data-smiles="CC(C)OP(C)(F)=O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Sarin</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(C)OP(C)(F)=O">CC(C)OP(C)(F)=O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CC(C)OP(C)(F)%3DO" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-sarin">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CCOP(=O)(C)SCCN(C(C)C)C(C)C"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-vx" data-smiles="CCOP(=O)(C)SCCN(C(C)C)C(C)C" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">VX</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CCOP(=O)(C)SCCN(C(C)C)C(C)C">CCOP(=O)(C)SCCN(C(C)C)C(C)C</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CCOP(%3DO)(C)SCCN(C(C)C)C(C)C" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-vx">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CCOP(=O)(C#N)N(C)C"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-tabun" data-smiles="CCOP(=O)(C#N)N(C)C" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Tabun</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CCOP(=O)(C#N)N(C)C">CCOP(=O)(C#N)N(C)C</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CCOP(%3DO)(C%23N)N(C)C" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-tabun">
Download SVG
</button> </div> </div> </div> </section><section id="complex" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Complex Molecules</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Larger structures where automatic sizing and selective overrides make the biggest difference.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C[C@H](CCCC(C)C)[C@H]1CC[C@@H]2[C@@]1(CC[C@H]3[C@H]2CC=C4[C@@]3(CC[C@@H](C4)O)C)C"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-cholesterol" data-smiles="C[C@H](CCCC(C)C)[C@H]1CC[C@@H]2[C@@]1(CC[C@H]3[C@H]2CC=C4[C@@]3(CC[C@@H](C4)O)C)C" class="molecule-svg w-full h-full" data-render-config="{"bondLength":16.2,"fontSizeLarge":5.4,"padding":8}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Cholesterol</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C[C@H](CCCC(C)C)[C@H]1CC[C@@H]2[C@@]1(CC[C@H]3[C@H]2CC=C4[C@@]3(CC[C@@H](C4)O)C)C">C[C@H](CCCC(C)C)[C@H]1CC[C@@H]2[C@@]1(CC[C@H]3[C@H]2CC=C4[C@@]3(CC[C@@H](C4)O)C)C</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C%5BC%40H%5D(CCCC(C)C)%5BC%40H%5D1CC%5BC%40%40H%5D2%5BC%40%40%5D1(CC%5BC%40H%5D3%5BC%40H%5D2CC%3DC4%5BC%40%40%5D3(CC%5BC%40%40H%5D(C4)O)C)C" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-cholesterol">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-glucose" data-smiles="OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O" class="molecule-svg w-full h-full" data-render-config="{"bondLength":17.8,"fontSizeLarge":5.6,"padding":8}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Glucose</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O">OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=OC%5BC%40H%5D1OC(O)%5BC%40H%5D(O)%5BC%40%40H%5D(O)%5BC%40%40H%5D1O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-glucose">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C[C@]12CC[C@H]3[C@@H](CCC4=CC(=O)CC[C@@]34C)[C@@H]1CC[C@@H]2O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-testosterone" data-smiles="C[C@]12CC[C@H]3[C@@H](CCC4=CC(=O)CC[C@@]34C)[C@@H]1CC[C@@H]2O" class="molecule-svg w-full h-full" data-render-config="{"bondLength":16,"fontSizeLarge":5.3,"padding":8}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Testosterone</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C[C@]12CC[C@H]3[C@@H](CCC4=CC(=O)CC[C@@]34C)[C@@H]1CC[C@@H]2O">C[C@]12CC[C@H]3[C@@H](CCC4=CC(=O)CC[C@@]34C)[C@@H]1CC[C@@H]2O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C%5BC%40%5D12CC%5BC%40H%5D3%5BC%40%40H%5D(CCC4%3DCC(%3DO)CC%5BC%40%40%5D34C)%5BC%40%40H%5D1CC%5BC%40%40H%5D2O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-testosterone">
Download SVG
</button> </div> </div> </div> </section><section id="stereo" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Stereochemistry</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Chiral examples for checking wedge bonds, hydrogens, and compact drawing tradeoffs.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="N[C@@H](C)C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-l-alanine" data-smiles="N[C@@H](C)C(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">L-Alanine</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="N[C@@H](C)C(=O)O">N[C@@H](C)C(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=N%5BC%40%40H%5D(C)C(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-l-alanine">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="N[C@H](C)C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-d-alanine" data-smiles="N[C@H](C)C(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">D-Alanine</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="N[C@H](C)C(=O)O">N[C@H](C)C(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=N%5BC%40H%5D(C)C(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-d-alanine">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="N[C@@H](Cc1c[nH]c2ccccc12)C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-l-tryptophan" data-smiles="N[C@@H](Cc1c[nH]c2ccccc12)C(=O)O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">L-Tryptophan</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="N[C@@H](Cc1c[nH]c2ccccc12)C(=O)O">N[C@@H](Cc1c[nH]c2ccccc12)C(=O)O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=N%5BC%40%40H%5D(Cc1c%5BnH%5Dc2ccccc12)C(%3DO)O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-l-tryptophan">
Download SVG
</button> </div> </div> </div> </section> <section id="reactions" class="mb-16 scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Reactions</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Reaction SMILES rendered with reagent placement and arrow annotations intact.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CBr.[OH-]>>CO.[Br-]"> <div class="grid-paper flex items-center justify-center p-4 aspect-[2/1]" data-theme-surface="true"> <svg id="mol-sn2-reaction" data-smiles="CBr.[OH-]>>CO.[Br-]" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">SN2 Reaction</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CBr.[OH-]>>CO.[Br-]">CBr.[OH-]>>CO.[Br-]</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CBr.%5BOH-%5D%3E%3ECO.%5BBr-%5D" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-sn2-reaction">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(=O)O.CO>>CC(=O)OC.O"> <div class="grid-paper flex items-center justify-center p-4 aspect-[2/1]" data-theme-surface="true"> <svg id="mol-esterification" data-smiles="CC(=O)O.CO>>CC(=O)OC.O" class="molecule-svg w-full h-full"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Esterification</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(=O)O.CO>>CC(=O)OC.O">CC(=O)O.CO>>CC(=O)OC.O</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=CC(%3DO)O.CO%3E%3ECC(%3DO)OC.O" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-esterification">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="C=CCBr.[Na+].[I-]>CC(=O)C>C=CCI.[Na+].[Br-] __{'textAboveArrow': 'acetone', 'textBelowArrow': '90%'}__"> <div class="grid-paper flex items-center justify-center p-4 aspect-[2/1]" data-theme-surface="true"> <svg id="mol-finkelstein-(with-reagent)" data-smiles="C=CCBr.[Na+].[I-]>CC(=O)C>C=CCI.[Na+].[Br-] __{'textAboveArrow': 'acetone', 'textBelowArrow': '90%'}__" class="molecule-svg w-full h-full" data-render-config="{"bondLength":16.8,"fontSizeLarge":5.4,"padding":20}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Finkelstein (with reagent)</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="C=CCBr.[Na+].[I-]>CC(=O)C>C=CCI.[Na+].[Br-] __{'textAboveArrow': 'acetone', 'textBelowArrow': '90%'}__">C=CCBr.[Na+].[I-]>CC(=O)C>C=CCI.[Na+].[Br-] __{'textAboveArrow': 'acetone', 'textBelowArrow': '90%'}__</div> </div> <div class="flex border-t border-rule"> <a href="/smilesDrawer/playground?smiles=C%3DCCBr.%5BNa%2B%5D.%5BI-%5D%3ECC(%3DO)C%3EC%3DCCI.%5BNa%2B%5D.%5BBr-%5D%20%20__%7B'textAboveArrow'%3A%20'acetone'%2C%20'textBelowArrow'%3A%20'90%25'%7D__" class="flex-1 py-2.5 text-center text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper border-r border-rule last:border-r-0">
Open in Playground
</a> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-finkelstein-(with-reagent)">
Download SVG
</button> </div> </div> </div> </section> <section id="weights" class="scroll-mt-24 border-t border-rule pt-8"> <div class="max-w-3xl mb-6"> <h2 class="text-2xl font-bold tracking-[-0.03em] text-gray-900 dark:text-white">Weights / Heatmap</h2> <p class="mt-2 text-sm sm:text-base text-gray-500 dark:text-gray-400">Per-atom signed values rendered into a red/green overlay, using the same site themes as the rest of the gallery.</p> </div> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="c1ccc(Nc2ccccc2)cc1"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-diphenylamine-charges" data-smiles="c1ccc(Nc2ccccc2)cc1" class="molecule-svg w-full h-full weight-svg" data-smiles-weights="-0.1,-0.05,0.1,-0.05,-0.1,0.3,-0.4,0.3,-0.1,-0.05,0.1,-0.05,-0.1" data-smiles-options="{"opacity":0.7}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Diphenylamine Charges</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="c1ccc(Nc2ccccc2)cc1">c1ccc(Nc2ccccc2)cc1</div> </div> <div class="flex border-t border-rule"> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-target="mol-diphenylamine-charges">
Download SVG
</button> </div> </div><div class="group border border-ink rounded-md bg-white overflow-hidden flex flex-col transition-colors" data-smiles="CC(=O)Oc1ccccc1C(=O)O"> <div class="grid-paper flex items-center justify-center p-4 aspect-square" data-theme-surface="true"> <svg id="mol-aspirin-pharmacophore" data-smiles="CC(=O)Oc1ccccc1C(=O)O" class="molecule-svg w-full h-full weight-svg" data-smiles-weights="0.1,0.8,0.9,0.6,0.2,-0.1,-0.2,-0.1,0.0,0.2,0.7,0.9,0.8" data-smiles-options="{"opacity":0.7}"></svg> </div> <div class="px-4 py-3 border-t border-rule"> <div class="text-[12px] font-semibold text-ink truncate">Aspirin Pharmacophore</div> <div class="font-mono text-[10px] text-ink-hint truncate mt-0.5" title="CC(=O)Oc1ccccc1C(=O)O">CC(=O)Oc1ccccc1C(=O)O</div> </div> <div class="flex border-t border-rule"> <button type="button" class="download-svg-btn flex-1 py-2.5 text-[10px] font-bold uppercase tracking-[0.06em] text-ink hover:bg-paper" data-targe