JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="http://www.goat1000.com/jquery.tagcanvas.min.js?2.5.1"></script>
<div id="myCanvasContainer">
 <canvas id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li style="font-size:6ex"><a href="#">weltoffen</a></li>
   <li style="font-size:12ex"><a href="#">fühlend</a></li>
   <li style="font-size:20ex"><a href="#">tonangebend</a></li>
   <li style="font-size:6ex"><a href="#">mutiger</a></li>
   <li style="font-size:3ex"><a href="#">weltoffen</a></li>
   <li style="font-size:26ex"><a href="#">kreativ</a></li>
   <li style="font-size:14ex"><a href="#">visionär</a></li>
   <li style="font-size:12ex"><a href="#">menschlich</a></li>
   <li style="font-size:6ex"><a href="#">kinderfreundlich</a></li>
   <li style="font-size:6ex"><a href="#">jung</a></li>
   <li style="font-size:6ex"><a href="#">patriotisch</a></li>
   <li style="font-size:6ex"><a href="#">frei</a></li>
   <li style="font-size:6ex"><a href="#">heimatverbunden</a></li>
   <li style="font-size:6ex"><a href="#">international</a></li>
   <li style="font-size:6ex"><a href="#">weltoffen</a></li>
   <li style="font-size:12ex"><a href="#">fühlend</a></li>
   <li style="font-size:20ex"><a href="#">tonangebend</a></li>
   <li style="font-size:6ex"><a href="#">mutiger</a></li>
   <li style="font-size:3ex"><a href="#">weltoffen</a></li>
   <li style="font-size:26ex"><a href="#">kreativ</a></li>
   <li style="font-size:14ex"><a href="#">visionär</a></li>
   <li style="font-size:12ex"><a href="#">menschlich</a></li>
   <li style="font-size:6ex"><a href="#">kinderfreundlich</a></li>
   <li style="font-size:6ex"><a href="#">jung</a></li>
   <li style="font-size:6ex"><a href="#">patriotisch</a></li>
   <li style="font-size:6ex"><a href="#">frei</a></li>
   <li style="font-size:6ex"><a href="#">heimatverbunden</a></li>
   <li style="font-size:6ex"><a href="#">international</a></li>
   <li style="font-size:6ex"><a href="#">weltoffen</a></li>
   <li...

CSS

body {
    margin:0;
}
canvas {position: absolute;}

JavaScript

function onWindowResize() {
    $('#myCanvas').prop({
        width: $window.width(),
        height: $window.height()
    });
}

var $window = $(window);

onWindowResize();

$('#myCanvas').tagcanvas({
     textColour : 'black',
     outlineThickness : 0,
     maxSpeed : 0.03,
     weight:true,
     depth : 0.75,
     weightMode:'size'
 });

 $window.on('resize',onWindowResize);