JSFiddle - React, Tailwind, and code Playground

by djatha

HTML

<figure id="paper"></figure>

JavaScript

// paper and path
var paper = Raphael("paper", 500, 500);
var path = "M10,10L345,345";
var ppath = paper.path(path);

var start = 0;
var end = Raphael.getTotalLength(path);
var half = (end - start)/2;

var R = 10;
    
var halfpoint = Raphael.getPointAtLength(path, half);
var halfpoint_circle = paper.circle( halfpoint.x, halfpoint.y, R);