6890 shaares
Creating patterns for imgs
This size matches the dimensions of our SVG exports. This is important. This is the one drawback of using clip-path: path(). It's not responsive. The path definition is relative to the dimensions of your element.
Changing the shape:
.portrait {
transition: clip-path 0.2s, transform 0.2s;
transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
--scale: 1.15;
--rotate: 30deg;
--clip: var(--splattier);
}
.portrait:active {
--scale: 0.85;
--rotate: -10deg;
--clip: var(--splatted);
}