If the complexity of the pictures are absolutely outrageous, you can always take and use svg. I did here
: at the bottom of the timeline. But here it is necessary to synchronize size, in your case the solution is simpler.
If the width of the site fixed, it's just going to use 2 div, one above the other (i.e., the second position=absolute). Inside verhnego is another with the width of the site (And it should be position=absolute right=0. In this image the gray timeline. The timeline itself can be made of ordinary div-s from left to right in flexbox-e or floatage. div with rounded corners is a point, with a margin on the top and lower height - line. And in the first diva (which is below) you are the same timeline, but already colored. To calculate color gradient to it - is not difficult. Well, all the magic in the second block, which is absolute. He stamped right=0, and reducing its width you will little by little to hide the gray timeline, and in its place will appear a color