canvas-confetti
canvas-confetti copied to clipboard
Chrome freezes when SVG confetti is used
After confetti starts, Chrome just freezes with no response for a couple of seconds. then gets back to normal. There is no error message or anything. My code is like this:
var end = Date.now() + (5 * 1000);
(function frame() {
confetti({
particleCount: 1,
angle: 60,
spread: 55,
scalar: 0.6,
shapes: [pumpkin],
origin: { x: 0, y:1 },
startVelocity: 150,
colors: ['#ff912a']
});
confetti({
particleCount: 1,
angle: 120,
spread: 55,
startVelocity: 150,
origin: { x: 1, y:1},
colors: ['#ffffff']
});
// keep going until we are out of time
if (Date.now() < end) {
requestAnimationFrame(frame);
return;
}
I used below SVG shape as confetti:
$(document).ready(function(){
pumpkin = confetti.shapeFromPath({
path: 'm 0,0 c -4.344,-5.021 -9.773,-9.184 -15.967,-12.31 -0.136,-2.089 -0.289,-4.164 -0.475,-6.252 -0.933,1.653 -1.832,3.336 -2.715,5.004 -3.648,-1.157 -7.33,-2.224 -11.046,-3.186 -0.56,-2.059 -1.119,-4.118 -1.68,-6.177 -0.984,1.743 -1.951,3.517 -3.054,5.2 -4.513,0.617 -9.213,-0.014 -13.794,0.331 -1.392,-2.765 -2.8,-5.516 -4.226,-8.266 -0.678,3.171 -1.459,6.327 -2.426,9.438 -2.307,0.436 -4.581,0.978 -6.906,1.323 -1.255,-1.353 -2.46,-2.72 -3.614,-4.148 -1.222,2.299 -0.56,5.816 -3.495,7.154 -4.972,2.736 -9.587,5.952 -13.473,9.845 2.037,-10.176 9.316,-18.923 19.309,-24.124 1.273,2.33 2.529,4.645 3.853,6.93 1.136,-3.097 1.934,-6.314 3.393,-9.304 3.58,-1.714 7.941,-1.759 11.86,-2.54 1.052,2.9 2.087,5.801 3.207,8.672 1.612,-2.841 3.258,-5.666 4.988,-8.462 4.921,0.811 9.757,1.984 14.423,3.638 -0.441,2.644 -0.916,5.275 -1.374,7.921 2.528,-1.414 4.53,-4.149 7.483,-4.54 C -6.736,-18.532 -0.95,-9.529 0,0 m -41.775,4.93 c -2.036,-4.749 -3.902,-9.559 -5.786,-14.369 3.886,0.015 7.771,0.03 11.657,0.09 -1.901,4.78 -3.784,9.575 -5.871,14.279 m 5.854,7.079 c -0.271,-5.967 4.48,-11.979 11.589,-12.174 12.302,-0.526 21.735,11.212 18.834,21.508 -9.536,-4.434 -19.513,-8.598 -30.423,-9.334 m -43.064,8.673 c -3.003,-10.898 8.246,-22.696 20.972,-20.832 6.6,0.721 10.707,6.132 11.487,11.618 -11.436,0.992 -22.533,4.073 -32.459,9.214 m 26.249,33.442 c -0.729,4.554 2.325,10.311 8.043,10.746 2.867,0.541 5.446,-1.548 7.042,-3.427 2.782,-4.433 1.475,-9.694 2.018,-14.534 8.823,1.458 17.409,6.508 26.589,4.088 14.1,-4.599 22.702,-17.329 24.738,-30.06 3.207,-14.655 0.204,-30.196 -7.77,-43.287 -8.908,-14.383 -27.607,-22.259 -45.695,-22.44 -16.187,-0.556 -33.816,2.976 -45.235,13.812 -18.953,18.022 -23.042,47.135 -9.146,68.569 4.751,7.094 12.607,13.331 22.211,14.158 8.382,0.436 16.306,-2.48 24.332,-4.209 2.189,3.607 6.057,9.56 0.831,12.476 -2.375,2.239 -4.954,-0.993 -5.701,-2.811 -1.307,-3.532 2.851,-2.826 5.209,-2.39 -2.308,-1.578 -5.107,-3.111 -7.466,-0.691',
matrix: [0.35277776,0,0,-0.35277778,35.416827,22.91533]
});
});