От автора: с помощью анимации CSS, SVG dash-array и режимов наложения мы можем создать эффект, как на лотерейных карточках всего за 5 шагов. «Потри поле, чтобы увидеть изображение».
1. Создайте элемент SVG таких же размеров, что и выбранное изображение и нарисуйте polyline, line или path элемент по всему холсту от одного края до другого с достаточно большим значением stroke-width.
Перед экспортом сымитируйте потертость на изображении
2. Сохраните SVG и вставьте его в HTML код внутрь блока DIV. Должно получиться примерно так:
|
1 2 3 4 5 6 7 8 |
<div id="stripped"> <svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 1500 1062"> <polyline points="0,154 131,0 0,348 269,0 0,562 437,0 0,766 565,14 0,1062 719,0 289,1062 843,0 543,1062 995,0 729,1062 1161,0 947,1062 1307,0 1143,1062 1500,162 1299,1062 1500,830"/> </svg> </div> |
3. Стилизуйте элементы и установите фоновое изображение для div:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div#stripped { background: #000; background-image: url(olga.jpg); background-size: cover; font-size: 0; } div#stripped svg { background: #fff; } div#stripped svg polyline { fill: none; stroke: #000; stroke-width: 200; } |
Использованные в этом уроке цвета очень важны, но можно использовать и другие. Об этом написано ниже.
4. Теперь ваше изображение будет почти полностью закрыто полилинией. Исправим это и установим очень высокие значения для stroke-dasharray и stroke-dashoffset.
|
1 2 3 4 |
div#stripped svg polyline { stroke-dasharray: 20000; stroke-dashoffset: 20000; } |
Эти значения не какие-то «особенные»: значение будет зависеть от размер и длинны polyline. Чтобы понять, какое значение будет нужно вам, придется слегка поэкспериментировать.
5. Примените правильный режим наложения к svg, а также анимируйте значение stroke-dashoffset до 0:
|
1 2 3 4 5 6 7 8 9 |
@keyframes scribble { to { stroke-dashoffset: 0; } } div#stripped svg polyline { animation: scribble 3s linear forwards; } div#stripped svg { mix-blend-mode: lighten; } |
В результаты получается именно то, что вы видите в шапке статьи: изображение появляется с эффектом потертости.
Вариации
Существует масса возможных вариантов данного метода. Можно изменить цвета и режимы наложения для различных визуальных эффектов: к примеру, можно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div#stripped { background: #000; background-image: url(olga.jpg); } div#stripped svg { background: #000; mix-blend-mode: darken; } div#stripped svg polyline { fill: none; stroke: #f00; } |
… получится то, что вы видите ниже.
Другие способы:
С помощью JavaScript можно автоматически построить polyline, а не от руки.
Коллекцию line элементов можно анимировать последовательно, для плавного появления.
Недостатки
Сейчас, к сожалению, нет способа в SVG сделать края более грубыми, похожими на ручную работу кистью; но он должен появиться в SVG2.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
