I have the following CSS:
body::after {
position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1;
content: url(./img/cursor_page.svg);
}
body {
cursor: url(./img/cursor_page.svg) 32 32, auto;
}
and a corresponding SVG file in “./img” folder:
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="9" r="6" fill="#f0c892"/>
<circle cx="26" cy="9" r="6" fill="#f0c892"/>
<circle cx="16" cy="26" r="6" fill="#f0c892"/>
</svg>
the cursor image works, but the circles’ edges are dark, they don’t blend with the background properly, how do I fix this? I checked in FF/Chrome/Brave (Win10) they all look the same.
Not sure how to make a screenshot that contains the cursor, also not sure how to use an external file here, so below is pure JS code that creates am image from SVG and applies it as a cursor. The result is the same, dark fringes around the circles. I guess, ultimately, it’s a rasterized PNG transparency problem.
// Create SVG
const svgString = `
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="9" r="6" fill="#f0c892"/>
<circle cx="26" cy="9" r="6" fill="#f0c892"/>
<circle cx="16" cy="26" r="6" fill="#f0c892"/>
</svg>`;
// Convert SVG to data URL
const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(svgString);
// Create an Image object
const img = new Image();
img.onload = function() {
// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
// Draw the image on the canvas
ctx.drawImage(img, 0, 0);
// Convert canvas to PNG data URL
const pngDataUrl = canvas.toDataURL('image/png');
// Set the cursor for the body element
document.body.style.cursor = `url(${pngDataUrl}) 16 16, auto`;
};
// Set the source of the image to the SVG data URL
img.src = svgDataUrl;
body {
height: 100vh;
border: solid 1px red;
}
<body></body>