pankod/refine

import React from "react";

export const SlidingBackground = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={48}
    height={56}
    viewBox="0 0 48 56"
    fill="none"
    {...props}
  >
    <g fillOpacity={0.1} clipPath="url(#sliding-background-clip)">
      <path
        fill="url(#sliding-background-gradient)"
        d="M8 0h8l-56 56h-8L8 0Z"
      />
      <path
        fill="url(#sliding-background-gradient)"
        d="M32 0h-8l-56 56h8L32 0Z"
      />
      <path
        fill="url(#sliding-background-gradient)"
        d="M40 0h8L-8 56h-8L40 0Z"
      />
      <path
        fill="url(#sliding-background-gradient)"
        d="M64 0h-8L0 56h8L64 0Z"
      />
      <path
        fill="url(#sliding-background-gradient)"
        d="M72 0h8L24 56h-8L72 0Z"
      />
      <path
        fill="url(#sliding-background-gradient)"
        d="M96 0h-8L32 56h8L96 0Z"
      />
    </g>
    <defs>
      <linearGradient
        id="sliding-background-gradient"
        x1={-190}
        x2={-190}
        y1={0}
        y2={56}
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="currentColor" stopOpacity={0} />
        <stop offset={0.5} stopColor="#currentColor" />
        <stop offset={1} stopColor="#currentColor" stopOpacity={0} />
      </linearGradient>
      <clipPath id="sliding-background-clip">
        <path fill="#fff" d="M0 0h48v56H0z" />
      </clipPath>
    </defs>
  </svg>
);