A Pen by Peter Hrynkow.

Curved-type-with-SVG.markdown

Curved type with SVG

I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.

A Pen by Peter Hrynkow on CodePen.

License.

index.html

<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" />

script.js

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});

style.css

* {
    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;
}