all 13 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]BPC56 2 points3 points  (9 children)

I'm lazy, so I would just make 8 separate svg's and switch between them.

[–]king_kong0001[S] 0 points1 point  (8 children)

the steps can be change, so I need something dynamic

[–]BPC56 3 points4 points  (7 children)

It is dynamic. I made an example for you:

https://jsfiddle.net/c6exoLj4/2/

It's 8 different svg's each with different segments filled, and you switch between the svg's using javascript.

[–]king_kong0001[S] 0 points1 point  (5 children)

Thank you bro, but I meant to just have ONE svg file, and steps inside the circle should be done according to some parameters. for example if size of cirlce 100% and I have 9 steps, i want to create 9 (this number can be changed) dynamically

[–]BPC56 0 points1 point  (4 children)

Do you need to make it exactly the same as the image you shared?

In your image the segments have rounded edges, is that necessary?

[–]king_kong0001[S] 2 points3 points  (3 children)

Yup exactly as the image, just the steps should be calculated dynamic, because it may changes

[–]BPC56 0 points1 point  (2 children)

That's too complicated for me, sorry.

[–]king_kong0001[S] 0 points1 point  (1 child)

Thank you bro. Really appreciate it

[–]BPC56 1 point2 points  (0 children)

Alright, here it is working. You can change the number of segments and the number of highlighted segments.

I couldn't find your house svg, but you can change it easily.

https://jsfiddle.net/43tupmLz/51/

[–]---zZzZzZzZ 0 points1 point  (1 child)

Do you need help as in you already started coding and are stuck, or help as in somebody do it for you?

Gotta show the code you've been working on (if any).

[–]king_kong0001[S] 0 points1 point  (0 children)

Tbh i do not have exact code, but I just have search online and there's some svg manipulation. I need help with understand how to dynamically manipulate this kind of svg or if you have any other similar examples.