Create bash script to generate 101 svgs

Question

I am generating a progress circle with 56% as shown below as an example.

I am trying to create a bash script to generate 101 progress circle svgs ranging from 0 till 100. That is from 0% to 100% filled circles.

But it seems to not work, the progress bar for calc does not update. What is the problem here?

.content{
  --val: 0;
}

svg {
  transform: rotate(-90deg);
}

.percent {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--val));
}

.val {
  --val: 0;
}

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle style="--val: 56" class="percent val" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>

PROGRESS="0"

while [ $PROGRESS -lt 100 ]
do
    cat <<EOS > Image/progress-circle-$PROGRESS.svg
    <svg width="120" height="120" viewBox="0 0 120 120" style="$PROGRESS: 0; transform: rotate(-90deg);">
        <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
        <circle style="stroke-dasharray: 100; stroke-dashoffset: calc(100 - $PROGRESS)" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
    </svg>
EOS
    PROGRESS=$[$PROGRESS+1]
done

Please see this generated image:

Hi @Hamdi - `style="0: 0;` [that's what you get putting $PROGRESS when it's 0 ... is that really what you intended?? You mentioned a progress bar for calc - what is that - there's nothing in you question showing a progress bar?? Please provide everything we need to reproduce your problem. — Mr R, Apr 08 '21 at 11:35
`PROGRESS=$[$PROGRESS+1]` Where did you even find out about that ancient, decades obsolete syntax? — Shawn, Apr 08 '21 at 11:40
@Shawn from one of the answers I was looking for. But is that affecting it? — Hamdi, Apr 08 '21 at 11:41
Anything that uses that is highly suspect as to its quality. See https://stackoverflow.com/questions/2415724/bash-arithmetic-expression-vs-arithmetic-expression — Shawn, Apr 08 '21 at 11:48
@Hamdi - I get 100 images produced - what is the problem?? do you really want this -`< — Mr R, Apr 08 '21 at 11:55
Anyways, I'd start by running your script through https://shellcheck.net and fixing anything it points out - always a good first step for debugging shell scripts. — Shawn, Apr 08 '21 at 11:57
(i'd also do it with a XML-aware tool instead of just shell; maybe XSLT?) — Shawn, Apr 08 '21 at 12:01

Create bash script to generate 101 svgs

0 Answers0