JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

JavaScript

var paper = Raphael(0, 0, '100%', '100%'),
    path = paper.path("M50,100c40,-50 270,50 300,0").attr("stroke", "#CCC"),
    message = "I want to do this in RaphaelJS",
    message_length = 0,
    letters = [],
    places = [],
    ratio,
    fontsize,                                                
    letter,
    c = 0,
    p;


//since not every letter is the same width, get the placement for each letter along the length of the string
//however, Raphael appears to group the width of letters into intervals of 4px, so this won't be perfect        
for (; c < message.length; c += 1) {
        letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "start"});
    letters.push(letter);
    places.push(message_length);
    //spaces get a width of 0, so set min at 4px
    message_length += Math.max(4, letter.getBBox().width);
}
    
ratio = path.getTotalLength() / message_length;
fontsize = 10 * ratio;

for (c = 0; c < letters.length; c += 1) {
    letters[c].attr("font-size", fontsize + "px"); 
    p = path.getPointAtLength(places[c] * ratio);
    //there does appear to be a bug in p.alpha around 180. Here's the fix
    letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha)});
}