UI Image looks terrible around the edges

Simple problem with an apparently stupidly complex solution.

I have a circle image under a canvas. The canvas is already scaling with screen size, and set to pixel perfect. The image itself is imported correctly and yet the edges of it look pixelated and blurry, as opposed to something like vector graphics which have hard edges, Im creating a circle swipe scene transition so the circle is about 2500x2500 pixels.

Do I simply have to create a circle as a vector graphic instead?
If so what software is good for that, without selling an arm and a leg to simply draw a white goddamn circle?

There is a vector graphics package you can install to enable support of SVG files.

if you need a svg of a circle you don’t need a vector graphics editor, necessarily, as you can ask ChatGPT for one:


I need a SVG of a circle. Can you write me one?"

Certainly! Here’s a simple SVG code for a circle:

circle.svg

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="transparent" />
</svg>

You can adjust the width , height , cx (center x-coordinate), cy (center y-coordinate), and r (radius) attributes to customize the size and position of the circle. You can also change the stroke color, stroke-width for the border, and fill color for the circle’s interior as needed.