Function to be used to generate random title blocks for the YourJS blog posts.

getRandomTitleBlock.js

// Source:  https://gist.github.com/westc/c4ea74893631e3733e264b230559139d
(function () {
  function runner() {
    getRandomTitleBlock = function (title, width, height, numberOfGradients, callback) {
      var parent = document.createElement('div');

      var targetHeight = Math.round(height / 2);
      var fontSize = targetHeight;

      var scale = roundRandom(75, 100) / 100;
      var revScale = 1 / scale;

      var minBorder = Math.min(width, height);
      var radius1 = roundRandom(0, minBorder);
      var radius2 = Math.max(width, height) - radius1;
      if (roundRandom(0, 1)) {
        [radius1, radius2] = [radius2, radius1];
      }
      var suffix = ('_' + Math.random()).replace('.', '');

      parent.style.cssText = `position: absolute; top: -${width * 9}px; left: -${height * 9}px;`;
      parent.innerHTML = `<div id="el1${suffix}"><div id="el2${suffix}"></div><div id="jsWrap${suffix}"><div id="your${suffix}">Your</div><div id="js${suffix}">JS</div></div><div id="el3${suffix}"><div id="el4${suffix}"><div id="el5${suffix}"><div id="el6${suffix}"></div></div></div></div></div>`;

      document.body.appendChild(parent);

      var elJSWrap = document.getElementById('jsWrap' + suffix);
      var elJS = document.getElementById('js' + suffix);
      var elYour = document.getElementById('your' + suffix);
      for (var i = 1; i <= 6; i++) {
        eval(`var el${i} = document.getElementById('el${i}${suffix}');`);
      }

      Object.assign(el1.style, {
        display: 'inline-block',
        width: `${width}px`,
        height: `${height}px`,
        position: 'relative',
        fontSize: `${fontSize}px`
      });

      Object.assign(el2.style, {
        backgroundColor: `hsl(${roundRandom(0, 259)},100%,50%)`,
        backgroundImage: randomGradients(numberOfGradients),
        boxShadow: 'inset 0 0 10px 1px #000',
        filter: 'brightness(125%)',
        borderRadius: `${radius1}px ${radius2}px`,
        transform: `scale(${scale})`,
        overflow: 'hidden',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        fontFamily: 'Courier New',
        fontSize: '0.3em',
        color: 'rgba(0,0,0,0.5)',
        wordBreak: 'break-all',
        zIndex: 1
      });

      Object.assign(elJSWrap.style, {
        position: 'absolute',
        bottom: 0,
        right: 0,
        backgroundColor: '#f7df1e',
        height: '2.5em',
        width: '2.5em',
        fontFamily: 'Trebuchet MS',
        zIndex: 2,
        fontWeight: 900,
        boxShadow: 'inset 0 0 0.05em 0.05em #000',
        backgroundImage: 'linear-gradient(212deg,rgba(255,255,255,0.3),rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.3))'
      });

      Object.assign(elYour.style, {
        position: 'absolute',
        fontSize: '0.6em',
        top: '0.1em',
        left: '0.2em',
        boxShadow: '0 0.2em 0.2em -0.2em #000',
        letterSpacing: '0.05em'
      });

      Object.assign(elJS.style, {
        position: 'absolute',
        fontSize: '1.6em',
        bottom: '-0.1em',
        right: '0.05em'
      });

      Object.assign(el3.style, {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 3
      });

      Object.assign(el4.style, {
        display: 'table',
        width: '100%',
        height: '100%',
        fontFamily: 'Trebuchet MS',
        color: '#FFF',
        textShadow: '0 0 0.25em #000, 0 0 0.25em #000, 0 0 0.25em #000'
      });

      Object.assign(el5.style, {
        display: 'table-cell',
        verticalAlign: 'middle',
        textAlign: 'center'
      });

      var angle = Math.atan2(height, width) * 90 / Math.PI;
      angle = roundRandom(-angle, angle);

      Object.assign(el6.style, {
        padding: '0.5em',
        backgroundImage: `radial-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 50%)`,
        borderRadius: `${radius2}px ${radius1}px`,
        transform: `rotate(${angle}deg)`
      });

      el6.textContent = el6.innerText = title;
      el6.innerHTML = el6.innerHTML.replace(/\b/g, '<wbr>');

      var sizeDir = el6.offsetHeight < targetHeight ? 16 : -16;
      var interval = setInterval(function () {
        fontSize += sizeDir;
        el1.style.fontSize = `${fontSize}px`;
        if (sizeDir < 0 ? el6.offsetHeight <= targetHeight : (el6.offsetHeight >= targetHeight)) {
          if (Math.abs(sizeDir) > 1) {
            fontSize -= sizeDir;
            sizeDir /= 2;
          }
          else {
            clearInterval(interval);

            var runnerCode = runner + '';
            var splitIndex = roundRandom(0, runnerCode.length);
            el2.textContent = el2.innerText = runnerCode.slice(splitIndex) + runnerCode.slice(0, splitIndex);

            getImage(parent, width, height, function (img) {
              document.body.removeChild(parent);
              callback(img);
            });
          }
        }
      }, 1);
    };

    function roundRandom(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    }

    function randomGradients(count, maxShadesCount = 5) {
      var arr = [];
      for (var i = 0; i < count; i++) {
        var deg = roundRandom(0, 259);
        var gradientType = roundRandom(0, 3) ? 'linear' : 'radial';
        var alpha, pct = 0, shadesCount = 0, colorNum = roundRandom(0, 1) * 255;
        var gradientsArgs = [`rgba(${colorNum},${colorNum},${colorNum},0.1) 0%`];
        if (gradientType === 'linear') {
          gradientsArgs.unshift(`${deg}deg`);
        }
        do {
          pct = roundRandom(pct + 2, shadesCount < 1 ? 66 : 96);
          alpha = roundRandom(1, 3);
          gradientsArgs.push(`rgba(${colorNum},${colorNum},${colorNum},0.${alpha}) ${pct}%`);
          colorNum = 255 - colorNum;
          pct += 2;
          alpha = roundRandom(1, 5);
          gradientsArgs.push(`rgba(${colorNum},${colorNum},${colorNum},0.${alpha}) ${pct}%`);
          shadesCount++;
        } while (pct < 94 && shadesCount < maxShadesCount && roundRandom(0, 1));
        gradientsArgs.push(`rgba(${colorNum},${colorNum},${colorNum},0.1) 100%`);
        arr.push(`${gradientType}-gradient(${gradientsArgs.join(', ')})`);
      }
      return arr;
    }

    function getImage(parent, width, height, callback) {
      var html = parent.innerHTML.replace(/<wbr>/g, '<wbr />');
      var data = `
        <svg xmlns="http://www.w3.org/2000/svg" height="${height}" width="${width}">
          <foreignObject width="100%" height="100%">
            <div xmlns="http://www.w3.org/1999/xhtml">
              ${html}
            </div>
          </foreignObject>
        </svg>`;

      // Define an image
      var img = new Image();

      // Once the image loads draw it onto a new canvas
      img.onload = function () {
        // Create a canvas
        var canvas = document.createElement('canvas');
        canvas.style.height = 0;
        canvas.height = height;
        canvas.width = width;

        // Draw the image onto the canvas
        canvas.getContext('2d').drawImage(img, 0, 0);

        var imgToAppend = new Image();
        imgToAppend.style.display = 'block';
        imgToAppend.src = canvas.toDataURL();
        callback(imgToAppend);
      };
      img.onerror = function(e) {
        console.group('getRandomTitleBlock error...');
        console.error(data);
        console.error(img.src);
        console.groupEnd();
      };

      // Set the source of the image to the SVG data
      img.src = 'data:image/svg+xml;base64,' + window.btoa(data);
    }
  }
  runner();
})();

run.js

getRandomTitleBlock('Lorem Ipsum Suco Explitoach Uzu Vaw', 400, 400, 4, function(img) {
  document.body.innerHTML = '';
  document.body.appendChild(img);
});

Here is an example image: