Ternary plot draw shape

Hi,

I am trying to draw those 4 triangle shapes in a ternary plot , with different colors, but I have never used svg paths and I am finding it difficult to find out how to draw them.

var layout = {
    //force specific plot size
    autosize: false,
    width: 700,
    height: 700,
    paper_bgcolor: '#fff',
    ternary: {
        sum: 100,
        aaxis: makeAxis('A', 0,'Yellow'),
        baxis: makeAxis('<br>B', 45,'Green'),
        caxis: makeAxis('<br>C', -45,'Red'),
        bgcolor: '#FFFFFF'
    },
    shapes: [
        {
            editable: false,
            type: 'path',
            path: 'M .1 .1 L .1 .3 L .4 .1 Z',
            fillcolor: 'rgba(44, 160, 101, 0.5)',
            line: {
                color: 'rgb(44, 160, 101)'
            },
            opacity: 0.5
        }, {
            editable: false,
            type: 'path',
            path: 'M .5 .5 L .1 .3 L .4 .1 Z',
            fillcolor: 'rgba(255, 191, 0, 0.5)',
            line: {
                color: 'rgb(255, 191, 0)'
            },
            opacity: 0.5
        }],
    annotations: [{
        //arrowside: 'end+start',
        //arrowcolor: 'rgba(26, 66, 26, 1)',
        //arrowhead: 2,
        showarrow: false,
        text: 'Ternary Plot',
        xanchor: 'left',
        yanchor: 'bottom',
        x: 0.0,
        y: 1.05,
        font: {
            family: 'Arial',
            size: 30,
            color: 'rgb(37,37,37)'
        },
    }],
    paper_bgcolor: '#FFFFFF',
};

Any points in the right direction will be great. Thanks

Almost there, I had to ‘hack’ the value for the y axis…is there a better way of doing this?

    shapes: [
        {
            //red
            editable: false,
            type: 'path',
            path: 'M .5 .05 L 1 .05 L .75 .5 Z',
            fillcolor: 'rgba(255, 0, 0, 0.5)',
            line: {
                color: 'rgb(255, 0, 0)'
            },
            opacity: 0.5
        },
        {
            //green
            editable: false,
            type: 'path',
            path: 'M .0 .05 L .50 .05 L .25 .5 Z',
            fillcolor: 'rgba(0,255,0,0.5)',
            line: {
                color: 'rgb(0,255,0)'
            },
            opacity: 0.5
        },
        {
            //gray
            editable: false,
            type: 'path',
            path: 'M .5 .05 L .75 .5 L .25 .5 Z',
            fillcolor: 'rgba(169, 169, 169, 0.5)',
            line: {
                color: 'rgb(169, 169, 169)'
            },
            opacity: 0.5
        },
        {
            editable: false,
            type: 'path',
            path: 'M .5 .95 L .75 .5 L .25 .5 Z',
            fillcolor: 'rgba(255,0,255,0.5)',
            line: {
                color: 'rgb(255,0,255)'
            },
            opacity: 0.5
        }
    ],