The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Creating and filling a circular shaped line

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #162068

    Hi guys,

    Do you have any ideas of how I would implement this . It needs to fill up depending from number of points.

    I imagine there are two steps to this problem. First, build a circle shaped line. Then divide it into blocks that can each be filled individually.

    Any thoughts are greatly appreciated!


    Quick question: can you use the Canvas element?

    This was just for fun:
    That’s as far as I got without Canvas and without JavaScript. With the technique demonstrated it’s rather tricky to get the fill line to span more than 180 degrees due to the way it’s masked.


    I’d be glad to explain more what’s going on but I’ll let you look at it yourself first.


    Hi dyr,

    That is indeed very impressive.

    I will look more into the article and delve into details.

    I can see why it cannot rotate more than 180 degrees which is very unfortunate since this solution would have worked out so nicely!

    I see no reason why I couldn’t use Canvas element. There must be a fallback for IE8 but that’s it.

    Thanks :)


    No problem.

    EDIT: Crap I had forgotten to save the most recent version of that PEN before posting my response here. I saved the latest now so if you go to the same PEN you’ll see a simple animation.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.