Ефект счесывания при появі зображення з допомогою режимів накладення і SVG

1

Від автора: за допомогою анімації CSS, SVG dash-array і режимів накладення ми можемо створити ефект, як на лотерейних картках всього за 5 кроків. «Потри поле, щоб побачити зображення».

Ефект счесывания при появі зображення з допомогою режимів накладення і SVG

1. Створіть елемент SVG таких же розмірів, що і вибране зображення і намалюйте polyline, line або path елемент по всьому полотну від одного краю до іншого з досить великим значенням stroke-width.

Ефект счесывания при появі зображення з допомогою режимів накладення і SVG

Перед експортом зімітуйте потертість на зображенні

2. Збережіть SVG і вставити його в HTML код всередину блоку DIV. Повинно вийти приблизно так:

3. Стилизуйте елементи та встановіть фонове зображення для div:

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.

div#stripped svg polyline {
stroke-dasharray: 20000;
stroke-dashoffset: 20000;
}

Ці значення не якісь «особливі»: значення буде залежати від розміру і довжини polyline. Щоб зрозуміти, яке значення буде потрібно вам, доведеться трохи поекспериментувати.

5. Застосуйте правильний режим накладення svg, а також анімуються значення stroke-dashoffset до 0:

@keyframes scribble {
to { stroke-dashoffset: 0; }
}
div#stripped svg polyline {
animation: scribble 3s linear forwards;
}
div#stripped svg {
mix-blend-mode: lighten;
}

В результати виходить саме те, що ви бачите в шапці статті: зображення з’являється з ефектом потертості.

Варіації

Існує безліч можливих варіантів даного методу. Можна змінити кольори і режими для різних візуальних ефектів: наприклад, можна так:

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;
}

… вийде те, що ви бачите нижче.

Ефект счесывания при появі зображення з допомогою режимів накладення і SVG

Інші способи:

За допомогою JavaScript можна автоматично побудувати polyline, а не від руки.

Колекцію line елементів можна анімувати послідовно, для плавного появи.

Недоліки

Зараз, на жаль, немає способу в SVG зробити краї більш грубими, схожими на ручну роботу пензлем; але він повинен з’явитися в SVG2.