🔘 Circular text around an image with SVG

🔘 Circular text around an image with SVG

Adam

Mr. Webwide
Administrator
Local time
16:27
Joined
Sep 24, 2019
Messages
1,254
Pronouns
he/him

Had some fun making this, to go as a logo on my blog redesign. Not sure the SVG positioning is as clean as it could be, would be very happy to get any pointers on improving! The codepen demo has some overflow issues as the SVG rotates but this is solved with a wrapper in place.

I couldn't quite work out how to trim all the extra whitespace from the SVG though, everything I tried made the positioning off! Any ideas? Would be great to have this tighter.

Screenshot 2020-05-18 at 17.26.44.png

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
17:27
Joined
Oct 5, 2019
Messages
1,167
Pronouns
he/him

You should definitely use overflow:hidden the body scroll height changes with rotating text.
I would first try to import the SVG into a UI tool to edit vectors and change viewBox in it. After this export it as SVG and cleanup the XML code. Most GUI tools export a lot of crap.

 
Top