Figma SVGs and Property Editor

Ignition
6

There is actually a full explanation about how to do this (completely within Ignition no third party software needed) here:

However, for the TL:DR (not really much of one really) :rofl:

In that post, I use a script transform, which works well, but the same can be done with an expression (all be it a little ugly). The advantage is, an expression will be more performant.

(I don't have you're full path, so this is the path from my previous post)

if({this.custom.value} = 100,
    //True Return default if value = 100
    "M0.7963 165.436 A150 150 0 1 1 299.2037 165.436 A10 10 0 1 1 " +
    "279.2567 164.4069 A130 130 0 1 0 20.7433 164.4039 A10 10 0 1 1 " +
    "0.7963 165.436",
    //False Return check if value = 0
    if( {this.custom.value} = 0,
        //True Return default if value = 0
        "M0.7963 165.436 A10 10 0 1 1 20.7433 164.4039 A10 10 0 1 1 0.7963 165.436",
        //False Return use calculated outside and inside stops
        toStr( 150 - 150 * cos(toRadians((200 * {this.custom.value} / 100) - 15))) + " " +
        toStr( 150 - 150 * sin(toRadians((200 * {this.custom.value} / 100) - 15))) + " A10 10 0 1 1 " +
        toStr( 150 - 130 * cos(toRadians((200 * {this.custom.value} / 100) - 15))) + " " +
        toStr( 150 - 130 * sin(toRadians((200 * {this.custom.value} / 100) - 15))) + " A130 130 0 " +
        if ( {this.custom.value} >= 95, "1 0 ", "0 0") +
        "20.7433 164.4039 A10 10 0 1 1 0.7963 165.436"
        )
    )

Honestly, that can be cleaned up significantly if you move the calculations out to properties of their own. For instance:

posRadians: toRadians((200 * {this.custom.value} / 100 ) - 15)
outsideStopX: 150 - 150 * cos({this.custom.posRadians})
outsideStopY: 150 - 150 * sin({this.custom.posRadians})
insideStopX: 150 - 130 * cos({this.custom.posRadians})
insideStopY: 150 - 130 * sin({this.custom.posRadians})

Then the main expression looks like:

if({this.custom.value} = 100,
    //True Return default if value = 100
    "M0.7963 165.436 A150 150 0 1 1 299.2037 165.436 A10 10 0 1 1 " +
    "279.2567 164.4069 A130 130 0 1 0 20.7433 164.4039 A10 10 0 1 1 " +
    "0.7963 165.436",
    //False Return check if value = 0
    if( {this.custom.value} = 0,
        //True Return default if value = 0
        "M0.7963 165.436 A10 10 0 1 1 20.7433 164.4039 A10 10 0 1 1 0.7963 165.436",
        //False Return use calculated outside and inside stops
        toStr({this.custom.outsideStopX}) + " " +
        toStr({this.custom.outsideStopY}) + " A10 10 0 1 1 " +
        toStr({this.custom.insideStopX}) + " " +
        toStr({this.custom.insideStopY}) + " A130 130 0 " +
        if ( {this.custom.value} >= 95, "1 0 ", "0 0") +
        "20.7433 164.4039 A10 10 0 1 1 0.7963 165.436"
        )
    )

Note that you need to determine which direction to "close" the final arc dependent upon the value. In my case the break over threshold was 95% yours may be different.

6 Likes