JSFiddle - React, Tailwind, and code Playground

HTML

Mi tarta de fresa
<canvas id="canvas" width="400" height="300"></canvas>
<div id="nn"></div>

JavaScript

function bounce(progress) {
  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
    }
  }
}

function makeEaseOut(delta) {  
  return function(progress) {
    return 1 - delta(1 - progress)
  }
}

var bounceEaseOut = makeEaseOut(bounce)


function animate(opts) {
  
  var start = new Date   

  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration

    if (progress > 1) progress = 1
    
    var delta = opts.delta(progress)
    opts.step(delta)
    
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
  
}
function movex( delta, duration) {
    alert('Empezamos!!! cocinando la tarta');
  var to = 2;
  
  animate({
    delay: 10,
    duration: duration ||3000, // 1 sec by default
    delta: delta,
    step: function(delta) {
     canving(to*delta);        
    }
  })
  
}




//cojo el canvas
function canving(xx)
{
	xx=2/xx;
var canvas = document.getElementById("canvas");
canvas.style.border="1px solid red";
var ctx = canvas.getContext("2d");

//los datos
var data = [75,68,32,95,20,51];
var colors = ["#7E3817", "#C35817", "#EE9A4D", "#A0C544", "#348017", "#307D7E"];

//centro y otros
canvas.width=canvas.width;
var center = [canvas.width / 2, canvas.height / 2];
var radius = Math.min(canvas.width, canvas.height) / 2;
var lastPosition = 0, total = 0;

//pinto
for(var i in data) { total += data[i]; }

for (var i = 0; i < data.length; i++) {

ctx.fillStyle = colors[i];

ctx.beginPath();

ctx.moveTo(center[0],center[1]);

ctx.arc(center[0],center[1],radius,lastPosition,lastPosition+(Math.PI*2*(data[i]/total/xx)),false);

ctx.lineTo(center[0],center[1]);

ctx.fill();

lastPosition += Math.PI*2*(data[i]/total/xx);

}
}
movex(makeEaseOut(bounce))  ;