Responsive

Code

const initialWidth = 800;
const responsive = new headbreaker.Canvas('responsive-canvas', {
  width: 800, height: 650,
  pieceSize: 100, proximity: 20,
  borderFill: 10, strokeWidth: 1.5,
  lineSoftness: 0.18,
});

responsive.autogenerate({
  horizontalPiecesCount: 3,
  verticalPiecesCount: 3,
  metadata: [
    {color: '#6F04C7'}, {color: '#0498D1'}, {color: '#16BA0D'},
    {color: '#000000'}, {color: '#6F04C7'}, {color: '#0498D1'},
    {color: '#16BA0D'}, {color: '#000000'}, {color: '#6F04C7'},
  ]
});
responsive.draw();

['resize', 'DOMContentLoaded'].forEach((event) => {
  window.addEventListener(event, () => {
    var container = document.getElementById('responsive-canvas');
    responsive.resize(container.offsetWidth, container.scrollHeight);
    responsive.scale(container.offsetWidth / initialWidth);
    responsive.redraw();
  });
});

Demo

ShuffleShuffle GridShuffle ColumnsSolve