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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.