e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
154 lines
7.2 KiB
HTML
154 lines
7.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<!--#include virtual="/_include/head.html" -->
|
||
<title>Investment Overview — ASW Examples</title>
|
||
<meta name="description" content="Face-style investor pitch — pie
|
||
chart budget allocation, bar with per-row color, growth trajectory">
|
||
</head>
|
||
<body>
|
||
<!--#include virtual="/_include/nav.html" -->
|
||
|
||
<main>
|
||
<header>
|
||
<h1>Investment Overview</h1>
|
||
<p data-text="lead">Face-style investor pitch — pie chart budget
|
||
allocation, bar with per-row color, growth trajectory</p>
|
||
</header>
|
||
|
||
<hgroup>
|
||
<h1>Agentic Semantic Web — Investor Brief</h1>
|
||
<p>Series A close · Q1 2026 · Confidential</p>
|
||
</hgroup>
|
||
|
||
<p>Every great pitch starts with the same premise: the story the data tells depends entirely on how you frame it. These charts don't manipulate — they illuminate. There's a difference, and it's worth knowing which side you're on.</p>
|
||
|
||
<div data-layout="stats">
|
||
<div>
|
||
<span data-stat="value">$4.2M</span>
|
||
<span data-stat="label">ARR</span>
|
||
</div>
|
||
<div>
|
||
<span data-stat="value">$18M</span>
|
||
<span data-stat="label">Series A raised</span>
|
||
</div>
|
||
<div>
|
||
<span data-stat="value">24 mo</span>
|
||
<span data-stat="label">Runway</span>
|
||
</div>
|
||
<div>
|
||
<span data-stat="value">47</span>
|
||
<span data-stat="label">Team members</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<h2>Where the money goes</h2>
|
||
|
||
<p>Capital allocation reflects priorities. Infrastructure-first is not a philosophical choice — it's a competitive moat. Forty cents of every dollar builds the foundation that makes everything else defensible.</p>
|
||
|
||
<table data-chart="pie" style="--pie-segments: conic-gradient(
|
||
var(--chart-color-1) 0% 40%,
|
||
var(--chart-color-2) 40% 65%,
|
||
var(--chart-color-3) 65% 82%,
|
||
var(--chart-color-4) 82% 100%
|
||
)">
|
||
<caption>Operating budget allocation — Q1 2026</caption>
|
||
<thead>
|
||
<tr>
|
||
<th>Infrastructure (40%)</th>
|
||
<th>Personnel (25%)</th>
|
||
<th>R&D (17%)</th>
|
||
<th>Marketing (18%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||
</table>
|
||
|
||
<p data-text="dim">Source: finance team — Q1 2026 budget allocation</p>
|
||
|
||
<div data-callout="note">
|
||
<span data-callout-title>The moat is the infrastructure</span>
|
||
<p>The 40% infrastructure allocation looks heavy until you consider the alternative: every competitor building on the same commodity stack, competing on features alone. We're not building features — we're building the substrate that makes agentic coordination possible at scale. That's not a cost center. That's the product.</p>
|
||
</div>
|
||
|
||
<h3>Markup</h3>
|
||
<p>Pie charts use <code>data-chart="pie"</code> with a <code>--pie-segments</code> CSS custom property set via <code>style</code>. The conic gradient defines each slice as a percentage range. Legend comes from <code><thead></code> — one <code><th></code> per segment, label and percentage inline.</p>
|
||
|
||
<pre><code><table data-chart="pie" style="--pie-segments: conic-gradient(
|
||
var(--chart-color-1) 0% 40%,
|
||
var(--chart-color-2) 40% 65%,
|
||
var(--chart-color-3) 65% 82%,
|
||
var(--chart-color-4) 82% 100%
|
||
)">
|
||
<caption>Operating budget allocation — Q1 2026</caption>
|
||
<thead>
|
||
<tr>
|
||
<th>Infrastructure (40%)</th>
|
||
<th>Personnel (25%)</th>
|
||
<th>R&D (17%)</th>
|
||
<th>Marketing (18%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr><td>data hidden — pie is visual</td></tr></tbody>
|
||
</table></code></pre>
|
||
|
||
<p>The <code>--pie-segments</code> value is a <code>conic-gradient()</code> — pure CSS, no JavaScript, no SVG. Segment boundaries are cumulative percentages. Use <code>var(--chart-color-1)</code> through <code>var(--chart-color-4)</code> to stay within the design system palette. Additional segments are possible by extending the gradient and adding more <code><th></code> entries.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Revenue vs. target — quarterly</h2>
|
||
|
||
<p>Six quarters of quarterly revenue laid against target. Four out of six quarters hit or beat projections. The two misses — Q1 2024 and Q4 2024 — were deliberate: both quarters involved platform migrations that temporarily compressed billings. The investors who stayed patient are now holding the most defensible position in the category.</p>
|
||
|
||
<table data-chart="bar">
|
||
<caption>Quarterly revenue vs. target — Q1 2024 through Q2 2025 (max $1.8M)</caption>
|
||
<tbody>
|
||
<tr><th scope="row">Q1 2024 <span data-text="dim">↓ target $500K</span></th><td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr>
|
||
<tr><th scope="row">Q2 2024 <span data-text="dim">↑ target $650K</span></th><td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||
<tr><th scope="row">Q3 2024 <span data-text="dim">↑ target $800K</span></th><td style="--size: 0.494; --color: var(--accent)">$890K</td></tr>
|
||
<tr><th scope="row">Q4 2024 <span data-text="dim">↓ target $1.2M</span></th><td style="--size: 0.611; --color: var(--accent-red)">$1.1M</td></tr>
|
||
<tr><th scope="row">Q1 2025 <span data-text="dim">↑ target $1.3M</span></th><td style="--size: 0.778; --color: var(--accent)">$1.4M</td></tr>
|
||
<tr><th scope="row">Q2 2025 <span data-text="dim">↑ target $1.6M</span></th><td style="--size: 1.0; --color: var(--accent)">$1.8M</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p data-text="dim">Green = beat target · Red = missed target · Max $1.8M (Q2 2025)</p>
|
||
|
||
<h3>Per-row color override</h3>
|
||
<p>Individual rows accept a <code>--color</code> custom property on the <code><td></code>. Use <code>var(--accent)</code> for over-target performance and <code>var(--accent-red)</code> for misses. The default bar color is the chart's base accent — override only where it carries meaning.</p>
|
||
|
||
<pre><code><!-- Over-target: green -->
|
||
<tr><th scope="row">Q2 2024</th>
|
||
<td style="--size: 0.378; --color: var(--accent)">$680K</td></tr>
|
||
|
||
<!-- Under-target: red -->
|
||
<tr><th scope="row">Q1 2024</th>
|
||
<td style="--size: 0.233; --color: var(--accent-red)">$420K</td></tr></code></pre>
|
||
|
||
</section>
|
||
|
||
<section>
|
||
<h2>ARR growth trajectory</h2>
|
||
|
||
<p>This is the chart that closes the room. Six quarters of compounding ARR — from $1.1M to $4.2M. That's a 3.8× in 18 months. The trajectory isn't slowing. The Series A closes at the inflection point.</p>
|
||
|
||
<table data-chart="column" style="--chart-height: 240px">
|
||
<caption>Annual Recurring Revenue — Q3 2024 through Q4 2025</caption>
|
||
<tbody>
|
||
<tr><th scope="row">Q3 2024</th><td style="--size: 0.262">$1.1M</td></tr>
|
||
<tr><th scope="row">Q4 2024</th><td style="--size: 0.381">$1.6M</td></tr>
|
||
<tr><th scope="row">Q1 2025</th><td style="--size: 0.524">$2.2M</td></tr>
|
||
<tr><th scope="row">Q2 2025</th><td style="--size: 0.690">$2.9M</td></tr>
|
||
<tr><th scope="row">Q3 2025</th><td style="--size: 0.833">$3.5M</td></tr>
|
||
<tr><th scope="row">Q4 2025</th><td style="--size: 1.0">$4.2M</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p data-text="dim">Source: finance · ARR normalized — max $4.2M (Q4 2025)</p>
|
||
</section>
|
||
</main>
|
||
|
||
<!--#include virtual="/_include/footer.html" -->
|
||
</body>
|
||
</html>
|