JSFiddle - React, Tailwind, and code Playground

by anup1986

HTML

<div id="canvas"></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

JavaScript

window.onload = function() {
    var i, newP,
        R = Raphael("canvas",500,400),
        
          // Create our set of letter paths
        t = R.print(100, 0, "this is a test", R.getFont("whoa"), 30),
        
          // Create the path to follow
        p = R.path("M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100" +
                   " C 400 50 450 50 450 50").attr("stroke", "none"),
        pLen = p.getTotalLength(), // Length of path to follow
        tLen = t.length,           // Number of characters
        oneL = pLen/tLen;          // Average length of 1 character
    
      // Position each character
    for (i = 0; i < tLen; i++) {
        
          // Get x,y of the path to follow
        newP = p.getPointAtLength(i + oneL);
        
          // Move the letter
       t[i].translate((i * oneL)-newP.x, newP.y); 
        t[i].attr("fill", Raphael.getColor());
    }
};

Raphael.registerFont({w:229,face:{"font-family":"whoa","font-weight":400,"font-stretch":"normal","units-per-em":"360","panose-1":"2 0 5 0 0 0 0 0 0 0",ascent:"288",descent:"-72",bbox:"-0.738298 -325 315.086 19","underline-thickness":"26.3672","underline-position":"-24.9609","unicode-range":"U+0020-U+007A"},glyphs:{"...