<div class="painted">
<img src="https://assets.codepen.io/9632/S6g8rNmQ_400x400.jpg" alt="" />
</div>
:root {
--color-primary: hsl(0 0% 15%);
--color-accent: hsl(16.1 5% 55.5%);
--color-tertiary: aqua;
}
.painted {
background: repeating-radial-gradient(
circle at center,
var(--color-primary),
var(--color-accent)
);
background-size: 5px;
}
.painted img {
filter: blur(4px) contrast(3000%) grayscale(1);
mix-blend-mode: screen;
width: 100%;
}
// Playing with https://codepen.io/spaceninja/pen/oNEOXRZ?editors=1100
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.