# Conical Gradient Paint

**URL:** <https://forum.inductiveautomation.com/t/conical-gradient-paint/85107>\
**Category:** Module Development\
**Tags:** vision\
**Created:** [February 1, 2024, 4:37pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107 "2024-02-01T16:37:55Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 6, 2024, 9:34pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107/21 "2024-02-06T21:34:20Z")

</div>

Aaaaagggh! It's not an SVG. It's just a Perspective label component with corners radiused at 50% and a conic gradient.

> [@Conical Gradient Paint](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107/3):
>
> Use CSS conic-gradient. Here it's applied to a label with border radius set to 50% all around. Copy and paste the following into a coordinate view. 
> 
> > **Conic gradient label component.**
> >
> > [ { "type": "ia.display.label", "version": 0, "props": { "style": { "borderStyle": "solid", "borderWidth": 1, "borderColor": "#493F3F", "borde…

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [February 8, 2024, 8:14pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107/22 "2024-02-08T20:14:25Z")

</div>

My mistake. I glanced at it pretty quickly as I was heading out into the field.

Regardless, That would be an easy problem to solve with an SVG which is a lot easier to follow (support done by others down the road). That's how I would do it.

---

<div class="post-metadata">

**Author:** ![Mathias\_Melling](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mathias_melling/32/67682_2.png) [@Mathias\_Melling](https://forum.inductiveautomation.com/u/Mathias_Melling)\
**Post date:** [February 12, 2024, 6:55pm UTC](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107/23 "2024-02-12T18:55:46Z")

</div>

I ended up using the `BufferedImage` idea. Performance on painting the cone has increased a lot by doing that, even with using the `ConicalGradientPaint`. I also didn't have to do any scaling to get it to show up properly.

```auto
if (componentResized) {
  ConicalGradientPaint topConePaint = new ConicalGradientPaint( false,
                                                          topConeGradientCenter,
                                                          topConeGradientOffset,
                                                          topConeGradientFractions,
                                                          new Color[]{Color.BLACK,binColorDark,binColorLight,binColorDarkish,Color.BLACK});
  
  topConeBufferedImage = new BufferedImage(topCone.getBounds().width,topCone.getBounds().height,BufferedImage.TYPE_INT_ARGB);
  Graphics2D gTopCone = topConeBufferedImage.createGraphics();
  gTopCone.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
  gTopCone.setPaint(topConePaint);
  gTopCone.fill(topCone);
}

g.drawImage(topConeBufferedImage,0,0,null);

```

Thanks again for everyone's input.

[Previous page](https://forum.inductiveautomation.com/t/conical-gradient-paint/85107.md?page=1)