JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<div id="d">innerhtml</div>

CSS

body {
  width: 100vw;
  height: 100vh;
  background: green;
}

JavaScript

let toggle = false;
document.body.onclick = () => {
  console.log("click");
  toggle = !toggle;
}
function degreesToRadians(r) {
	return (r / 180.0) * Math.PI; 
}

function getDropShadowOffset(rotation) {
  const angle = degreesToRadians(rotation + 45);
  return [Math.sin(angle), Math.cos(angle)];
}

function getDropShadowFilterWithOffset(offset) {
  return `<filter id='shadow' 
  filterUnits='userSpaceOnUse'
  color-interpolation-filters="sRGB">
    <feDropShadow dx="${offset[0]}" 
    dy="${offset[1]}" stdDeviation="1" 
    flood-opacity="0.8"/>
  </filter>`;
}

function buildSvg(props) {
  const [width, height] = props.dimensions;

  return `<svg xmlns="http://www.w3.org/2000/svg"
    width="${width}"
    height="${height}"
    viewBox="0 0 ${width} ${height}"
    fill="red">
    ${props.filter}
    ${props.children}
  </svg>`;
}

function groupWithRotationAboutCenter(props) {
  const centre = props.size / 2;
  return `<g
    transform="rotate(${props.rotation} ${centre} ${centre})"
    filter="url(#shadow)">
    ${props.children}
  </g>`;
}

const size = 24;
const padding = 0;
const paddedSize = size + padding;

const shape = `<path d="M0 ${paddedSize / 2} L${paddedSize} ${paddedSize / 2}" stroke="black"/>`;
/* const shape = `<rect x="${padding / 2}px" y="${padding / 2}" width="${size}" height="${size}" fill="red" />`; */

const animate = () => {
 	
  const rotation = performance.now() / 10.0
  const g = groupWithRotationAboutCenter({rotation: rotation, size: paddedSize, children: shape});
	const filter = getDropShadowFilterWithOffset(getDropShadowOffset(rotation));
	const svg = buildSvg({dimensions: [paddedSize, paddedSize], children: g, filter: filter});

  const d = document.getElementById("d");
  d.innerHTML = svg;
  /* console.log(svg); */
  const base64String = btoa(svg);
  if(!toggle) {
	  document.body.style.cursor = `url(data:image/svg+xml;base64,${base64String}) ${size / 2} ${size / 2}, auto`;  
	} else {
  	document.body.style.cursor = '';
  }
  
 ...