Como se titula, y dejando de lado los obstáculos y las dificultades, ¿es esto posible?

Mi idea es crear una línea de tiempo horizontal simple similar a un diagrama de Gantt e intentar construir esto en React. Obtuve el componente SVG personalizado que construye el diseño, pero todavía no puedo descifrar cómo hacer la línea de tiempo, especialmente al hacer las marcas y hacer que la línea de tiempo sea infinita.

El problema es que no pude encontrar un ejemplo adecuado para esto usando solo HTML puro, SVG y Javascript. Casi todas mis búsquedas solo muestran resultados para la línea de tiempo realizada con bibliotecas.

Este es el código de muestra que he creado hasta ahora.

 const grids = [ { label: 'Q1', width: 200, height: 30, coord: { x: 190, y: 60 }, textcoord: { x: 260, y: 80 } }, { label: 'Q2', width: 200, height: 30, coord: { x: 400, y: 60 }, textcoord: { x: 470, y: 80 } }, { label: 'Q3', width: 200, height: 30, coord: { x: 610, y: 60 }, textcoord: { x: 680, y: 80 } }, { label: 'Q4', width: 200, height: 30, coord: { x: 820, y: 60 }, textcoord: { x: 890, y: 80 } }, ] const blocks = [ { label: 'Task 1', coord: { x: 30, y: 100 }, textcoord: { x: 70, y: 150 }, width: 150, height: 100 }, { label: 'Task 2', coord: { x: 30, y: 205 }, textcoord: { x: 70, y: 235 }, width: 150, height: 100 }, { label: 'Task 3', coord: { x: 30, y: 310 }, textcoord: { x: 70, y: 340 }, width: 150, height: 100 }, ]; const data = [ { label: 'Event A', coord: { x: 250, y: 100 }, width: 170, textcoord: { x: 300, y: 120 } }, { label: 'Event B', coord: { x: 350, y: 140 }, width: 250, textcoord: { x: 400, y: 160 } }, { label: 'Event C', coord: { x: 300, y: 205 }, width: 140, textcoord: { x: 350, y: 225 } }, ]; const ChartContainer = props => { return ( <div> <svg width="100%" height="1000" className={styles.cc_container}> <text x="30" y="40">ROADMAP TEST</text> { grids.map( v => <ChartBlock { ...v } />) } { blocks.map( v => <ChartBlock { ...v } />) } { data.map( v => <Rectangle { ...v } />) } </svg> </div> ); }

Y se ve así

Quiero que el Rectángulo (el evento) esté en la línea de tiempo infinita. Pero dado que todo ya está en SVG principal, me pregunto cómo poner o crear la línea de tiempo infinita dentro de él.