.make-circle

About

Here's the code, or the link if you wish.

make-circle.js

All the magic happens inside the div with class "make-circle". All the points have to be inside an element (in this case, probably A or LI. I used H2 as the circle's center because it made sense to me, but you could just use a SPAN.

All the end points can be inside a list (UL or OL; so long as the center comes before it and the center and list are the only two element children in the DIV.make-circle). OR you can just put the text and links in there like a blender and it'll work out.

If, for some reason, you don't want the first element to be the center, just add the "center" class to what you DO want in the center. Finally, since words can be different sizes and all that, you have two new attributes to work with:

data-radius=8

8 by default. This tells how far away from the very center the links are (8em). You can change it to any number, just remember it's always gotta be a number and it's based on em. Keep in mind this also affects how big the circle is.

data-size=2.5

2.5 by default. This tells how big the DIV.make-circle is going to be, multiplied by the radius. A normal circle is 2 times the radius wide and 2 times the radius tall, but you need to account for how long your words are going to be.

This works best with short single words.

Examples

Nyan