random svg path preview

[moolight-seashell]

hi,

i have this code :

export component Graph {
    in property <[{values: [float],background: color, name: string}]> graphes: 
        [{values: [0.5,0.75,0.25,0.1,0.4,0.5,0.9,0.25,0.1],background: #2bc2ae71, name: "temperature"}];

    for graphe in graphes.length : Rectangle {
        for value in graphes[graphe].values.length - 1:
        Path {
            width: parent.width;
            height: parent.height;
            fill: graphes[graphe].background;
            viewbox-width: parent.width/1px;
            viewbox-height: parent.height/1px;

            MoveTo {
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : parent.viewbox-height;
            }
            LineTo{
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value] * parent.viewbox-height;
            }
            CubicTo{
                control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value + 1] * parent.viewbox-height;
            }
            LineTo{
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : parent.viewbox-height;
            }
            Close {
            }
        }

        for value in graphes[graphe].values.length - 1:
        Path {
            width: parent.width;
            height: parent.height;
            stroke: blue;
            stroke-width: 5px;
            viewbox-width: (parent.width - self.stroke-width)/1px;
            viewbox-height: (parent.height - self.stroke-width)/1px;

            
            MoveTo{
                x : value * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value] * parent.viewbox-height;
            }
            CubicTo{
                control-1-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-1-y : graphes[graphe].values[value] * parent.viewbox-height;
                control-2-x : (value+0.5) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                control-2-y : graphes[graphe].values[value + 1] * parent.viewbox-height;
                x : (value+1) * (parent.viewbox-width / (graphes[graphe].values.length - 1));
                y : graphes[graphe].values[value + 1] * parent.viewbox-height;
            }
        }
    }

somtime i have a good preview like this :

but very often i have these preview :