JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="page"></div>

CSS

body {
    position: relative;
    margin: 0;
    padding: 50px;
}

div#page {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 10%;
    left: 10%;
    border: 1px solid #f00;
}

div.line{
  -webkit-transform-origin: 0 100%;
  height: 3px; /* Line width of 3 */
  background: #000; /* Black fill */
}

JavaScript

function createLine(x1,y1, x2,y2){
    var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
    var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate('+angle+'deg)';

    var line = $('<div>')
        .appendTo('#page')
        .addClass('line')
        .css({
          'position': 'absolute',
          'transform': transform,
            'left' : x1, 'top': y1,
            'width': length
        });

    return line;
}
createLine(10,10,100,100)