JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div id="mydiv"></div>

CSS

body {
    margin:0;
    padding:0;
}
div {
    text-align:center;
}

JavaScript

var Spiral = function (options) {
    this.paper = null;
    var paperObj = this;
    this.type = options.type || 'square'
    this.size = options.size || 100;
    this.spiral = null;
    this.color = options.color || '#000000';
    this.thickness = options.thickness || 1;
    this.gap = (options.gap || 5) + this.thickness;
    this.lineStyle = {
        'stroke-width': paperObj.thickness,
            'stroke': paperObj.color,
            'stroke-opacity': 1
    };
    this.drawSquareSpiral = function () {
        var mx = paperObj.size / 2;
        var my = paperObj.size / 2;
        var path = 'M' + mx + ' ' + (my+paperObj.thickness/2);
        var count = paperObj.size / paperObj.gap;
        for (var i = 1; i < count; i++) {
            if (i % 2) {
                my = (my - (i * paperObj.gap));
                path = path + 'L' + mx + ' ' + my;
                mx = (mx - (i * paperObj.gap));
                path = path + 'L' + mx + ' ' + my;
            } else {
                my = my + (i * paperObj.gap);
                path = path + 'L' + mx + ' ' + my;
                mx = mx + (i * paperObj.gap);
                path = path + 'L' + mx + ' ' + my;
            }
        }
        return paperObj.paper.path(path).attr(paperObj.lineStyle);
    };
    this.drawCircularSpiral = function () {

    };
    this.draw = function (elm) {
        paperObj.paper = Raphael(elm, paperObj.size, paperObj.size);
        switch (paperObj.type.toLowerCase()) {
            case 'circle':
                paperObj.drawCircularSpiral();
                break;
            case 'square':
            default:
                paperObj.drawSquareSpiral();
                break;
        }
    };
};

var ss = new Spiral({
    size: 250,
    gap: 2,
    thickness: 5,
    type: 'square'
});
ss.draw(document.getElementById('mydiv'));