{"version":"1.0","type":"rich","title":"Partial Fill Icon","description":"This example shows a single tree icon rendered as an SVG path, where a linear gradient fills 40% of the shape with green and the remaining portion with a muted gray-green. The fill amount is passed as a prop to a React component, with the gradient stops using that value to create the partial-fill effect. The code uses React 16.13.1 to render the SVG, and the gradient is defined with `<linearGradient>` and `<stop>` elements, using `gradientUnits=\"userSpaceOnUse\"` to position the fill relative to the icon’s bounding box. The static fill amount is hard-coded to 0.4 in the `App` component.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/7538edd2a96d4a62a726ab3a404ca70a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}