Forums

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
    Posts
  • #162068
    zerobrainwash
    Participant

    Hi guys,

    Do you have any ideas of how I would implement this http://imgur.com/J9blpei . 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!

    #162074
    dyr
    Participant

    Quick question: can you use the Canvas element?

    This was just for fun: http://codepen.io/shawkdsn/pen/ejBJw
    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.

    src: http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

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

    #162077
    zerobrainwash
    Participant

    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 :)

    #162078
    dyr
    Participant

    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. http://codepen.io/shawkdsn/pen/ejBJw

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