JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<canvas id="canvas" width="580" height="580"></canvas>
<div class="center"></div>
<div class="contenedor">
  <input id="mega" type="number" />
  <button onclick="crear(mega.value);mega.value = ''">Crear</button>
  <br><span id="uso"></span>
  <ul id="list"></ul>
</div>

CSS

canvas {
  background: #ccc;
  position: relative;
  margin: 20px;
  border-radius: 100%;
  box-shadow: 15px 15px 25px #33335540,
    -15px -15px 20px #ffffff50,
    -5px -5px 5px inset #33335540,
    5px 5px 5px inset #ffffff50;
}

.center {
  background: #fff;
  position: absolute;
  display: block;
  height: 80px;
  width: 80px;
  top: 278px;
  left: 278px;
  margin: 0;
  border-radius: 100%;
  box-shadow: -10px -10px 25px #33335540,
    10px 10px 20px #ffffff50,
    5px 5px 10px inset #33335540,
    -5px -5px 10px inset #ffffff50;
}

body {
  background: #fff;
}

li {
  list-style-type: none;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}

li div{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px black solid;
  border-radius:2px;
  float: left;
}

.contenedor{
  margin: 40px;
  float: right;
}

JavaScript

var ctx = canvas.getContext('2d'),
  centro = 290,
  size = 40,
  g = -(Math.PI / 2);
var ar = [1, 24, 47, 50];
var ni, r = 0;
var u;

function remove(a, v) {

  return ar.filter(function(e) {
    return e != ar[v];
  });

}

function rem(e) {
  e.remove();
}

function index(obj, type) {
  var items = document.getElementsByTagName(type);
  for (var i = 0; i < items.length; i++) {
    if (items[i] == obj) {
      return i;
    }
  }
}

function generar(mb) {
  ni = 24 - r;
  let color = getColor(mb);
  console.groupCollapsed('%c  ',
    'background: ' + color + ';', mb + ' Mb');
  let s = true;
  for (var i = 1; i <= (mb * 2); i++) {
    if (s) {
      console.groupCollapsed((size - 30) / 10);
    }
    r += 1;
    console.log(r);
    draw(1, color);
    s = false;
    if (i === ni) {
      g = -(Math.PI / 2);
      size += 10;
      ni += 24;
      r = 0;
      s = true;
      console.groupEnd();
    }
  }
  console.groupEnd();
  console.groupEnd();
}

update();

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  console.clear();
  g = -(Math.PI / 2);
  size = 40;
  ni, r = 0;
  u = 300;
  list.innerHTML = '';
  ar.forEach((e,i) => {
    var li = document.createElement("li");
    var box = document.createElement("div");
    box.style.background = getColor(ar[i]);
    li.innerHTML = ar[i] + " MB";
    li.onclick = function() {
      var li = document.getElementsByTagName('li');
      rem(li[index(this, 'li')]);
      ar = remove(ar, this.className);
      update();
    }
    li.className = i;
    li.appendChild(box);
    list.appendChild(li);
  });
  for (let a in ar) {
    mb = ar[a];
    u -= mb;
    generar(mb);
  }
  uso.innerHTML =  u + " MB Disponibles de 300 MB";
  let tg = g,
    tsize = size;
  mb = '';
  for (var i = 40; i < 290; i += 10) {
    size = i;
    for (var j = 1; j < 25; j++) {
    	draw(1,(i % 20 == 0) ? '#ffffff05' : '#0000aa0d', true);
    }
  }
  ctx.beginPath();
  ctx.arc(centro, centro, 290, 0, 2 * Math.PI);
 ...