JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>e-nugget dynamics</title>
</head>
<body>
    <svg id="playground" height="500" width="500" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="p1"/>
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,0,255);stroke-width:2" id="p2"/>
        <line x1="-1000" y1="250" x2="1000" y2="250" style="stroke:rgb(0,0,0);stroke-width:1" id="p2" stroke-dasharray="4"/>
        <circle cx="0" cy="0" r="10" id="cB"/>
    </svg>
    <script type='text/javascript'>
        var svgns = "http://www.w3.org/2000/svg";
        // parametres :
        // coordonnées de l'origine (x vers la droite, y vers le bas)
        var alpha = 40*Math.PI/180.0; // angle entre les jambes (rad)
        var L1 = 1;                   // longueur de la jambe 1 (m)
        var L2 = 1;                   // longueur de la jambe 1 (m)
        var xA1 = 2.50;               // position initiale du pied (m)
        var yA1 = 2.50;               // position initiale du pied (m)
        var state = 1;                // état initial
        var grav = 9.81;              // constant g (en m/s²)
        var dt = 0.040;               // temps de sampling (s)
        // variables d'etat
        var theta = Math.PI+0.00001;          //rad
        var thetap = 0;               //rad/s
        
        window.setInterval(function(){
            // algo de controle ici
            L1 = 1+0.05*Math.sin(2*Date.now()/1000);
            // physique de la marche
            if(state==1){
                // frequence propre du pendule
                var w0 = Math.sqrt(grav/L1);
                // integration des equations de la dynamique
                var thetapp = -w0*Math.sin(theta)
                thetap = thetap + thetapp*dt;
                theta = theta + thetap*dt;
                // calcul des coordonnées du pelvis
                xB = xA1+L1*Math.sin(theta);
                yB =...