docs(readme): add animated "path lights up" demo to See it in action

An animated SVG that mirrors the real `graphify path` output: a terminal
types the query on the left while the answer draws itself hop by hop across
the knowledge graph on the right, ending on "3 hops. Zero files opened."

Pure SMIL inside a self-contained dark card, so it renders inline on both
GitHub themes with no JS and no external fonts. Palette is brand-only:
muted emerald (sampled from the logo) as the single accent, no neon.
Generated by scripts/gen_demo_path.py (re-run to regenerate; STATIC=1 bakes
a still frame for QA).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
safishamsiandClaude Opus 4.8 committed 2026-07-06 13:25:35 +01:00
1 parent e801196e4e
commit bbc3be2238
3 files changed
+241

No files matched your search

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 360" width="900" height="360" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" role="img" aria-label="graphify path query lighting up a knowledge graph"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0c1712"/><stop offset="1" stop-color="#0f1e18"/></linearGradient><radialGradient id="glow" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="#62c4a2" stop-opacity="0.35"/><stop offset="1" stop-color="#62c4a2" stop-opacity="0"/></radialGradient></defs><rect x="1" y="1" width="898" height="358" rx="14" fill="url(#bg)" stroke="#20342b" stroke-width="1.5"/><line x1="336" y1="18" x2="336" y2="342" stroke="#1c2c25" stroke-width="1"/><circle cx="28" cy="30" r="4.5" fill="#ff5f56"/><circle cx="46" cy="30" r="4.5" fill="#ffbd2e"/><circle cx="64" cy="30" r="4.5" fill="#27c93f"/><text x="320" y="34" text-anchor="end" font-size="10" fill="#6f8a7f">graphify</text><text x="20" y="74" font-size="11" fill="#4db18f" font-weight="600">$</text><text x="33.2" y="74" font-size="11" fill="#c6d6ce" opacity="0">g<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.035;0.047;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="39.9" y="74" font-size="11" fill="#c6d6ce" opacity="0">r<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0408;0.0528;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="46.5" y="74" font-size="11" fill="#c6d6ce" opacity="0">a<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0466;0.0586;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="53.1" y="74" font-size="11" fill="#c6d6ce" opacity="0">p<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0524;0.0644;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="59.7" y="74" font-size="11" fill="#c6d6ce" opacity="0">h<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0582;0.0702;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="66.3" y="74" font-size="11" fill="#c6d6ce" opacity="0">i<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.064;0.076;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="73.0" y="74" font-size="11" fill="#c6d6ce" opacity="0">f<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0698;0.0818;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="79.6" y="74" font-size="11" fill="#c6d6ce" opacity="0">y<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0756;0.0876;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="92.8" y="74" font-size="11" fill="#c6d6ce" opacity="0">p<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0872;0.0992;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="99.4" y="74" font-size="11" fill="#c6d6ce" opacity="0">a<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.093;0.105;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="106.1" y="74" font-size="11" fill="#c6d6ce" opacity="0">t<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0988;0.1108;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="112.7" y="74" font-size="11" fill="#c6d6ce" opacity="0">h<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1046;0.1166;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="125.9" y="74" font-size="11" fill="#c6d6ce" opacity="0">"<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1162;0.1282;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="132.5" y="74" font-size="11" fill="#c6d6ce" opacity="0">F<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.122;0.134;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="139.2" y="74" font-size="11" fill="#c6d6ce" opacity="0">a<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1278;0.1398;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="145.8" y="74" font-size="11" fill="#c6d6ce" opacity="0">s<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1336;0.1456;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="152.4" y="74" font-size="11" fill="#c6d6ce" opacity="0">t<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1394;0.1514;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="159.0" y="74" font-size="11" fill="#c6d6ce" opacity="0">A<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1452;0.1572;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="165.6" y="74" font-size="11" fill="#c6d6ce" opacity="0">P<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.151;0.163;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="172.3" y="74" font-size="11" fill="#c6d6ce" opacity="0">I<animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.1568;0.1688;0.96;1" dur="10.0s" repeatCount="indefinite"/></text><text x="178.9" y="Line truncated

After

Width:  |  Height:  |  Size: 20 KiB