jquery to animate svg for markdown engine to parse headings

I have a table of contents generated using this code (code 1), which will produce sidebar style menu.

I want to match the html elements for markdown headings to the code 1, so that I have a scroll tracker in my live web page. The scroll tracker I found most akin to this effect would be some thing like this (code 2). You can find the code live in this code pen. https://codepen.io/leetony/pen/PojwWgY

code 1: https://gist.github.com/aiegoo/ee8dfbbb86320418c78156e49b7ac160

code 2: https://gist.github.com/aiegoo/1566bffb6af387720689f95c6dc16cd8

code 3: https://gist.github.com/aiegoo/bc8ae43c85360247880b6d7040897e5a

Actually, the above code pen hosts all the referenced codes for animated scroll-track.

Task: implement the code 1 and 2 as in the referenced site into my target site which uses bootstrap (code 3).

If you have trouble knowing what the target site looks like, I will let you access my pc via anydesk.

My budget: usd20