In TouchGFX, how to draw a curve with gradient color using program

[Zhicong]

In TouchGFX(4.22.0)，I want to implement a curve similar to the following image

Actually it is an SVG image, is it possible to change its path and gradient color using a program in TouchGFX? What I mean is not using ‘SVG Image’, but simply using a programmatic approach(the path may not be so complicated). 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" baseProfile="basic" 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 784 350.2"
	 xml:space="preserve">
<g>
	<g clip-path="url(#SVGID_2_)">
		<defs>
			<rect id="SVGID_7_" x="4.7" y="0" width="1280.2" height="1280.2"/>
		</defs>
		<clipPath id="SVGID_8_">
			<use xlink:href="#SVGID_7_"  overflow="visible"/>
		</clipPath>
			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="1.0838" y1="1280.9688" x2="2.0838" y2="1280.9688" gradientTransform="matrix(1.898840e-14 -310.104 -310.104 -1.898840e-14 397627.5938 676.423)">
			<stop  offset="0" style="stop-color:#F7931E"/>
			<stop  offset="0.9909" style="stop-color:#E50A49"/>
			<stop  offset="1" style="stop-color:#E50A49"/>
		</linearGradient>
		<path clip-path="url(#SVGID_8_)" fill="url(#SVGID_9_)" d="M34.3,256.9c1.3,0,2.6,0.1,3.9,0.1c70.7,0.1,106.6-53,143.5-109.9
			C218,91,255,30.9,329.9,30.7c10.6,0,21.9,1.2,34,3.8c63.3,14.4,91.4,90.1,114.6,159.7c11.5,35,21.5,69,32.6,93.7
			c11.2,25.1,23.3,38.4,35.4,37.9c2,0,4-0.3,6.3-0.9c25.1-6.2,42.9-44.1,69-82.7c26.1-38.2,63.6-76.5,132.2-77.3
			c3.9-0.1,7,3,7.1,6.9c0.1,3.9-3,7-6.9,7.1c-63,1.1-95.1,34.3-120.8,71.2c-25.8,36.6-41.8,77.6-76.7,88.2c-3.4,1-6.8,1.4-10.1,1.4
			c-22.6-0.5-36.4-20.5-48.1-46.2c-17.6-39.1-31.4-96.7-51.7-146.5c-20.2-50.1-46.5-90.8-85.7-98.9c-11.2-2.4-21.5-3.5-31-3.5
			c-65.7-0.2-99.6,52.8-136.5,109.9c-36.4,56.2-76,116.2-155.3,116.3c-1.4,0-2.8,0-4.2-0.1c-3.9-0.1-6.9-3.3-6.8-7.2
			C27.2,259.8,30.4,256.8,34.3,256.9L34.3,256.9z"/>
	</g>
</g>
</svg>

[Zhicong]

I noticed that the 'VectorRenderer' class seems to be able to do this. Are there any examples of it that I can refer to?

[LouisB · Accepted solution]

Hello @Zhicong,

Unfortunately it's not possible to edit a vector programmatically in TouchGFX. The SVG is converted to a *.cpp file that is then read by the TouchGFX application via VectorRenderer. You have more informations here : SVG | TouchGFX Documentation.

Regards,