А в чем проблема ? Вариантов куча, можно в яндексе посмотреть.
1.Просто создать 2 блока, позиционирование их наложить друг на друга и через z-index уже управлять, кто выше, кто ниже. Самый простой варианты.
2.Псевдоклассы, можно через них. собственно (:before и :after) не забываем указывать свойство контейнер.
3. Что еще на ум приходит, js canvas.
4. css clip-path.
5. Свойство mask
6. Вот ссылки:
читай и на
хабре
Способов куча, какой именно вам подойдет, я не знаю.
Наберите просто в яндексе, работа с масками css
У каждого способа свои положительные стороны и недостатки.
Можно выбрать js, проблем особых не будет, но самое практичное, это 1й вариант.
Я использую много какие, чаще всего это простая вставка через css, в таком случаи манипуляции ограничены. Так что надо с начала помещать svg а потом через css пилить