I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.
A Pen by Peter Hrynkow on CodePen.
I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.
A Pen by Peter Hrynkow on CodePen.
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'> | |
<div class="demo" id="demo1">Here is some text that fits inside its container</div> | |
<div class="demo" id="demo2">Here is some curved text going clockwise.</div> | |
<div class="demo" id="demo3">Here is some curved text going counter-clockwise.</div> | |
<br style="clear: left" /> | |
function CircleType (target, options) { | |
function generateUUID(){ | |
var d = new Date().getTime(), | |
uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) { | |
var r = (d + Math.random()*16)%16 | 0; | |
d = Math.floor(d/16); | |
return (c=='x' ? r : (r&0x7|0x8)).toString(16); | |
}); | |
return uuid; | |
}; | |
function setup (target, options) { | |
var uuid = 'CircleType_' + generateUUID(), | |
text = target.innerHTML, | |
yOffset = parseInt(window.getComputedStyle(target).lineHeight, 10) / 2, | |
r = options.radius, | |
d = r * 2, | |
dir = options.dir === -1 ? '0' : '1', | |
d2 = d + (yOffset * 2), | |
w = options.fitText ? '100%' : d2, | |
h = w, | |
tags = '<svg xmlns="http://www.w3.org/2000/svg" \ | |
width="' + w + '" height="' + h + '" viewBox="0 0 ' + d2 + ' ' + d2 + '" \ | |
version="1.1" preserveAspectRatio="xMidYMid meet">\ | |
<defs>\ | |
<path id="' + uuid + '" \ | |
d=" \ | |
M ' + yOffset + ', ' + (r + yOffset) + ' \ | |
a ' + r + ',' + r + ' 0 1,' + dir + ' ' + d + ',0 \ | |
a ' + r + ',' + r + ' 0 1,' + dir + ' -' + d + ',0 \ | |
a ' + r + ',' + r + ' 0 1,' + dir + ' ' + d + ',0 \ | |
a ' + r + ',' + r + ' 0 1,' + dir + ' -' + d + ',0 \ | |
"/> \ | |
</defs> \ | |
<use xlink:href="#' + uuid + '" fill="none" /> \ | |
<text text-anchor="middle"> \ | |
<textPath startOffset="62.5%" xlink:href="#' + uuid + '" \ | |
dominant-baseline="middle"> \ | |
' + text + ' \ | |
</textPath> \ | |
</text>\ | |
</svg>'; | |
target.innerHTML = tags; | |
}; | |
setup(target, options); | |
}; | |
new CircleType(document.getElementById('demo1'), {radius: 180, dir: 1, fitText: true}); | |
new CircleType(document.getElementById('demo2'), {radius: 190, dir: -1, fitText: false}); | |
new CircleType(document.getElementById('demo3'), {radius: 190, dir: 1, fitText: false}); |
* { | |
box-sizing: border-box; | |
} | |
.demo { | |
font-family: Bitter; | |
text-transform: uppercase; | |
font-size: 40px; | |
float: left; | |
background: white; | |
margin: 20px; | |
} | |
#demo1 { | |
float: none; | |
width: auto; | |
height: 700px; | |
} |