JSFiddle - React, Tailwind, and code Playground

by dormisher

HTML

<script src="https://rawgithub.com/dormisher/svg.js/master/dist/svg.js"></script>
<span class="example" id="1"></span>

<script>
    window.font = {
    horizAdvX: 487,
    unitsPerEm: 2048,
    ascent: 1638,
    descent: -410,
    glyphs: {
        H: {
            horizAdvX: 1382,
            path: 'M147 14q64 133 244 604q-68 29 -90 80q19 14 135 37l27 66q85 217 115 327.5t81 391.5q81 -14 153 -73t126 -147q-8 -11 -17.5 -26t-22 -38.5t-23 -43.5t-27 -55.5t-27 -58.5l-31.5 -69t-32 -71t-35.5 -80.5t-36.5 -81.5q282 39 488 51q77 223 157.5 399.5t136.5 235.5 q42 -3 124.5 -47.5t101.5 -79.5q-69 -65 -143 -210.5t-140 -336.5q41 -38 41 -92q0 -39 -16 -71q-28 4 -76 8q-69 -219 -111.5 -425t-42.5 -319q0 -33 4 -53q-41 2 -65 15t-31 28.5t-18 32t-27 22.5q-26 9 -44.5 74.5t-18.5 110.5q0 160 104 510q-75 -5 -255 -24.5 t-253 -20.5q-166 -392 -231 -750q-73 18 -126 62.5t-98 117.5z'
        },
        u: {
            horizAdvX: 1011,
            path: 'M174 119q0 98 16 174q43 181 146 386.5t221 291.5q44 0 99 -16t83 -48q-18 -19 -51 -68t-93 -161t-116 -244q-24 -55 -55 -162.5t-31 -156.5q0 -22 15 -37q29 11 73.5 62.5t134.5 174.5q6 9 36 49t47 64t42.5 63t44 75.5t31.5 70.5q19 51 33 84.5t49.5 91.5t77.5 98 q53 0 114 -20.5t80 -44.5q-28 -68 -104.5 -220.5t-115 -259.5t-38.5 -204q0 -51 11.5 -92t22.5 -64.5t11 -32.5q0 -3 -2 -5t-4 -2l-2 -1q-28 0 -88 24t-106 56q-35 29 -50.5 76t-15.5 90q0 44 10 74q-10 1 -52.5 -51t-95.5 -123t-67 -88q-57 -61 -88 -64q-70 3 -138.5 47.5 t-84.5 112.5z'
        },
        g: {
            horizAdvX: 921,
            path: 'M-215 -610q0 20 27 43q53 -44 77.5 -56t67.5 -12q211 0 382.5 217.5t278.5 610.5q-46 -50 -133.5 -110.5t-142.5 -82.5q-69 12 -116.5 87.5t-47.5 172.5q0 115 64 246t160.5 235t217 173t226.5 69q71 0 108 -30t52 -101q-21 12 -58 12q-71 0 -177.5 -83t-200 -199 t-161 -249t-67.5 -224q0 -21 8 -21q34 0 121 71t166 160q86 96 159 218.5t117 238.5q52 -3 97 -18t61 -31q-95 -219 -184 -461q-124 -337 -215.5 -522.5t-227.5 -335.5q-67 -74 -164 -117t-176 -43q-100 0 -195 42.5t-124 99.5z'
        },
       ...

CSS

body { font-family:arial; }
canvas, .example { border:1px solid #ddd; display:inline-block;vertical-align:top; }

JavaScript

var renderer = new function () {
    this.svg = SVG('1');
    
    this.drawText = function (text, size) {
        this.svg.size(490, 348).fill('#838B8B');
        
        var chars = text.split('');
        
        var xOffset = 0;
        for (var c = 0; c < chars.length; c++) {
            var lastPath = this.drawChar(chars[c], xOffset, size);
            
            var lastWidth = lastPath.bbox().width;
            if (!isNaN(lastWidth)) {
                xOffset += Math.abs(lastWidth);
            }
        }
    };
    
    this.drawChar = function (char, xOffset, size) {
        // work out scalled horiz advance
        var scaledX = (window.font.glyphs[char].horizAdvX / 1000) * size;
        
        // draw at 0,0 with height applied
        var path = this.svg
        .path(window.font.glyphs[char].path) // draw path
        .size(size, null); // set height
        
        var transforms = path.transform();
        var bbox = path.bbox();
        
        // transform coordinate system
        
        path.transform({
            scaleX: -transforms.scaleX,
            scaleY: transforms.scaleY,
            x: bbox.width + xOffset
        });
        
        path.rotate(180, (bbox.width / 2) + xOffset, bbox.height / 2);
        
        return path;
    }
};

$(function () {
    renderer.drawText('Hughes & Sons', 40);
});