CODEWITHSUNDEEP
javascriptgraphicssvg
Leander
Leander

Reputation: 330

Text around circle with Javascript

I have searched around Stackoverflow for the same question, but all questions that looks a little bit like my question are programmed in Xcode (iPhone). I'm using Javascript, but I can't figure it out how I solve this.

I created a star (based on RaphaelJS). That star has a variable star points, so it could be a star with 8 points, but also 9 or 10 or 11.. My question is, I want text in a circle around that star. If the star has 8 points, then has every point it own word (so 8 words).

I have my problem illustrated in Illustrator, so maybe that my question clarified:

Image

On this moment I'm doing it with images, but that isn't flexible (in the future I would generate the star and the words by using a database). I have searched a lot. I found that any technic where this is possible, is SVG. But after many hours of trial and error, I haven't something that is similar as my image.

Upvotes: 1

Views: 900

Answers (2)

Adam Zalcman
Adam Zalcman

Reputation: 27233

You can easily create this shape in SVG. Use polygon to create the star and text and textPath to create the text surrounding the star.

See this website for SVG examples. In particular you'll want to have a look at:

I also recommend to have a look at the relevant sections of SVG specification.

Upvotes: 1

T I
T I

Reputation: 9933

Ok admittedly I forgot where the points were in the image as this was the last thing I added (d'oh), but this is what I knocked up using pure css, basically the idea is that you have all the text absolutely positioned in the centre of a div to start and then individually move them out from there. I think it would be quite simple to expand this idea with some js and cunning math.

Upvotes: 0

Related Questions