Wrapping a text around a circular element - css

Question

I have 2 DIV's as shown below and I've been trying to get the text between the two circles to wrap around the inner circle as shown on the attacthed image. I have not been able to achieve the desired result.
HTML
<div id="outer-circle">
This is just a test logo name
<div id="inner-circle">
</div><!-- End Inner Circle -->
</div><!-- End Outer Circle -->
CSS
* {
margin: 0 auto;
}
#inner-circle {
width: 200px;
height: 200px;
border-radius: 100%;
background-color: green;
margin-top: 28px;
position: relative;
}
#outer-circle {
width: 300px;
height: 300px;
border-radius: 100%;
background-color: blue;
margin-top: 50px;
text-align center;
text-align: left;
}
Click here to see current but undesired result
Example of desired result

Answer 1

See this post by Chris Coyier in which he separates each character of text into <span>s and rotates each one in turn using CSS rotation:
.char1 {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.char2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
...etc
Or use Dirk Weber's csswarp.js Service which pretty much does the same but uses javascript to generate the html and css for you. (csswarp.js on GitHub)
Or use SVG text on a path as in this example from useragentman.com
<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1"
fill="none" stroke="black" stroke-width="1"
d="M 212,65
C 276,81 292,91 305,103 361,155
363,245 311,302 300,314 286,324
271,332 248,343 227,347 202,347
190,346 174,343 163,339 143,333">
</path>
</defs>
<text id="myText">
<textPath xlink:href="#path1" >
<tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
</textPath>
</text>
</svg>
Or...
Use an image.

Answer 2

Use base info from https://css-tricks.com/set-text-on-a-circle/
BUT with a simplifications and without any additional libs.
And it will work with any text you type...
var lettering = function(node,text){
var str = typeof text=='undefined'
?node.textContent
:text;
node.innerHTML='';
var openTag = '<span>';
var closeTag = '</span>';
var newHTML = openTag;
var closeTags = closeTag;
for(var i=0,iCount=str.length;i<iCount;i++){
newHTML+=str[i]+openTag;
closeTags+=closeTag;
}
node.innerHTML = newHTML+closeTags;
}
lettering(
document.getElementById('text'),
Math.round(Math.random()*1000) + ' : Hello world!!!'
);
.badge {
position: relative;
width: 400px;
border-radius: 50%;
transform: rotate(-50deg);
}
h1 span {
font: 26px Monaco, MonoSpace;
height: 200px;
position: absolute;
width: 20px;
left: 0;
top: 0;
transform-origin: bottom center;
transform: rotate(10deg);
}
<div class='badge'>
<h1 id="text">Any custom text you type...</h1>
</div>