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:

[code lang=”HTML”] "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
[code] "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>

")
[/code]