Learn More
Resend Email
1
Hypehn
4y

I need to position circles on a curve in a HTML page, the number of circles can be variable (a minimum of 3 and a maximum of 7) and these should be spaced equally. Each circle is a clickable element that has some functionality, and also just hovering on these circles should show a thumbnail right beside them.

https://i.stack.imgur.com/jC3gE.png

As shown in the above image. The whole design consists of 2 of these curves one on the left and one on the right(I cannot put the whole design here sorry) one approach I can think of is rendering the curve as an SVG and then position the beads (circles) on them but I cannot think of any way to position those elements exactly on the svg. Any kind of help or code which achieves this functionality is a huge help.

Note: I am using Angular, if there's a nice way to do the same in Angular I'd be pretty delighted. I know that this isn't the right place to ask this but any help would be greatly appreciated.

Thanks in Advance

question

angular

html

css
Favorite
Ranter
Comments
  • 0
    4y
    `left: calc(...)` based on order? (Math, Carl, math!) It's faint, but if you assign --order variable through JS, it may be a piece of cake!
    Let Angular assign `style="--order: ... "` to each item in a loop.
  • 0
    4y
    Also, why not `border-radius` for the arc? Yeah, it will be a circle at first, but if you enlarge and clip it (via `overflow: hidden` in parent containet), no SVG is needed.
  • 0
    4y
    @vintprox I have tried one approach which I think is similar to what you have said here.

    Here is the output which is no way close to the design we had
  • 0
    4y
    @Hypehn ohoho, but what if I say that approaches are drastically different? You should also account for the pivot point of item you try to align (it's top-left). I'm starting to think that `transform: translateX(...)` is better fit, instead of margins and "physical" positioning.
  • 1
    4y
    @Hypehn Whatever you do, just remember that CSS Variables are your friends. It's a relief for both maintenance and separation of concerns!
  • 0
    4y
    @vintprox I really really appreciate your help. I'll try my best to achieve the design and functionality, I'll keep you updated.

    And again I have no words to say how helpful this convo has been, I post this same qsn on stackoverflow and it got downvoted to hell
  • 0
    4y
    @Hypehn heh, no problem!
    Have a look at that, they even learned how to do sine and cosine with CSS, this is dope: https://gist.github.com/stereokai/...
    Convert the item's order to an angle and it will be precise enough.
  • 0
    4y
    @vintprox Sure. Thanks again :)
  • 1
    4y
    @Hypehn it was fun to solve, I even learned few things 👍 For example, now I imagine how to implement a juicy animation with items appearing one by one from the center.

    First, you position all items in the same center, then multiply radius on cosine/sine for translateX/Y respectively. Last stage is to animate radius and employ animation-delay that depends on order.
  • 0
    4y
    If you want to do it with other curves than arcs of circles, you could generalize it using parametric equations.
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment