Custom Marker Functions Demo

// Define custom marker functions
function heartMarker(r) {
    var x = r * 0.6, y = r * 0.8;
    return 'M0,' + (-y/2) + 
           'C' + (-x) + ',' + (-y) + ' ' + (-x*2) + ',' + (-y/3) + ' ' + (-x*2) + ',0' +
           'C' + (-x*2) + ',' + (y/2) + ' 0,' + (y) + ' 0,' + (y*1.5) +
           'C0,' + (y) + ' ' + (x*2) + ',' + (y/2) + ' ' + (x*2) + ',0' +
           'C' + (x*2) + ',' + (-y/3) + ' ' + (x) + ',' + (-y) + ' 0,' + (-y/2) + 'Z';
}

function star5Marker(r) {
    var points = 5, path = 'M';
    for (var i = 0; i < points * 2; i++) {
        var radius = i % 2 === 0 ? r : r * 0.4;
        var ang = (i * Math.PI) / points - Math.PI / 2;
        path += (i === 0 ? '' : 'L') + 
                (radius * Math.cos(ang)).toFixed(2) + ',' + 
                (radius * Math.sin(ang)).toFixed(2);
    }
    return path + 'Z';
}

// Use them directly in a plot
Plotly.newPlot('plot1', [{
    x: [1, 2, 3, 4, 5],
    y: [2, 3, 4, 3, 2],
    mode: 'markers+lines',
    marker: {
        symbol: [heartMarker, star5Marker, 'circle', star5Marker, heartMarker],
        size: 20,
        color: ['red', 'gold', 'blue', 'orange', 'crimson']
    }
}]);