Interactive Historical Timeline Engine
Historical Timeline Generator
Construct mathematically precise history graphics with automatic chronological delta spacings. Support BCE/CE coordinates mapping, editable node lists, and export clean React vector markup instantly.
Proportional Mode calculates exact delta distances in years (including negative BC years) and maps them to actual horizontal pixels, showing true temporal weights.
Capital moved to Akhetaten.
Diplomatic correspondence peak between Egypt and regional states.
Brief and enigmatic rule of the co-regent.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400" width="1000" height="400">
<!-- Grid overlay background (transparent look) -->
<defs>
<pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
<path d="M 24 0 L 0 0 0 24" fill="none" stroke="rgba(255, 255, 255, 0.015)" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" fill-opacity="0.5" />
<line x1="40" y1="200" x2="960" y2="200" stroke="#2D3748" stroke-width="2" />
<line x1="80" y1="175" x2="80" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="80" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1353 BC</text>
<line x1="248" y1="175" x2="248" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="248" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1350 BC</text>
<line x1="416" y1="175" x2="416" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="416" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1346 BC</text>
<line x1="584" y1="175" x2="584" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="584" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1343 BC</text>
<line x1="752" y1="175" x2="752" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="752" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1339 BC</text>
<line x1="920" y1="175" x2="920" y2="225" stroke="#2D3748" stroke-width="1" stroke-dasharray="2 2" />
<text x="920" y="245" fill="#718096" font-family="monospace" font-size="9" text-anchor="middle">1336 BC</text>
<!-- Node 1 connector and pin -->
<line x1="80" y1="188" x2="80" y2="110" stroke="#3B82F6" stroke-width="1.5" stroke-dasharray="2 2" />
<circle cx="80" cy="188" r="10" fill="#3B82F6" stroke="#ffffff" stroke-width="2" />
<!-- Node 1 Callout Card Box (Safety Clamped) -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="180" height="80" rx="10" fill="#161622" stroke="#3B82F6" stroke-width="1.5" />
<text x="10" y="18" fill="#3B82F6" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="900" letter-spacing="1" text-transform="uppercase">event</text>
<text x="170" y="18" fill="#A0AEC0" font-family="monospace" font-size="9" text-anchor="end">1353 BC | Mid Summer</text>
<text x="10" y="38" fill="#FFFFFF" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold">Reign of Akhenaten Begins</text>
<text x="10" y="54" fill="#A0AEC0" font-family="Arial, Helvetica, sans-serif" font-size="9">Capital moved to Akhetaten.</text>
<text x="10" y="68" fill="#3B82F6" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold">Location: Amarna, Egypt</text>
</g>
<!-- Node 2 connector and pin -->
<line x1="475.29411764705884" y1="212" x2="475.29411764705884" y2="290" stroke="#EC4899" stroke-width="1.5" stroke-dasharray="2 2" />
<rect x="466.29411764705884" y="203" width="18" height="18" rx="2" fill="#EC4899" stroke="#ffffff" stroke-width="2" />
<!-- Node 2 Callout Card Box (Safety Clamped) -->
<g transform="translate(385.29411764705884, 290)">
<rect x="0" y="0" width="180" height="80" rx="10" fill="#161622" stroke="#EC4899" stroke-width="1.5" />
<text x="10" y="18" fill="#EC4899" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="900" letter-spacing="1" text-transform="uppercase">document</text>
<text x="170" y="18" fill="#A0AEC0" font-family="monospace" font-size="9" text-anchor="end">1345 BC</text>
<text x="10" y="38" fill="#FFFFFF" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold">Amarna Letters Archive</text>
<text x="10" y="54" fill="#A0AEC0" font-family="Arial, Helvetica, sans-serif" font-size="9">Diplomatic correspondence peak..</text>
<text x="10" y="68" fill="#EC4899" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold">Author: Royal Scribes</text>
</g>
<!-- Node 3 connector and pin -->
<line x1="920" y1="188" x2="920" y2="110" stroke="#3B82F6" stroke-width="1.5" stroke-dasharray="2 2" />
<circle cx="920" cy="188" r="10" fill="#3B82F6" stroke="#ffffff" stroke-width="2" />
<!-- Node 3 Callout Card Box (Safety Clamped) -->
<g transform="translate(810, 30)">
<rect x="0" y="0" width="180" height="80" rx="10" fill="#161622" stroke="#3B82F6" stroke-width="1.5" />
<text x="10" y="18" fill="#3B82F6" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="900" letter-spacing="1" text-transform="uppercase">event</text>
<text x="170" y="18" fill="#A0AEC0" font-family="monospace" font-size="9" text-anchor="end">1336 BC | Winter Solstice</text>
<text x="10" y="38" fill="#FFFFFF" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold">Ascension of Semenkhkare</text>
<text x="10" y="54" fill="#A0AEC0" font-family="Arial, Helvetica, sans-serif" font-size="9">Brief and enigmatic rule of th..</text>
<text x="10" y="68" fill="#3B82F6" font-family="Arial, Helvetica, sans-serif" font-size="9" font-weight="bold">Location: Thebes, Egypt</text>
</g>
</svg>The exported JSX code contains everything you need to render this interactive scrolling timeline in any external project! It embeds the React `useMemo` spacing calculations, custom node classes, and category badge tooltips seamlessly.
HOW HISTORICAL TIMELINE ENGINE WORKS
Build mathematically precise historical graphics, customize spacing modes, and export modular React code in 3 simple steps.
Input historical dates, titles, and descriptions. Model BC dates as negative integers and AD dates as positive integers. Nodes map instantly in real-time.
Toggle Proportional Mode to compute exact year delta distances and map them to physical pixels, or select Equidistant Mode for uniform serial flow.
Scale and test the zoom stage viewport, then copy highly customizable Next.js/Tailwind components or raw JSON nodes database configurations.
WHY USE THE HISTORICAL TIMELINE ENGINE?
Standard web timelines distort history by spacing dates equally. Our engine introduces true chronological delta weight calculations to preserve scale.
FREQUENTLY ASKED QUESTIONS ABOUT THE TIMELINE ENGINE
Have questions about spatial calculations, BC dates, or Next.js code exports? We have gathered details here.
The engine sorts all events chronologically by their absolute integer years. BCE dates are modeled as negative integers, and CE dates are positive integers. The temporal math computes the total span: maxYear - minYear. Proportional mode then maps each event's year linearly relative to the minYear onto the scrollable track width, plotting the exact historical spacing in pixel width gaps.
Yes! Each node contains a specific category type (Event, Document, Battle, Dynasty, Invention). Our exported React component translates these categories directly into unique Tailwind CSS classes and visual shape pin elements, so you can adapt them to match your branding perfectly.
Absolutely! The timeline is wrapper-bound in a horizontal scroll container equipped with native overflow-x scroll physics. On mobile screens, users can swipe and drag the timeline track smoothly to browse the historic milestones, while desktop users enjoy standard scroll and drag pans.
Absolutely not. The entire spatial weight compiler runs directly inside the client browser, securing full privacy and instant offline code creation.