How can I improve detail of my rendered SVG when set to object-fit: cover; in CSS?

Just created my first scene using Three.js. Very psyched. Looks okay but no matter what values I tweak and how I scale the mesh, I still end up with blurring around the edges of the mesh.

What ways can I improve detail?

https://codepen.io/James0r/pen/eYWobaR

Thanks!

You may have figured this out by now, but the blurriness came from the fact that your canvas (rendered output) was very low resolution. In the HTML, try changing the height and width values to a higher value like 1600 and the rendered output will be much more crisp.