Как использовать растровое изображение в html-маске?

Question

[konstantinst13]

Всем доброго времени суток!

Вот в этой статье про html-маски написано, что в них можно использовать не только svg, но и растровые изображения:
css.yoksel.ru/svg-masks

Мне нужно использовать html-маски, чтобы обрезать фотографии по нужным фигурам. В фотошопе обрезать фотографии по нужным фигурам я не могу, т.к. в будущем будет крутящаяся анимация и надо будет, чтобы фигура вращалась, а фото стояло на месте. Анимировать буду маску, а не картинку.

Я с svg не очень дружу. Я пытался вставлять path из svg в mask, но это сработало правильно только с rect.

Мне нужно добиться вот такого результата (сверху фотографии и как они должны быть обрезаны масками, снизу - формы нужных масок, по которым обрезать фотки).



Это для сайта https://www.umark.it/

Должности и фото увеличиваются, если навести курсор на фото или должность.

Вот такой код я использую для обрезки фото в виде ромба:
(Это для менеджера проекта)

<div data-id="project-manager" class="animated-mask animated-mask_worker-1">
                    <svg class="animated-mask__svg" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
                        <mask id="worker-1-mask">
                            <rect class="worker-1-mask__path" fill="#fff" height="1" width="1" style="transform: scale(0.65) rotate(126.65deg) translateZ(0px); transform-origin: 0.5px 0.5px;"></rect>
                        </mask>
                        <image class="animated-mask__img animated-mask__img_default opacity_1" height="1" href="assets/img/header/workers/worker-1/photo__4x.png" mask="url(#worker-1-mask)" width="1"></image>
                        <image class="animated-mask__img animated-mask__img_hover" id="active-square" height="1" href="assets/img/header/workers/worker-1/hover__4x.png" mask="url(#worker-1-mask)" width="1" style="transition: all 0.3s linear 0s;"></image>
                    </svg>
                </div>

Вот такой код для маски в форме прямоугольника с вырезанным в угле прямоугольником:
(это для smm-специалиста)

<div data-id="smm" class="animated-mask animated-mask_worker-2" style="z-index: 0; height: 195px; width: 186px;">
                    <svg class="animated-mask__svg" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
                        <mask id="worker-2-mask">
                            <rect class="worker-2-mask__path worker-2-mask__main-rect" fill="#fff" height="1" width="1" style="transform: scale(0.76) rotate(-19deg) translateZ(0px);transform-origin: 0.5px 0.5px;"></rect>
                            <rect class="worker-2-mask__path worker-2-mask__sub-rect" fill="#000" height="1" width="1" style="transform: scale(0.26) rotate(-19deg) translate(1px, 2.25px);transform-origin: 0.502px 0.502px;transform-origin: -0.32px 0.502px;"></rect>
                        </mask>
                        <image class="animated-mask__img animated-mask__img_default opacity_1" height="1" href="assets/img/header/workers/worker-8/photo__4x.png" mask="url(#worker-2-mask)" width="1"></image>
                        <image class="animated-mask__img animated-mask__img_hover" id="s" height="1" href="assets/img/header/workers/worker-8/hover__4x.png" mask="url(#worker-2-mask)" width="1" style="transition: all 0.3s linear 0s;"></image>
                    </svg>
                </div>

В последнем коде в маске два rect, один большой непрозрачный, другой маленький прозрачный, в угле и обрезает видимую часть, чтобы получилась нужная фигура. Хотелось бы соединить их в один path, а как это сделать я не знаю. Поэтому я хочу использовать в mask вместо svg растровые изображения, а как это сделать - не знаю...