Wrap Text in a Circle Shape Using Css

i used this simple code which help you to wrap a text on a circular image for your website using CSS in your weebly wordpress or blogspot websites & blogs. This code can be used in any space of image the css implements the text wrap on any space by changing the code to inherit.

<svg viewBox="0 0 400 400">
<defs>
<path id="MyPath"
d="M 200, 200
m -100, 0
a 100,100 0 1,1 200,0
a 100,100 0 1,1 -200,0
" />
</defs>

<text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)">
<textPath xlink:href="#MyPath">
I want to bend my text around the circle.
</textPath>
</text>
<circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" />
<circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" />
</svg>

Place the html code where you want to embed the image. Note you can also use this class in DIV or any section of your website.

<p id="mypath"></p>

Check Demo

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter