swadhinbiswas 📝 docs: modern README with animated SVG hero, pipeline, benchmark, feature matrix · 8/7/2026
4322714
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<svg width="1200" height="480" viewBox="0 0 1200 480" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg3" x1="0" y1="0" x2="1200" y2="480" gradientUnits="userSpaceOnUse">
<stop stop-color="#0b0e1a"/>
<stop offset="1" stop-color="#111631"/>
</linearGradient>
<linearGradient id="barJ" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#f5a524"/>
<stop offset="1" stop-color="#e6522c"/>
</linearGradient>
<linearGradient id="barO" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#22d3ee"/>
<stop offset="1" stop-color="#0e7490"/>
</linearGradient>
<linearGradient id="barM" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8b5cf6"/>
<stop offset="1" stop-color="#5b21b6"/>
</linearGradient>
</defs>
<rect width="1200" height="480" fill="url(#bg3)"/>
<text x="600" y="45" text-anchor="middle" font-family="'Segoe UI', Arial, sans-serif" font-size="24" font-weight="700" fill="#e2e8f0" letter-spacing="1">Real numbers, same hardware, same workload</text>
<text x="600" y="72" text-anchor="middle" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#94a3b8">hello-world · 100 concurrent connections · 30s</text>
<!-- axis -->
<line x1="120" y1="400" x2="1140" y2="400" stroke="#334155" stroke-width="2"/>
<line x1="120" y1="400" x2="120" y2="60" stroke="#334155" stroke-width="2"/>
<!-- gridlines -->
<g stroke="#1e293b" stroke-width="1">
<line x1="120" y1="340" x2="1140" y2="340"/>
<line x1="120" y1="280" x2="1140" y2="280"/>
<line x1="120" y1="220" x2="1140" y2="220"/>
<line x1="120" y1="160" x2="1140" y2="160"/>
<line x1="120" y1="100" x2="1140" y2="100"/>
</g>
<!-- JustAPI bar: 766k → height ~300 -->
<g font-family="'Segoe UI', Arial, sans-serif">
<rect x="170" y="100" width="90" height="300" rx="8" fill="url(#barJ)">
<animate attributeName="height" values="0;300" dur="1.2s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
<animate attributeName="y" values="400;100" dur="1.2s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
</rect>
<text x="215" y="88" text-anchor="middle" font-size="26" font-weight="800" fill="#f5a524">
766k
<animate attributeName="opacity" values="0;1" dur="1.4s" fill="freeze"/>
</text>
<text x="215" y="420" text-anchor="middle" font-size="14" font-weight="700" fill="#e2e8f0">JustAPI</text>
<text x="215" y="438" text-anchor="middle" font-size="11" fill="#94a3b8">native fast path</text>
<!-- Granian: 314k → height 123 -->
<rect x="330" y="277" width="90" height="123" rx="8" fill="url(#barO)">
<animate attributeName="height" values="0;123" dur="1.2s" begin="0.3s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
<animate attributeName="y" values="400;277" dur="1.2s" begin="0.3s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
</rect>
<text x="375" y="265" text-anchor="middle" font-size="22" font-weight="700" fill="#22d3ee">
314k
<animate attributeName="opacity" values="0;1" dur="1.5s" begin="0.5s" fill="freeze"/>
</text>
<text x="375" y="420" text-anchor="middle" font-size="14" fill="#e2e8f0">Granian</text>
<text x="375" y="438" text-anchor="middle" font-size="11" fill="#94a3b8">ASGI</text>
<!-- FastAPI: 36k → height 14 -->
<rect x="490" y="386" width="90" height="14" rx="8" fill="url(#barM)">
<animate attributeName="height" values="0;14" dur="1.2s" begin="0.6s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
<animate attributeName="y" values="400;386" dur="1.2s" begin="0.6s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
</rect>
<text x="535" y="376" text-anchor="middle" font-size="18" font-weight="600" fill="#8b5cf6">
36k
<animate attributeName="opacity" values="0;1" dur="1.5s" begin="0.8s" fill="freeze"/>
</text>
<text x="535" y="420" text-anchor="middle" font-size="14" fill="#e2e8f0">FastAPI</text>
<text x="535" y="438" text-anchor="middle" font-size="11" fill="#94a3b8">Uvicorn</text>
<!-- Robyn: 39k -->
<rect x="650" y="384" width="90" height="16" rx="8" fill="url(#barO)" opacity="0.8">
<animate attributeName="height" values="0;16" dur="1.2s" begin="0.9s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
<animate attributeName="y" values="400;384" dur="1.2s" begin="0.9s" fill="freeze" calcMode="spline" keySplines="0.34 1.56 0.64 1"/>
</rect>
<text x="695" y="374" text-anchor="middle" font-size="18" font-weight="600" fill="#22d3ee">
39k
<animate attributeName="opacity" values="0;1" dur="1.5s" begin="1.1s" fill="freeze"/>
</text>
<text x="695" y="420" text-anchor="middle" font-size="14" fill="#e2e8f0">Robyn</text>
<text x="695" y="438" text-anchor="middle" font-size="11" fill="#94a3b8">Rust</text>
</g>
<!-- 2.4x callout -->
<g font-family="'Segoe UI', Arial, sans-serif">
<rect x="830" y="130" width="300" height="70" rx="12" fill="#ffffff" fill-opacity="0.05" stroke="#f5a524" stroke-width="1.5">
<animate attributeName="stroke-opacity" values="0.4;1;0.4" dur="2.5s" repeatCount="indefinite"/>
</rect>
<text x="980" y="158" text-anchor="middle" font-size="28" font-weight="800" fill="#f5a524">2.4x</text>
<text x="980" y="182" text-anchor="middle" font-size="13" fill="#94a3b8">faster than Granian</text>
</g>
<!-- JSON echo callout -->
<g font-family="'Segoe UI', Arial, sans-serif">
<rect x="830" y="225" width="300" height="70" rx="12" fill="#ffffff" fill-opacity="0.05" stroke="#22d3ee" stroke-width="1.5">
<animate attributeName="stroke-opacity" values="0.4;1;0.4" dur="3s" repeatCount="indefinite"/>
</rect>
<text x="980" y="253" text-anchor="middle" font-size="28" font-weight="800" fill="#22d3ee">5.4x</text>
<text x="980" y="277" text-anchor="middle" font-size="13" fill="#94a3b8">JSON echo vs Granian</text>
</g>
<!-- footnote -->
<text x="600" y="468" text-anchor="middle" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#64748b">full methodology in BENCHMARKS.md · p99: JustAPI 0.48ms · Granian 0.74ms · FastAPI 24.6ms</text>
</svg>