JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="canvas">
  <img src="https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img克鲁赛德战记－Ａ.jpg" alt="" />
</div>

SCSS

$dot-size: 0.25em; // 1
$line-color: #333; // 2
$line-contrast: 2000%; // 3
$photo-brightness: 80%; // 4
$photo-contrast: 150%; // 5
$photo-blur: 2px; // 6
$blend-mode: hard-light; // 7

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  filter: contrast($line-contrast);
  overflow: hidden;
}

.canvas::before {
  content: '';
  position: absolute;
  top: -50%; 
  left: -50%;
  bottom: -50%;
  right: -50%;
  background: radial-gradient(circle at center, $line-color, #fff);
  background-size: $dot-size $dot-size;
  transform: rotate(20deg);
}

.canvas img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: $blend-mode;
  filter:
    grayscale(1) brightness($photo-brightness) contrast($photo-contrast) blur($photo-blur);
}

JavaScript

// https://css-tricks.com/snippets/css/image-illustration-filter/