JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.6.1/wheelnav.min.js"></script>
<div id="wheelNav" class="wd"></div>
<div id="wheelNav2" class="wd"></div>

CSS

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.wd {
            height: 400px;
            width: 400px;
            margin: auto;
        }

        .wd>svg {
            height: 100%;
            width: 100%;
        }

JavaScript

var wheel = new wheelnav('wheelNav');
          wheel.spreaderEnable = true;
          wheel.colors = colorpalette.oceanfive;
          wheel.slicePathFunction = slicePath().LineSlice;
          wheel.createWheel(['default', 'enable', 'radius', 'attrs', 'percent']);
          
var wheel2 = new wheelnav('wheelNav2');
wheel2.spreaderInTitle = 'menu';
wheel2.spreaderOutTitle = 'close';
wheel2.spreaderTitleFont = '100 24px Helvetica';
wheel2.spreaderInPercent = 0.8;
wheel2.spreaderOutPercent = 5;
wheel2.colors = ['#EDC951'];
wheel2.spreaderEnable = true;
wheel2.spreaderRadius = 500;
wheel2.slicePathFunction = slicePath().DonutSlice;
wheel2.clickModeRotate = false;
wheel2.createWheel(['text', 'icon', 'percent', 'angle', null, null, null, null, null, null, null, null, null, null, null, null]);