Как нарисовать форму кленового листа с помощью CSS Houdini? ⇐ CSS

[Anonymous]

Я хочу нарисовать форму кленового листа, чтобы украсить свой веб-сайт. Я решил использовать для этого программу рисования css houdini, но на самом деле у меня возникли проблемы с этим. Самое близкое, что я нашел, было с этим:

Код: Выделить всё

paint(ctx, size, properties) {
const leafColor = properties.get('--colorLeaf').toString().trim() || '#d32f2f';
ctx.fillStyle = leafColor;

ctx.beginPath();

// Start at the bottom center near the stem
ctx.moveTo(size.width * 0.5, size.height * 0.95);

// Lower left edge, for sharper points spread out more horizontally
ctx.bezierCurveTo(size.width * 0.3, size.height * 0.85, size.width * 0.2, size.height * 0.6, size.width * 0.3, size.height * 0.5);

// Left side lobe, creating a sharp outward point
ctx.bezierCurveTo(size.width * 0.15, size.height * 0.35, size.width * 0.15, size.height * 0.25, size.width * 0.3, size.height * 0.2);

// Upper left edge with a sharper point
ctx.bezierCurveTo(size.width * 0.35, size.height * 0.1, size.width * 0.4, size.height * 0.05, size.width * 0.5, size.height * 0.15);

// Top middle peak
ctx.bezierCurveTo(size.width * 0.6, size.height * 0.05, size.width * 0.65, size.height * 0.1, size.width * 0.7, size.height * 0.2);

// Upper right lobe with a pointed tip
ctx.bezierCurveTo(size.width * 0.85, size.height * 0.25, size.width * 0.85, size.height * 0.35, size.width * 0.7, size.height * 0.5);

// Lower right edge, more horizontally spread for sharpness
ctx.bezierCurveTo(size.width * 0.8, size.height * 0.6, size.width * 0.7, size.height * 0.85, size.width * 0.5, size.height * 0.95);

ctx.closePath();
ctx.fill();
}

Мне кажется, если бы оно стало шире, оно было бы довольно близко, есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/791 ... ss-houdini