<svg viewBox="0 0 0 0" width="0" height="0">
<filter id="greyscale">
<feColorMatrix type="matrix" values="
0.5 0.44 0.1 0 -.02
0.5 0.44 0.1 0 -.02
0.5 0.44 0.1 0 -.02
0 0 0 1 0" />
<feComponentTransfer>
<feFuncR type="linear" slope="1" intercept="-0.02" />
<feFuncG type="linear" slope="1" intercept="-0.02" />
<feFuncB type="linear" slope="1" intercept="-0.02" />
</feComponentTransfer>
</filter>
</svg>
<img src="https://assets.codepen.io/159218/NFC_0312.jpg" alt="" />
img {
width: 100%;
height: auto;
filter: url(#greyscale);
}
body {
margin: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
min-height: 100dvh;
background: radial-gradient(rgb(0 0 0 / 0.8) 70%, transparent 30%),
radial-gradient(rgb(20 20 20 / 1) 70%, transparent 15%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.