JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
Enter text here: <input type="text" id="message"/>
<div id="golden-circle" width="500" height="500"></div>

CSS

#golden-circle {
    margin-top: 10px;
}

JavaScript

$( document ).ready(function() {
      var paper = Raphael("golden-circle", 500, 500);
      drawPaper('');
      $('#message').on('keyup', function(){
        drawPaper($(this).val());
      });
      function drawPaper(textToPrint) {
        paper.clear();
        Text1 = paper.text(250, 40, textToPrint).attr({fill: '#ff0000'});
        Text2 = paper.text(250, 120, textToPrint).attr({fill: '#ff0000'});
        Text3 = paper.text(250, 250, textToPrint).attr({fill: '#ff0000'});

        paper.add([
          {
            type: "circle",
            cx: 250,
            cy: 250,
            r: 100,
            stroke: "#f00",
            text: Text1
          },
          {
            type: "circle",
            cx: 250,
            cy: 250,
            r: 170,
            stroke: "#f00",
            text: Text2
          },
          {
            type: "circle",
            cx: 250,
            cy: 250,
            r: 250,
            stroke: "#f00",
            text: Text3
          }
        ]);
      }
    });