SVG Timeline Generator

Create horizontal or vertical timelines with custom events

Configuration

Orientation

Events

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
  <line x1="50" y1="100" x2="650" y2="100" stroke="#888" stroke-width="2"/>
  <g>
    <circle cx="100" cy="100" r="8" fill="#667eea"/>
    <text x="100" y="80" text-anchor="middle" font-size="14" fill="#333">2020</text>
    <text x="100" y="130" text-anchor="middle" font-size="12" fill="#666">Event 1</text>
  </g>
  <g>
    <circle cx="300" cy="100" r="8" fill="#764ba2"/>
    <text x="300" y="80" text-anchor="middle" font-size="14" fill="#333">2021</text>
    <text x="300" y="130" text-anchor="middle" font-size="12" fill="#666">Event 2</text>
  </g>
  <g>
    <circle cx="500" cy="100" r="8" fill="#f093fb"/>
    <text x="500" y="80" text-anchor="middle" font-size="14" fill="#333">2022</text>
    <text x="500" y="130" text-anchor="middle" font-size="12" fill="#666">Event 3</text>
  </g>
</svg>