Eliminating aliasing from an SVG circular element

Question

Eliminating aliasing from an SVG circular element

I am currently working on creating an animated SVG pie chart. The setup involves two SVG elements, where the first element is given a border-radius of 50%, and the second element is a circle that is filled up to a specific value. This results in one circle appearing above another circle, both having identical dimensions.

However, there seems to be some sort of SVG aliasing issue that is proving difficult to eliminate. This aliasing is quite noticeable on the top, left, bottom, and right "corners" of the circle, particularly when viewed on Google Chrome.

Below is the snippet of the HTML code:

<figure id="pie" data-percentage="60">
  <div class="receiver"></div>
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/>
  </svg>
</figure>

You can also refer to my codepen link for a more detailed insight into the problem. I have explored several solutions, including utilizing the shape-rendering attribute in SVG, but unfortunately, the issue persists.

Additionally, here is a screenshot showcasing the aliasing problem, although it may not be as pronounced as displayed in the codepen (at least from my perspective):

https://i.sstatic.net/iX9Aw.png

javascript jquery html css svg

Answer 1

Answer №1

Creating a Smooth SVG Percentage Circle

In the past, I faced a similar issue detailed here: Resolution for Pixelated Circle Edge. This problem arises when adjusting an element with border-radius.
Instead of opting for the solution provided in the linked answer, consider using/modifying only SVG for both better performance and visual appeal.

See below for an example:

var circ = document.getElementsByClassName("pie2");
var text = document.getElementsByClassName("text");
text = text[0];
circ = circ[0];
var maxvalue = 320;
var value = maxvalue;
var stop = false;

function increase() {
  if (value > 0) {
    circ.style.strokeDashoffset = value--;
    text.textContent = Math.abs(Math.floor((value / maxvalue) * 100) - 100) + "%";
  } else {
    clearInterval(intervalid);
  }
}

var intervalid = setInterval(increase, 25);

.pie {
  fill: none;
  stroke: #222;
  stroke-width: 99;
}
.pie2 {
  fill: none;
  stroke: orange;
  stroke-width: 100;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.text {
  font-family: Arial;
  font-weight: bold;
  font-size: 2em;
}

<figure id="pie" data-percentage="90">
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" />
    <circle r="50" cx="100" cy="100" class="pie2" />
    <text class="text" x="80" y="110">0%</text>
  </svg>
</figure>

Answer 2

Creating a Smooth SVG Percentage Circle

In the past, I faced a similar issue detailed here: Resolution for Pixelated Circle Edge. This problem arises when adjusting an element with border-radius.
Instead of opting for the solution provided in the linked answer, consider using/modifying only SVG for both better performance and visual appeal.

See below for an example:

var circ = document.getElementsByClassName("pie2");
var text = document.getElementsByClassName("text");
text = text[0];
circ = circ[0];
var maxvalue = 320;
var value = maxvalue;
var stop = false;

function increase() {
  if (value > 0) {
    circ.style.strokeDashoffset = value--;
    text.textContent = Math.abs(Math.floor((value / maxvalue) * 100) - 100) + "%";
  } else {
    clearInterval(intervalid);
  }
}

var intervalid = setInterval(increase, 25);

.pie {
  fill: none;
  stroke: #222;
  stroke-width: 99;
}
.pie2 {
  fill: none;
  stroke: orange;
  stroke-width: 100;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.text {
  font-family: Arial;
  font-weight: bold;
  font-size: 2em;
}

<figure id="pie" data-percentage="90">
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" />
    <circle r="50" cx="100" cy="100" class="pie2" />
    <text class="text" x="80" y="110">0%</text>
  </svg>
</figure>

Eliminating aliasing from an SVG circular element

Answer №1

Creating a Smooth SVG Percentage Circle

Similar questions

The issue persists where the state value fails to update even after receiving a new value from a child component

Having trouble launching the SpeechRecognition feature on Ionic Cordova for Macdonst?

What is the best approach to establish multiple global prefixes in a NestJS project?

The issue of `window.scrollTo(0, 240)` not functioning properly when used in combination with

Using Angular 6 to import GeoJSON into a Leaflet map

Retrieving arrays in subdocuments with MongoDB queries

Implementing TypeScript with styled components using the 'as' prop

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

Having difficulty extracting the values of td elements from a table in HTML string using PHP's XPath parser

Issue with React occurring when attempting to delete an input component

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

No data being fetched by Ajax

Angular Material List Component with Material Table

Customizing Background Color in React Bootstrap Table Based on Value

Unable to select selectbox in the bottom section of Safari browser

How to use jQuery to style tables with borders

The 'SVGResize' or 'onresize' property is not available on the 'SVGProps<SVGSVGElement>' type

Is there anyone who can provide a comprehensive explanation for what is going on here?

Comparing locale strings in Javascript using the valueOf method of the String prototype