Need to achieve smoothness in svg path element.
This is an example path out of my projcet:
let svg = document.querySelector("#mouse-trail");
let lastMousePoints = [];
let maxVertices = 20;
let buffer = [];
let bufferSize = 20;
svg.addEventListener("mousemove", function(e) {
addPoint(e);
});
function addPoint(e) {
let pt = {
x: (e.clientX),
y: (e.clientY)
};
buffer.push(pt);
if (buffer.length > bufferSize) {
pt = getAveragePoint(buffer, bufferSize);
lastMousePoints.push(pt);
buffer.shift();
}
if (lastMousePoints.length > maxVertices) {
lastMousePoints.shift();
}
let pointsString = "M ";
for (let i = 0; i < lastMousePoints.length; i++) {
pointsString += lastMousePoints[i].x + " " + lastMousePoints[i].y + " ";
}
if(lastMousePoints.length>0){
circle.setAttribute("cx",lastMousePoints[lastMousePoints.length-1].x);
circle.setAttribute("cy",lastMousePoints[lastMousePoints.length-1].y);
}
path.setAttribute("d", pointsString.trim());
}
function getAveragePoint(buffer, bufferSize) {
let len = buffer.length;
let totalX = 0, totalY = 0;
for (let i = 0; i < len; i++) {
totalX += buffer[i].x;
totalY += buffer[i].y;
}
return { x: totalX / len, y: totalY / len };
}
setInterval(function(){
lastMousePoints.shift();
let pointsString = "M ";
for (let i = 0; i < lastMousePoints.length; i++) {
pointsString += lastMousePoints[i].x + " " + lastMousePoints[i].y + " ";
}
if(pointsString != "M "){
path.setAttribute("d", pointsString.trim());
}
},15)
I tried this but in fast movements I still see sharp cuts. I don’t knwo what I’, missing.
reference https://jsfiddle.net/Gowtham0415/L510mqwp/4/
Much thanks in advance, G