JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<div class="wrap">
    <div class="grid">
        <span class="p1"></span>
        <span class="p2"></span>
    </div>
</div>

CSS

div.wrap {
    height:300px;
    width:300px;
    position:relative;
}
div.grid {
    border-right:1px solid #888;
    border-bottom:1px solid #888;
    width:297px;
    height:297px;
}
span {
    display:block;
    height:6px;
    width:6px;
    border-radius:3px;
    background:red;
    position:absolute;
    right:0;
}
.p1 {
    bottom:0;
}

JavaScript

var A = 100,
    cv = 0.1,
    w = 0.5,
    c = 0,
    f = 0,
    t = 1,
    d = 10,
    p1 = $('.p1'),
    p2 = $('.p2');
// A - длина отрезка, cv = v/A, cw = рад/с, d - интервал в мс
p2.css('bottom', A + 'px');
var int = setInterval(function(){
    if (c <= A) {
        c = A*cv*(d/1000)*t;
        f = w*(d/1000)*t;
        p1.css({
            right: c * Math.sin(f),
            bottom: -1 * c * Math.cos(f)
        });
        p2.css({
            right: -1 * (A - c) * Math.sin(f),
            bottom: (A - c) * Math.cos(f)
        });
        t++;
    }
    else {
        clearInterval(int);
    }                  
},d);