Как закрасить прозрачную область png?

Здравствуйте,

Есть png:

Нужно закрасить текстурной картинкой png где прозрачная область.

Использую Css Mask, но макса наоборот обходит прозрачные слои.
Думал через Css clip-path получится обойти, но никак не получается, может быть у вас есть подсказки как можно решить данную задачу?

Быть может формат картинок поменять, в виде svg или другие форматы?
Фото обуви это пример, могут быть разные модели, и соответственно разные зоны закраски.

Ожидаемый результат:

Пожалуйста подскажите куда копать?

Дополнительно:

Положите сначала фоновую картинку. А потом сверху с прозрачным фоном.
Если фон прозрачный, следовательно, фоновую картинку будит видно

Проблема решена.
Оказалось все проще, закрашиваем те места где будет все статично, оставляем не закрашенным ту часть, где будем динамично подставлять цвета.
Выходит 2 картинки:
1) Цвет
2) Форма

В html, в одном блоке будет отображаться 2 картинки, вторая будет с абсолютным позиционированием, его выравниваем поверх первой картинки и все.

Пример кода html

<div class="pic"> 		<img src="color.jpg" class="bg"> 		<img src="form.png" class="face"> 	</div>

Пример кода Css

.pic img {     width: 100%; }  .pic {     width: 400px;     position: relative;     background: white; }  .pic .face {     position: absolute;     left: 0;     top: 0; }

• А если таких товаров будет 1000 или 5 тысяч ?
  Как в этом случае рисовать?
• Максим, это будет полная жпа конечно.
  Пока другого решения не нашел к сожалению.
  Есть ли у вас более практичное и автоматизированное решение?
• Suleimanov_Ismar, я начал к комментариях писать...вы переключились на удобный но на единичный случай...
  Когда 1 фотка или 5 ..хрен с ним можно нафотошопить...
  Берём svg и path нужной области и делаем маску
  Ваще такие дела делают на канвас..
• Так вообще его фоном тогда поставь просто а не отдельным блоком
• imko, ага, можно в принципе, каждый для себя думаю уже поправит как надо
• Максим, тут проблема в том что svg должен быть векторной, а приложенное фото, она 50/50 линии векторные а остальное это jpg. Стельки, подошвы и резинки. Svg отрисовать не получается. Посмотрю в сторону канвас. Если у вас будут примеры, буду очень благодарен
• Suleimanov_Ismar, svg это и так векторный формат изображений...примеров нету и делать не хочу..
  Но самое главное, нарисовать то можно вообще что угодно, а сам товар то должен соответствовать изображерию товара.
  Сфоткайте свои повседневные туфли, красовки и попробуйте сменить цвет
• Максим, разве svg может в себе содержать отдельные элементы в виде jpg?
• Suleimanov_Ismar, свг может в себе содержать отдельные элементы в виде в принципе растра) Попробуй из той же фигмы любой растр экспортировать в свг формате, он его просто обернет в тег свг и внури будет валяться растр