Create Your png image for the background
.
Create another svg image for the Gauge 900 * 900
For the background add a new image to the screen, in the image property add:
Add a second image to the screen:
add the following to the image property:
"data:image/svg+xml," &EncodeUrl(" <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 900 900' style='enable-background:new 0 0 900 900;' xml:space='preserve'> <style type='text/css'> .st0{fill:#4D4D4D;} </style> <path class='st0' d='M427.12,403.43L13.98,450l413.14,46.57c7.16,3.67,15.26,5.76,23.86,5.76c28.9,0,52.33-23.43,52.33-52.33 s-23.43-52.33-52.33-52.33C442.38,397.67,434.27,399.76,427.12,403.43z M474.98,450.27c0,13.41-10.73,24.27-23.98,24.27 c-13.24,0-23.98-10.87-23.98-24.27c0-13.41,10.73-24.27,23.98-24.27C464.24,426,474.98,436.87,474.98,450.27z'/> <animateTransform attributeName='transform' type='rotate' from='0' to='"& txt_procentage.Text &"' begin='0s' dur='3s' repeatCount='1' fill='freeze' /> </svg> ")
To make it dynamic add a text box “txt_procentage”
You can make it with no animation
"data:image/svg+xml," &EncodeUrl(" <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 900 900' style='enable-background:new 0 0 900 900;' xml:space='preserve'> <style type='text/css'> .st0{fill:#4D4D4D; transform-origin:center; transform: rotate(" & txt_procentage_1.Text &"deg); } </style> <path class='st0' d='M427.12,403.43L13.98,450l413.14,46.57c7.16,3.67,15.26,5.76,23.86,5.76c28.9,0,52.33-23.43,52.33-52.33 s-23.43-52.33-52.33-52.33C442.38,397.67,434.27,399.76,427.12,403.43z M474.98,450.27c0,13.41-10.73,24.27-23.98,24.27 c-13.24,0-23.98-10.87-23.98-24.27c0-13.41,10.73-24.27,23.98-24.27C464.24,426,474.98,436.87,474.98,450.27z'/> </svg> ")