Для создания SVG с `clip-path`, который будет адаптивно изменяться в зависимости от размера элемента, можно использовать проценты или функциональные единицы вроде `vw` (viewport width) и `vh` (viewport height) вместо фиксированных значений при определении форм и координат внутри SVG.
В предоставленном примере CodePen, если вы хотите, чтобы маска SVG растягивалась и всегда занимала 100% размера вьюпорта, адаптируясь к размеру контейнера, вам необходимо настроить размер SVG и саму маску таким образом, чтобы они отвечали этому требованию.
Вот несколько шагов для модификации маски:
1. Установите размеры SVG так, чтобы они занимали весь контейнер, используя `width="100%"` и `height="100%"`.
2. Добавьте атрибуты `preserveAspectRatio="none"` и `viewBox` в тег `<svg>`, чтобы растягивать содержимое SVG с сохранением пропорций, независимо от размера контейнера.
3. Внутри `<clipPath>`, используйте координаты и размеры в процентах или относительных единицах измерения, чтобы фигура внутри адаптировалась к размерам SVG.
Вот пример кода, который можно использовать как отправную точку:
```html
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<!-- Пример маски с использованием относительных единиц -->
<path d="M0,0 L1,0 L1,1 L0,1 Z" />
<!-- Вы можете модифицировать этот путь, чтобы получить нужную форму -->
</clipPath>
</defs>
<image clip-path="url(#clip-path)" href="URL_TO_YOUR_IMAGE" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
</svg>
```
В приведенном выше коде:
- `viewBox="0 0 100 100"` задает систему координат для внутреннего содержимого SVG. Эта система позволяет легко выражать размеры и позиции в процентном соотношении.
- `clipPathUnits="objectBoundingBox"` изменяет систему координат для `<clipPath>` так, чтобы она использовала относительные размеры в пределах от 0 до 1, где 1 эквивалентно 100% размера объекта к которому применяется маска.
- `preserveAspectRatio="none"` позволяет SVG масштабироваться для заполнения своего контейнера полностью, игнорируя соотношение сторон.
- `preserveAspectRatio="xMidYMid slice"` в теге `<image>` гарантирует, что изображение будет растянуто или сжато для заполнения всей доступной области, сохраняя при этом свои пропорции.
Подгоните путь в `<path>` как необходимо, чтобы он отвечал вашим дизайн-требованиям.