[Malleys]

я изучал эту документацию, и использую композицию для того что бы сделать форму треугольника, использую при этом операцию "source-out", но я получаю просто обрезанные края, хотя по ссылке что Вы прислали, для "source-out" как раз иллюстрируется вариант такой как мне нужен, с "плавными" краями.

Так у вас вас всё правильно работает! Какой треугольник вы нарисовали, так оно и вырезает! Если вы хотите, чтобы были плавные края, то нужно начать с треугольника с плавными краями, который, например, можно сделать при помощи фильтра. Ещё поменял, source-out на source-in, т. е. не что исключать, а что брать.

https://jsfiddle.net/yab0st7q/

Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает

А где вы там вычитали, что должен быть плавный переход? Кстати, если у исходного изображения инвертировать альфа-канал, то source-out можно поменять на souce-in.

Я не совсем понимаю почему по ссылке именно так изобразили

Никто ничего не изображал, это живые примеры, которые можно редактировать, например, в том же jsfiddle!

не какого "плавного" перехода он не делает

Это способы соединить две картинки вместе. Ваш ожидаемый «"плавный" переход» зависит от исходных картинок!

Там каждый пример идёт так: 🌉🌫🌁, их надо воспринимать так: 🌉+🌫=🌁