JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.5.2/tinycolor.min.js"></script>
<svg id="robot"></svg>

CSS

#robot {
  height: 200px;
  width: 200px;
}

.hidden {
  display: none;
}

JavaScript

const state = {
	color: "#195272",
  hasAntenna: true,
  hasSpeaker: true,
  hasArmor: true,
}

const mainColor = tinycolor(state.color);
const faceColor = tinycolor({...mainColor.toHsl(), l: 0.88});
const bodyColor = faceColor.clone().desaturate(40);

const paper = Snap("#robot");
const parts = [];

const faceBg = paper.rect(52, 60, 96, 70, 30);
faceBg.attr({
    fill: faceColor,
    stroke: mainColor,
    strokeWidth: 5
});

const eyeLeft = paper.circle(80, 90, 6);
const eyeRight = paper.circle(120, 90, 6);
eyeLeft.attr({fill: mainColor});
eyeRight.attr({fill: mainColor});
const eyes = paper.group(eyeLeft, eyeRight);

const mouth = paper.path("M 90 110 C 90 110, 100 125, 110 110");
mouth.attr({
		fill: "none",
    stroke: mainColor,
    strokeWidth: 5    
});
const mouthOpenBg = paper.path("M 90 102 H 85 V 110 C 85 110, 100 125, 112 110 V 102 H 90");
mouthOpenBg.attr({
		fill: mainColor,
    stroke: mainColor,
    strokeWidth: 5  
});
const tongue = paper.path("M 90 110 C 90 110, 99 120, 108 110 C 108 110, 99 100, 90 110");
tongue.attr({
		fill: "#f9bbbb",
});
const mouthOpen = paper.group(mouthOpenBg, tongue)
mouthOpen.addClass('hidden');

const face = paper.group(faceBg, eyes, mouth, mouthOpen);

const headBg = paper.rect(38, 30, 124, 114, 40);
headBg.attr({
    fill: "#ffffff",
    stroke: mainColor,
    strokeWidth: 5
});

const head = paper.group(headBg, face);

const body = paper.circle(100, 115, 80);
body.attr({
    fill: bodyColor,
    stroke: mainColor,
    strokeWidth: 5
});

// TODO: this should be an add-on instead of an option.
// The code of the add-on is in the consumable and loaded here.
if (state.hasAntenna) {
	const antennaPole = paper.line(100, 15, 100, 30)
  antennaPole.attr({
  	stroke: mainColor,
    strokeWidth: 5
  });
  const antennaDish = paper.circle(100,12, 8)
  antennaDish.attr({
  	fill: "#ffffff",
  	stroke: mainColor,
    strokeWidth: 5
  });
  parts.push(paper.group(antennaPole, antennaDish));
}

if (state.hasSpeaker) {
  const...