JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<div id="divWheel" data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-navangle='0' data-wheelnav-colors="#338d9e, #225e69, #338d9e, #225e69, #338d9e,#225e69,#338d9e,#225e69"
		data-wheelnav-cssmode></div>

CSS

#divWheel {
			height: 400px;
			width: 400px;
			margin: auto;
		}
		
		#divWheel>svg {
			height: 100%;
			width: 100%;
		}
		
		@media (max-width: 600px) {
			#divWheel {
				height: 350px;
				width: 350px;
			}
		}
		
		@media (max-width: 400px) {
			#divWheel {
				height: 300px;
				width: 300px;
			}
		}
		/* Insert generated CSS code from here -> http://pmg.softwaretailoring.net */
		
		[class|=wheelnav-divWheel-slice-basic] {
			fill: rgba(51, 141, 158, 1);
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
      -webkit-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      -moz-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
		}
		
		[class|=wheelnav-divWheel-slice-dark] {
			fill: rgb(34, 94, 105);
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
      -webkit-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      -moz-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
		}
		
		[class|=wheelnav-divWheel-slice-selected] {}
		
		[class|=wheelnav-divWheel-slice-hover] {
			fill: #2b807d;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
			fill-opacity: 0.77;
			cursor: pointer;
      -webkit-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      -moz-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
		}
		
		[class|=wheelnav-divWheel-title-basic] {
			fill: white;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
      -webkit-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      -moz-box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
      box-shadow: 0px 0px 20px 20px rgba(179,179,179,1);
		}
		
		[class|=wheelnav-divWheel-title-selected] {
			fill: #fff;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
		}
		
		[class|=wheelnav-divWheel-title-hover] {
			fill: #222;
			stroke: rgba(1, 1, 1, 0.1);
			stroke-width: 3;
			cursor:...

JavaScript

var wheel = new wheelnav("divWheel");
  wheel.cssMode = true;
  wheel.wheelRadius = wheel.wheelRadius * 0.7;
  wheel.titleRotateAngle = 90;
  wheel.animatetime = 500;
  wheel.animateeffect = 'linear';
  wheel.spreaderEnable = true;
  wheel.spreaderRadius = 80;
  wheel.spreaderInTitle = "content"
  wheel.spreaderOutTitle = "content"
  wheel.spreaderTitleFont = "500 14px Impact, Charcoal, sans-serif";
  //piemenu.sliceHoverPathFunction = slicePath().CogSlice;
  //piemenu.sliceSelectedPathFunction = slicePath().CogSlice;

  wheel.sliceTransformFunction  = sliceTransform().MoveMiddleTransform;
  //This is the place for code snippets from the documentation -> http://wheelnavjs.softwaretailoring.net/documentation.html

  var arr = ["Content","Content","Content","Content","Content","Content","Content"];

  wheel.createWheel(arr);

  //Insert generated JavaScript code from here -> http://pmg.softwaretailoring.net