JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div></div>

<svg
  version="1.1"
  width="400"
  height="685"
  xmlns="http://www.w3.org/2000/svg"
  color-interpolation-filters="sRGB"
>
  <filter
    id="fluted2"
    primitiveUnits="objectBoundingBox"
    x="0"
    y="0"
    width="100%"
    height="100%"
  >
    <feImage
      x="0"
      y="0"
      result="image_0"
      crossorigin="anonymous"
      href="https://raw.githubusercontent.com/Hongda-Lin/ImageStore/master/imgolga-thelavart-vS3idIiYxX0-unsplash.jpg"
      preserveAspectRatio="none"
      width="1"
      height="1"
    />

    <feDisplacementMap
      scale=".08"
      xChannelSelector="R"
      yChannelSelector="G"
      in="image_0"
      in2="SourceGraphic"
      result="displacement_0"
    />
  </filter>
</svg>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  width: 400px;
  height: 685px;
  display: flex;
  filter: url(#fluted2);
  animation: shimmer 10s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' width='40' height='685' xmlns='http://www.w3.org/2000/svg' color-interpolation-filters='sRGB'%3E%3Cg%3E%3Crect width='40' height='685' fill='black' /%3E%3Crect width='40' height='685' fill='url(%23red)' style='mix-blend-mode:screen' /%3E%3Crect width='40' height='685' fill='url(%23green)' style='mix-blend-mode:screen' /%3E%3Crect width='40' height='685' fill='url(%23yellow)' style='mix-blend-mode:screen' /%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='yellow' cx='0' cy='0' r='1' %3E%3Cstop stop-color='yellow' /%3E%3Cstop stop-color='yellow' offset='1' stop-opacity='0' /%3E%3C/radialGradient%3E%3CradialGradient id='green' cx='1' cy='0' r='1' %3E%3Cstop stop-color='green' /%3E%3Cstop stop-color='green' offset='1' stop-opacity='0' /%3E%3C/radialGradient%3E%3CradialGradient id='red' cx='0' cy='1' r='1' %3E%3Cstop stop-color='red' /%3E%3Cstop stop-color='red' offset='1' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  background-size: 40px auto;
  background-repeat: repeat-x;
}

@keyframes shimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

svg {
  position: absolute;
}

JavaScript

// https://juejin.cn/post/7399273700117168178