JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mypattern"></div>
<div>Try the Sample Pattern: <span>3-4-5-10-15</span> (count horizontally). You will get success alert</div>
<div>
    <input type="button" id="valueBtn" value="Value" />
    <input type="button" id="clearBtn" value="clear" />
</div>

CSS

/*custom style for this page ----- no need to include */
 svg circle, svg rect, svg path {
    cursor:move;
}
body {
    background:url(http://www.publicdomainpictures.net/pictures/40000/nahled/blue-check-pattern-background.jpg);
}
span {
    color:green;
}
div {
    text-align:center;
    font-size:14px;
    font-family:arial;
    font-weight:bold;
    line-height:50px;
}

JavaScript

//Plugin start
var Pattern = function (options) {
    "use strict";
    this.dimension = options.dimension && options.dimension.indexOf('x') !== -1 ? options.dimension.split('x') : [3, 3];

    this.patternRadius = options.patternRadius || 20;
    this.patternGap = options.patternGap || 50;
    this.innerColor = options.innerColor || '90-#239EE0:5-#1951A0:95';
    this.outerColor = options.outerColor || '#333333';
    this.background = options.background || '#000000';
    this.backgroundOpacity = options.backgroundOpacity || 1;
    this.hoverColor = options.hoverColor || '#c8ee17';

    this.errorColor = options.errorColor || '#FF0000';

    this.padding = options.padding || this.patternRadius;

    this.onFinish = options.onFinish || null;

    this.width = this.dimension[0] * (2 * this.patternRadius + this.patternGap) + (this.padding * 4) - this.patternGap;
    this.height = this.dimension[1] * (2 * this.patternRadius + this.patternGap) + (this.padding * 4) - this.patternGap;

    this.paper = null;
    this.patternCircle = [];
    this.value = [];
    this.blocker = null;

    var patternObj = this;
    this.isMouseDown = false;
    this.lineX = 0;
    this.lineY = 0;
    this.currentPath = null;
    this.currentTarget = null;


    //styes
    this.paperStyle = {
        fill: patternObj.background,
            'stroke-width': 0,
        opacity: patternObj.backgroundOpacity
    };
    this.selectedStyle = {
        'fill': '#CCC',
            'fill-opacity': 0.3,
            'stroke-width': 3,
            'stroke': '#C8E02A'
    };
    this.innerStyle = {
        'fill': patternObj.innerColor,
            'stroke-width': 0
    };
    this.outerStyle = {
        'fill': patternObj.outerColor,
            'stroke-width': 0,
            'fill-opacity': 1
    };
    this.hoverStyle = {
        'stroke-width': 3,
            'stroke': patternObj.hoverColor,
            'stroke-opacity': 1
    };
    this.pathStyle = {
        stroke: '#FFF',
           ...