Как реализовать clip-path в данном случае?

Question

[MyNamee]

Привет! Я новичок, но мне очень нужна ваша помощь.
Дана картинка, нужно применить к ней clip-path. Для задания кривой использовал Inkspace. Вопрос: Как взять нужные координаты и вырезать (залить белым) всё, что следует за чёрной кривой, т.е применить clip-path?
Я очень надеюсь что объяснил доступно, ибо мне действительно нужна помощь. Картинка в спойлере. Заранее спасибо!

spoiler

Comments

[longclaps]

Спасибо за вопрос, действительно очень доступно.
Одно уточнение: за чёрной кривой - это выше, ниже или глубже?

[MyNamee]

longclaps, Не знаю правильно пытаюсь объяснить или нет, но хочется чтобы после применения стилей область ниже чёрной кривой закрасилась белым, т.е применился clip-path. Для наглядности примерный скриншот в спойлере. Очень надеюсь на помощь.

spoiler

Answer 1

[Максим]

svg или clip-path

Comments

[MyNamee]

Это понятно, а подробнее?
Вопрос: Как взять нужные координаты и вырезать (залить белым) всё, что следует за чёрной кривой, т.е применить clip-path?

Answer 2

[Максим Тимофеев]

https://developer.mozilla.org/ru/docs/Web/CSS/clip-path
там и доки и примеры

Comments

[MyNamee]

Спасибо за наводку, начинаю изучение!
Извиняюсь, а инструмент для получения координат и разметки (Inkspace) я более-менее правильный выбрал, или есть что-то что использовать будет рациональнее?

Answer 3

[Ankhena]

Тут www.cssplant.com/clip-path-generator потестируйте и все поймете