JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery SVG test</title>
    <style>
        #paper {
            height: 5455px;
            width: 2306px;
        }
        .ui-draggable-dragging {
            box-shadow: 1px 1px 10px #000;
        }
        #piece {
            height: 75px;
            width: 60px;
            background-color: red;
            display: inline-block;
            cursor: pointer;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script src="https://raw.github.com/smparkes/jquery.svg/master/jquery.svg.min.js">
    </script>
        <script src="https://raw.github.com/smparkes/jquery.svg/master/jquery.svgdom.min.js">
    </script>
</head>
<body>
    <div id="paper">
        
    </div>
    <div id="piece">
        
    </div>
</body>
</html>

JavaScript

$('#paper').svg();

var svg = $('#paper').svg('get');

var land_attr = {
    fill: "#00aa69",
    stroke: "#fff",
    strokeWidth: 4,
    strokeLinejoin: "round"
}
    
var sea_attr =    {
    fill: "#94c0ff",
    stroke: "#fff",
    strokeWidth: 3,
    strokeLinejoin: "round"
 }

land = svg.path("M588.667,4738c0,0-5-1.333-4.667-8v-8.333c0,0-3.667-13.666-9,0V4732   c0,0,0,6.666-3.333,10.333c0,0-4.667,6.668-10.667-0.666c0,0-5-10.001-13.333-9.334c0,0-13.667-5-12.667-11.333   c0,0,0-14.666-11-4.333c0,0-8,8.666-10.333,8.333c0,0-9,5.666-4,14.333c0,0,15.666,23,13.333,25c0,0-1,14.668,12.333,18.334   c0,0,7.333,1.334,10,3c0,0,15,5,15.667,19c0,0,2.334,24.666,5.667,30.666c0,0,11.667,27.001,40,8.334c0,0,7.333-10.333,10-14   c0,0,9-11.668,28.333-8.334c0,0,18.333-2,24-6.333c0,0,33-19.001-3.333-32.667c0,0-8.333,3.001-13.333-3.666   c0,0-9-6.667-10.667-15.667c0,0,4.667-13.999-22-12.333c0,0-5.667,0.999-12.667-3.334C607,4747.333,588.667,4739,588.667,4738zM552,4699c0,0-3.333-5.666-9-7.333c0,0-7.667-7.668,6.667-11.334c0,0,13.333-3,9,9   l-2.333,9.667C556.333,4699,554.667,4706,552,4699z", land_attr);

// Sea            
sea = svg.path("M1.02,4022.999v1217.726h1855.23c2.666-4.667-19.246-75.057-19.246-75.057  c-26.668-68-5.334-138.666-5.334-138.666c3.334-12.666-9.334-42-9.334-42c-10-37.333,44.656-182.671,44.656-182.671  c-14,5.333-38,5.333-38,5.333c-30.666,1.333-32,28.667-32,28.667c-0.666,16-21.334,15.333-21.334,15.333  c-8.666,18-24.666,15.334-24.666,15.334c-22,7.334-36.666,0-36.666,0c-11.334-12-57.334-32.001-57.334-32.001  c-19-9.5-29.375-10.656-34.922-8.391h0.162c-9.244,3.775-5.078,17.058-5.078,17.058c-4,18-38.658,22-38.658,22  c-8.66,6.667-86.009-1.333-86.009-1.333c-21.333-5.333-42,2-42,2c-18.667,4.667-20.667-6.667-20.667-6.667  c0-9.333-11.333-12.667-11.333-12.667c-14-5.334-9.333-14-9.333-14c-9.334-19.334-38.667,7.334-38.667,7.334  c-11.333,15.334-62,31.534-62,31.534c-30.667,14.201-34.667,0-34.667,0c-6-10.466-35.333-3.534-35.333-3.534 ...