JSFiddle - React, Tailwind, and code Playground

by Vijay Gujar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.3/opentype.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.3/opentype.js"></script>

JavaScript

const opentype = require('opentype.js');

const blockSize = 14;
const squareHeight = 60;
const squareWidth = 190;
const color = {
    top: '#e6008d',
    middle: '#8d2089',
    bottom: '#5f2688'
};

const blocks = [
    //      [blockSize, 0],
    //      [0, blockSize * 2],
    //      [blockSize * 3, blockSize * 2],
    //      [blockSize, blockSize * 3],
    //      [blockSize * 4, blockSize * 4],
    [blockSize * 2, blockSize * 5],
    [0, blockSize * 6],
    [blockSize * 2, blockSize * 6],
    [blockSize * 3, blockSize * 6],
    [blockSize * 5, blockSize * 6],
    [0, blockSize * 7],
    [blockSize * 1, blockSize * 7],
    [blockSize * 2, blockSize * 7],
    [blockSize * 3, blockSize * 7],
    [blockSize * 5, blockSize * 7],
    [blockSize * 7, blockSize * 7],

];
const padding = 50;
const svgHeight = squareHeight * 3 + blockSize * 18;




window.renderLogo = function(selector, showText = true) {

    let viewBox = '-' + padding * 2 + ' ' + padding / 2 + ' ' + squareWidth * 2 + ' ' + squareWidth * 2;
    let width = 200;
    if (showText) {
        width = 275;
        viewBox = padding / 2 + ' ' + padding / 2 + ' ' + squareWidth * 2 + ' ' + squareWidth * 2;
    }

    const svg = d3.select(selector).append('svg')
        .attr('width', width)
        .attr('height', 200)
        .attr(':xmlns:dc', 'http://purl.org/dc/elements/1.1/')
        .attr(':xmlns:cc', 'http://creativecommons.org/ns#')
        .attr(':xmlns:rdf', 'http://www.w3.org/1999/02/22-rdf-syntax-ns#')
        .attr(':xmlns:svg', 'http://www.w3.org/2000/svg')
        .attr(':xmlns', 'http://www.w3.org/2000/svg')
        .attr(':xmlns:sodipodi', 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd')
        .attr(':xmlns:inkscape', 'http://www.inkscape.org/namespaces/inkscape')
        .attr('viewBox', viewBox);



    function addBlock(x, y, color) {
        svg.append('rect')
            .attr('x', x)
            .attr('y', y)
            .attr('width', blockSize)
            .attr('height',...