SVG - svg-circle-progress-generator

[cikguhelmi]

hi there .. can anyone help me how to make this code from this site

https://nikitahl.github.io/svg-circle-progress-generator/


i try  to adding code but it did not  work

CONCATENATE(
"data&colon;image/svg+xml;utf8,<svg width=""113"" height=""113"" viewBox=""-14.125 -14.125 141.25 141.25"" version=""1.1"" xmlns=""http://www.w3.org/2000/svg"" style=""transform:rotate(-90deg)"">",
"<circle r=""46.5"" cx=""56.5"" cy=""56.5"" fill=""transparent"" stroke=""#e0e0e0"" stroke-width=""5"" stroke-dasharray=""292.02000000000004px"" stroke-dashoffset=""0""></circle>",
"<circle r=""46.5"" cx=""56.5"" cy=""56.5"" stroke=""#76e5b1"" stroke-width=""13"" stroke-linecap=""round"" stroke-dashoffset=""58px"" fill=""transparent"" stroke-dasharray=""292.02000000000004px""></circle>",
"<text x=""29px"" y=""73px"" fill=""#6bdba7"" font-size=""52px"" font-weight=""bold"" style=""transform:rotate(90deg) translate(0px, -109px)"">", [%], "</text>",
"</svg>"
)

anyone can guide me..  Thanks

[Denny774]

Hey man,

try this:

CONCATENATE(
"data:image/svg+xml;utf8,",
SUBSTITUTE(
  '<svg width="200" height="200" viewBox="-25 -25 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg)">
    <circle r="90" cx="100" cy="100" fill="transparent" stroke="#e0e0e0" stroke-width="16px" stroke-dasharray="565.48px" stroke-dashoffset="0"></circle>
    <circle r="90" cx="100" cy="100" stroke="#76e5b1" stroke-width="16px" stroke-linecap="round" stroke-dashoffset="118.692px" fill="transparent" stroke-dasharray="565.48px"></circle>
    <text x="71px" y="115px" fill="#6bdba7" font-size="52px" font-weight="bold" style="transform:rotate(90deg) translate(0px, -196px)">' & [%] & '</text>
  </svg>'
,"#","%23")
)

[cikguhelmi]

still did not work man.. 

[Denny774]

Hey,

change this:


Cheers

[cikguhelmi · Accepted solution]

Thanks for guide me..  now i understand a little bit about svg

[Surdusvacca]

Have you seen this?
https://www.youtube.com/watch?v=6oz0dDUs_hs

He is demonstrating with % usage