JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<h1>Input</h1>
<textarea name="input"></textarea>
<h1>Output</h1>
<textarea name="output"></textarea>

CSS

textarea {
  width: 100%;
  height: 20vh;
}

JavaScript

var encodeSting = function(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
  },
  decodeString = function(str) {
    return decodeURIComponent(escape(window.atob(str)));
  }


$('textarea[name=input]').on('change', function() {
  inputVal = $(this).val();
  outputVal = 'data:image/svg+xml;base64,' + encodeSting(inputVal);

  $('textarea[name=output]').val(outputVal);

})


/*
<svg width="83" height="104" viewBox="0 0 83 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.9543 65.2107C67.9548 65.2109 67.9554 65.2111 68.5899 63.6749C69.2245 62.1386 69.2251 62.1389 69.2258 62.1392L69.2272 62.1398L69.2307 62.1412L69.2397 62.145C69.2467 62.1479 69.2555 62.1516 69.2661 62.1562C69.2873 62.1653 69.3157 62.1776 69.3508 62.1932C69.4212 62.2244 69.5188 62.2689 69.6404 62.3271C69.8833 62.4434 70.223 62.615 70.633 62.8455C71.4513 63.3056 72.5591 64.006 73.7398 64.9787C76.0955 66.9194 78.8052 69.9988 80.002 74.464L76.7911 75.3246C75.8272 71.7285 73.6335 69.1982 71.6261 67.5445C70.6253 66.72 69.6866 66.1271 69.0037 65.7431C68.6631 65.5516 68.3886 65.4134 68.205 65.3255C68.1133 65.2816 68.0445 65.2504 68.0018 65.2314C67.9805 65.222 67.9657 65.2156 67.9578 65.2122L67.9512 65.2094L67.9512 65.2094C67.9512 65.2094 67.9514 65.2095 67.952 65.2097L67.9533 65.2103L67.9543 65.2107Z" fill="#3A3A3A"/>
<path d="M66.3462 67.8574C68.7941 67.8574 70.7785 65.873 70.7785 63.425C70.7785 60.9771 68.7941 58.9927 66.3462 58.9927C63.8982 58.9927 61.9138 60.9771 61.9138 63.425C61.9138 65.873 63.8982 67.8574 66.3462 67.8574Z" fill="url(#paint0_linear_938_10543)"/>
<path d="M19.003 63.6748C19.003 63.6748 9.77809 67.5531 10.4429 74.1463" stroke="#3A3A3A" stroke-width="12" stroke-miterlimit="10"/>
<path d="M21.2466 67.8574C23.6946 67.8574 25.679 65.873 25.679 63.425C25.679 60.9771 23.6946 58.9927 21.2466 58.9927C18.7987 58.9927 16.8143 60.9771 16.8143 63.425C16.8143 65.873 18.7987 67.8574 21.2466 67.8574Z"...