JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Centerline Extraction & Curve Fitting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/1.7.0/math.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/skeleton-tracing-js/dist/trace_skeleton.min.js"></script>
    <script src="https://soswow.github.io/fit-curve/lib/fit-curve.js"></script>
    <style>
        body { font-family: sans-serif; background: #222; color: #eee; text-align: center; padding: 20px; }
        .svg-container { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
        .svg-box { border: 1px solid #555; padding: 10px; background: white; width: 260px; }
        svg { width: 250px; height: 250px; }
        .controls { margin-top: 20px; text-align: left; display: inline-block; }
        input[type="range"] { width: 100px; }
        button { margin-top: 10px; padding: 8px 15px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>SVG Centerline Extraction & Curve Fitting</h1>

    <div class="svg-container">
        <div>
            <h3>Original SVG</h3>
            <div class="svg-box" id="originalContainer"></div>
        </div>
        <div>
            <h3>Modified SVG with Smoothed Centerline</h3>
            <div class="svg-box" id="modifiedContainer"></div>
        </div>
    </div>

    <label>
        Curve Fitting Error:
        <input id="errorInput" type="range" min="1" max="300" value="50"/>
        <span id="errorValue">50</span>
    </label>
    <button onclick="resetPaths()">Reset</button>

    <div class="controls" id="controlsContainer"></div>

    <script>
        const originalSVG = `<svg id="letterSVG" width="600" height="600" viewBox="0 0 600 600">
            <path d="M69.43 57.81L69.14 70.41L22.07...