JSFiddle - React, Tailwind, and code Playground

by Matt Swensen

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500" width="500" height="500"></svg>

SCSS

svg {
    background-color: #ddd;
}

JavaScript

var svg = $('svg'),
    offset = svg.offset(),
    getX = function(e) { return e.pageX - offset.left; },
    getY = function(e) { return e.pageY - offset.top; },
    mouseDown = false,
    path = null;

svg.on('mousedown', function(e) {
    mouseDown = true;
    path = $('<path>').attr('d','M ' + getX(e) + ',' + getY(e))
        .attr('stroke', '#222222')
        .attr('stroke-width', '2')
        .attr('fill','none');
    svg.append(path);
});

svg.on('mousemove', function(e) {
    if(mouseDown) {
        path.attr('d', path.attr('d') + ' L ' + getX(e) + ',' + getY(e));
    }
});

svg.on('mouseup', function(e) {
    mouseDown = false;
});