JSFiddle - React, Tailwind, and code Playground

by AndyE

JavaScript

var ico = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==',
    createLink;

var url,
    img = new Image(),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

img.src = ico;

canvas.width = 16;
canvas.height = 16;

ctx.clearRect(0, 0, 16, 16);
ctx.fillStyle = "rgba(63, 175, 7, 0.8)" //: "rgba(200, 0, 30, 0.6)";

ctx.drawImage(img, 0, 0);


drawBubble(ctx, 6, 7, 9, 7, 2);

ctx.fillStyle = "#fff";

url = canvas.toDataURL("image/png");

(function () { 
        var el = document.createElement("link");
        el.rel = "shortcut icon";
        el.href = url;
        document.documentElement.firstChild.appendChild(el);
        return el;
    })();

function drawBubble(ctx, x, y, w, h, radius) {
    var r = x + w;
    var b = y + h;
    ctx.beginPath();
    ctx.strokeStyle="rgb(0, 130, 0)";
    ctx.fillStyle = "white";
    ctx.lineWidth=1;
    ctx.moveTo(x+radius, y);
    ctx.lineTo(r-radius, y);
    ctx.quadraticCurveTo(r, y, r, y+radius);
    ctx.lineTo(r, y+h-radius);
    ctx.quadraticCurveTo(r, b, r-radius, b);
    ctx.lineTo(r-radius, b);
    ctx.lineTo(x+(w/2), b+2);
    ctx.lineTo(x+radius, b);
    ctx.quadraticCurveTo(x, b, x, b-radius);
    ctx.lineTo(x, y+radius);
    ctx.quadraticCurveTo(x, y, x+radius, y);
    ctx.stroke();
    ctx.fill();
    
    ctx.beginPath();
    ctx.lineWidth=1;
    ctx.moveTo(x+2,y+2);
    ctx.lineTo(r-2,...