As titled, and setting aside the hurdles and hardships, is this possible?

My idea is to create a simple horizontal timeline similar to a Gantt chart, and trying to build this in React. I got the custom SVG component that builds up the layout, but i still can't figure out about making the timeline, especially in making the ticks, and making the timeline infinite.

The problem is, i couldn't find proper example for this using just pure HTML, SVG and Javascript. Almost all my searches only shown results for timeline made using libraries.

This is the sample code i created so far

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>
    );
}

And it look like this

I want the Rectangle (the event) to be in the infinite timeline. But since the whole things are already in SVG parent, i wonder how to put or create the infinite timeline inside it.