<div id="root">
</div>
@import url('//fonts.googleapis.com/css?family=Roboto');
.mosaicEffect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// animation
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

$wide_duration: 150;
$wide_delay_brightness: 75;
$wide_delay_alpha: 50;

[data-intersecting="true"] {
  .group {
    animation: fadeOut forwards;
    animation-duration: #{$wide_duration * 1.5}ms;
  }
  
  // group 1
  [id*="mask_alpha"] .group:nth-child(1) {
    animation-delay: #{$wide_duration - $wide_delay_alpha}ms;
  }
  // group 2
  [id*="mask_brightness"] .group:nth-child(2) {
    animation-delay: #{$wide_delay_brightness * 1}ms;
  }
  [id*="mask_alpha"] .group:nth-child(2) {
    animation-delay: #{($wide_delay_brightness * 1) + $wide_duration - $wide_delay_alpha}ms;
  }
  // group 3
  [id*="mask_brightness"] .group:nth-child(3) {
    animation-delay: #{$wide_delay_brightness * 2}ms;
  }
  [id*="mask_alpha"] .group:nth-child(3) {
    animation-delay: #{($wide_delay_brightness * 2) + $wide_duration - $wide_delay_alpha}ms;
  }
  // group 4
  [id*="mask_brightness"] .group:nth-child(2) {
    animation-delay: #{$wide_delay_brightness * 3}ms;
  }
  [id*="mask_alpha"] .group:nth-child(2) {
    animation-delay: #{($wide_delay_brightness * 3) + $wide_duration - $wide_delay_alpha}ms;
  }
}

// ----------
html, * {
  font-family: 'Roboto';
  box-sizing: border-box;
}

body {
  padding: 1.5em 0 4em;
}

.title {
  text-align: center;
  margin: 0 auto 1em;
  font-size: 1.5em;
  font-weight: 700;
}

.figure {
  diplay: block;
  position: relative;
  aspect-ratio: 2;
  margin: auto;
  width: min(80vw, 600px);
  background-color: whitesmoke;
  
  ~ .figure {
    margin-top: 4em;
  }
}

.caption {
  position: absolute;
  top: 100%;
  margin: 0.5em 0;
}

.button {
  position: absolute;
  top: 100%;
  right: 0;
  white-space: nowrap;
  margin: 0.5em 0;
  
  ~ .button {
    right: 8em;
  }
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
View Compiled
import { FC, useEffect, useState, useRef, useCallback } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const cellParams = [
    1,
    0,
    1,
    2,
    2,
    2,
    3,
    2,
    1,
    1,
    3,
    1,
    0,
    1,
    3,
    1,
    2,
    0,
    2,
    1,
    2,
    1,
    0,
    2,
    0,
    3,
    1,
    1,
    1,
    3,
    2,
    1,
    1,
    0,
    3,
    0,
    1,
    3,
    3,
    0,
    3,
    0,
    0,
    2,
    3,
    1,
    3,
    3,
    1,
    1,
    1,
    3,
    3,
    2,
    0,
    2,
    0,
    0,
    1,
    0,
    0,
    3,
    0,
    1,
    1,
    2,
    3,
    1,
    3,
    0,
    0,
    3,
    3,
    3,
    3,
    3,
    0,
    2,
    2,
    2,
    3,
    3,
    2,
    3,
    1,
    3,
    3,
    2,
    0,
    0,
    1,
    1,
    2,
    2,
    3,
    2,
    1,
    0,
    0,
    3,
    0,
    0,
    3,
    0,
    2,
    3,
    0,
    3,
    1,
    1,
    0,
    1,
    2,
    0,
    0,
    2,
    3,
    2,
    2,
    2,
    3,
    2,
    0,
    1,
    1,
    1,
    2,
    3,
    1,
    3,
    0,
    3,
    3,
    2,
    2,
    3,
    2,
    1,
    1,
    2,
    1,
    2,
    3,
    3,
    1,
    0,
    2,
    1,
    0,
    1,
    3,
    0,
    0,
    2,
    1,
    2,
    1,
    3,
    3,
    0,
    1,
    0,
    0,
    2,
    2,
    3,
    3,
    2,
    1,
    0,
    2,
    2,
    1,
    0,
    0,
    0,
    1,
    3,
    0,
    2,
    0,
    1,
    3,
    0,
    0,
    3,
    2,
    1,
    2,
    2,
    2,
    2,
    2,
    0,
    1,
    2,
    1,
    0,
    3,
    0
];

const image_src = "https://images.unsplash.com/photo-1688550378756-866114814fee?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODg3MTc0OTN8&ixlib=rb-4.0.3&q=85";
const mosaic_image = "data:image/png;base64,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";


export const MosaicEffect: FC<PixelateEffectProps> = ({ addClass = [] }) => {
  
  const item = useRef<SVGSVGElement>(null);
  const [isIntersecting, setIsIntersecting] = useState<boolean>(false);
  
  const handleAdd = useCallback(()=> {
    setIsIntersecting(true);
  },[isIntersecting]);
  
  const handleRemove = useCallback(()=> {
    setIsIntersecting(false);
  },[isIntersecting]);
  
  return(
  <div
      className={["area", ...addClass].join(" ")}
    >
      <svg
        ref={item}
        className={"mosaicEffect"}
      data-intersecting={isIntersecting}
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 10"
        preserveAspectRatio="none"
      >
        <defs>
          <mask id="mask_alpha">
            {[0, 1, 2, 3].map(group => (
              <g key={group} className={"group"}>
                {cellParams.map((grid, index) => {
                  const x = index % 20;
                  const y = Math.floor(index / 20);
                  return grid === group ? (
                    <rect  className={"cell"} key={index} x={x} y={y} width="1" height="1" fill="white" stroke="white" strokeWidth="0.05" />
                  ) : null;
                })}
              </g>
            ))}
          </mask>
          <mask id="mask_brightness">
            {[0, 1, 2, 3].map(group => (
              <g key={group} className={"group"}>
                {cellParams.map((grid, index) => {
                  const x = index % 20;
                  const y = Math.floor(index / 20);
                  return grid === group ? (
                    <rect  className={"cell"} key={index} x={x} y={y} width="1" height="1" fill="white" stroke="white" strokeWidth="0.05" />
                  ) : null;
                })}
              </g>
            ))}
          </mask>
        </defs>
        <image href={mosaic_image} width="20" height="10" mask="url(#mask_alpha)" />
        <rect stroke="white" width="20" height="10" fill="white"
          mask="url(#mask_brightness)"
        />
      </svg>
      <button className={"button"} disabled={isIntersecting} onClick={handleAdd}>Mosaicize</button>
      <button className={"button"} disabled={!isIntersecting} onClick={handleRemove}>Reset</button>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <h1 className="title">Mosaic Effect</h1>
    <figure class="figure">
      <MosaicEffect />
      <img class="image" src={image_src} alt="" />
      <figcaption className="caption">Unprocessed image + Mosaic effect</figcaption>
    </figure>
    <figure class="figure">
      <img class="image" src={image_src} alt="" />
      <figcaption className="caption">Unprocessed image</figcaption>
    </figure>
    <figure class="figure">
      <img class="image" src={mosaic_image} alt="" />
      <figcaption className="caption">Mosaic image</figcaption>
    </figure>
  </React.StrictMode>,
  document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js