Question 170404 in Html Question posted in
Some basic documentation can be found here.

Can calc() CSS add two variables?

I’m trying to create a circular progress bar where the variables can be controlled with an inline style. The progress bar will have two different bars that should be added together but are still different colors.

These variables work on their own:

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
  
  --laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc(625px - (625px * var(--sapercent)) / 34);
}

.card svg circle.la { 
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--laresult);
  stroke: blue; 
}

.card svg circle.sa {
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--saresult); 
  stroke: pink; 
}

But I don’t want the lines to overlap, I want them to appear like they’re stacked. So, For the second progress bar, I’d like to add the two together. However, it breaks when I try to add them:

.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 10;
  stroke-linecap: round;
  
  --laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc(625px - (625px * var(--sapercent)) / 34);
}

.card svg circle.la { 
  stroke-dasharray: 625px;
  stroke-dashoffset: var(--laresult);
  stroke: blue; 
}

.card svg circle.sa {
  stroke-dasharray: 625px;
  stroke-dashoffset: calc(var(--saresult) + var(--laresult)); 
  stroke: pink; 
}

Codepen: https://codepen.io/camilapaleno/pen/WNaggpb

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured this out. There were two issues:

    Like Temani Afif said, adding the two variables was incorrect anyways. I needed a new formula.

      --laresult: calc(625px - (625px * var(--lapercent)) / 34);
  --saresult: calc((625px - (625px * (var(--sapercent) + var(--lapercent))) / 34));

    The second issue was that progress bar didn't have access to the first variable since I only declared it inline in the first progress bar. Declaring both in both progress bars worked:

    <circle class="sa" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>
<circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12; --sapercent: 5"></circle>

  2. 0

    Seeing the HTML in the codepen I see the variables are defined in each element:

    <svg>
      <circle cx="105" cy="105" r="100"></circle>
      <circle class="la" cx="105" cy="105" r="100" style="--lapercent: 12"></circle>
      <circle class="sa" cx="105" cy="105" r="100" style="--sapercent: 5"></circle>
</svg>

    The problem I think is that the element that needs both variables has no way to "see" the value of the other variable because it is outside the scope (--laresult can’t be calculated because --lapercent is not defined). In the inspector, it is visible that it is not defined:

    enter image description here

    If you define the variables in a parent element this way…

    <svg style="--lapercent: 12; --sapercent: 5">
      <circle cx="105" cy="105" r="100"></circle>
      <circle class="la" cx="105" cy="105" r="100" ></circle>
      <circle class="sa" cx="105" cy="105" r="100"></circle>
</svg>

    … the variable appears as defined:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search