Javascript 없이 CSS,SVG로 멋진 Loading bar 효과 구현해보기

---

 

 

 

이번 글을 통해 배워갈 내용

1. SVG Clip Path를 통해 커스텀 모양의 로딩바 Transition 효과 구현해보기

 

 

---

CSS SVG LOADING ANIMATION

 

 

위의 특정한 모양에 로딩 CSS를 구현하고 싶고

뒤에 배경은 투명으로 해서 작업을 하고 싶은 경우

 

자바스크립트 없이

SVG를 가지고 가능합니다.

 

React에서 Styled Component를 써서 작업을 하였으며

React가 아닌 기본 Html CSS, 혹은 앵귤러나 Vue에서도 똑같이 적용해주시면 됩니다.

ClipPath 안에 체스 모양들을 넣고

ClipPath id를 설정해줍니다.

 

g에 clip-path id를 연계해주고

g 안에 rect와 circle을 넣어준 다음

CSS 처리를 해줍니다.

 

그다음 CSS 애니메이션으로 x의 위치를 수정해주면 끝입니다.

 

전체 코드는 아래와 같습니다.

 

import React from 'react';
import styled, { keyframes } from 'styled-components';

// Styled Components
const myAni = keyframes`
0% {x: -1497}
50% {x: 0}
100% {x: -1497}
`;

const StyleSlidingSvg = styled.div`
  & {
    width: 400px;
    height: 100px;
  }

  & svg {
    fill: rgb(255, 255, 255, 0.5);
    text-shadow: 200px 200px red;
    overflow: hidden;
  }

  & .rectBefore {
    stroke: none;
    fill: #fff;
    x: 0;
    y: 0;
    width: 1497;
    height: 504;
  }

  & .rectAfter {
    stroke: none;
    fill: url(#PintGradient);
    x: -1497;
    y: 0;
    animation: ${myAni} 2s linear infinite;
  }

  & g {
    clip-path: url(#kimcClipPath);
  }
`;

// React Components
const SlidingSvg = () => {
  return (
    <StyleSlidingSvg>
      <svg enableBackground='new 0 0 1497 504' version='1.1' viewBox='0 0 1497 504' xmlns='http://www.w3.org/2000/svg'>
        <defs>
          <clipPath id='kimcClipPath'>
            <path d='m698.27 59.13c6.91-0.29 13.83-0.03 20.76-0.16 2.5099-0.07 5.04 0.04 7.49 0.69 0.47 4.07-0.97 8.09-0.2 12.15 2.96 0.35 5.88-0.35 8.8-0.75 1.7-0.48 3.68 0.98 3.44 2.82-0.03 8.84-0.14 17.69-0.13 26.54-3.37 1.2-6.78-0.2-10.18-0.36-1.21 0.45-2.29 1.59-2.22 2.94 0.02 3.4 0 7.03 1.77 10.06 5.09-0.29 10.24-0.25 15.27 0.69 5.13 2.86 4.39 9.39 4.09 14.34 1.22 1.53 2.77 2.9 4.9 2.53 4.66-0.33 9.78 4.08 8.4 9-1.22 3.53-4.92 5.02-7.43 7.45-3.0601 2.96-5.71 6.3-8.35 9.64-4.53 5.83-6.4 13.2-7.51 20.37 1.5 1.53 3.02 3.04 4.58 4.53-1.19 2.56-3.68 4.45-3.99 7.39-0.76 3.69-0.49 7.47-0.51 11.21 1.89 2.62 5.13 3.05 8.07 3.66 2.84 4.04-2.13 9.56 2.44 12.76 2.07 0.13 4.7-0.62 6.24 1.25 1.75 2.47 0.49 6.02-2.24 7.16-4.54 1.79-9.58 1.16-14.24 2.5-0.74 5.79-0.12 11.62-0.17 17.42 0.07 18.34-0.31 36.68-0.02 55.02 1.06 13.72 4.58 27.15 9.37 40.02 5.21 12.62 13.42 23.76 22.42 33.93 2.56 3.43 3.35 7.87 3.31 12.08-0.14 6.39-0.08 12.78 0.06 19.18 3.75 2.39 3.47 7 3.67 10.91 0.16 1.51-0.79 3.13-2.36 3.39-5.85 1.39-11.88 1.54-17.85 1.82-21.93 2.15-44 1.83-66.01 1.49-7.96-0.8-15.98-0.74-23.93-1.66-6.22-0.01-12.4-0.79-18.29-2.84-1.64-3.3-0.08-6.89-0.06-10.34 1.05-1.26 3.06-2.13 3.03-3.99 0.2-6.65 0.18-13.3 0.11-19.95-0.02-3.55 1.06-7.15 3.28-9.95 20.1-22.36 31.21-52.14 32.38-82.05-0.12-21.44 0.5099-42.89-0.03-64.31-4.81-2.6-10.97-0.49-15.49-3.82-1.94-1.28-2.15-3.82-1.56-5.88 1.59-2.99 5.92-0.36 7.64-3.22 2.64-2.9-0.28-6.73 0.93-9.9 1.39-3.86 7.07-1.67 8.36-5.72 0.63-3.72 0.35-7.55 0.21-11.3 0.08-2.43-2.17-3.91-3.04-5.98-0.58-2.23 2.11-3.23 3.11-4.86 0.46-1.99 0.18-4.08-0.27-6.05-2.01-7.5-5.51-14.68-10.74-20.46-2.76-3.33-6.43-5.72-9.36-8.87-2.45-2.5-2.85-7.02 0.0601-9.34 2.21-2.82 6-1.77 9.08-1.79 2.8-3.24 2.24-7.55 2.43-11.5 0.02-3.3 2.81-6.39 6.19-6.35 4.47-0.22 8.96 0.02 13.44-0.18 0.6-3.92 1.24-7.86 1.09-11.84-3.4-1.44-6.86 0.65-10.3 0.26-2.4901-0.78-2.18-3.81-2.2401-5.87 0.2401-7.88-0.2599-15.78 0.45-23.63 4.19-1.51 8.48 1.17 12.7-0.13-0.07-4.07-1.4-8.07-0.85-12.15z' />
            <path d='m856.85 80.9c4.54-1.55 9.48-2.14 14.24-1.42 5.56 0.73 10.23 5.07 12.18 10.21 0.98 3.95 0.49 8.37-2.06 11.65-3.11 3.61-2.3 8.66-1.63 12.98 2.7 0.77 5.94 0.87 7.91 3.15 2.63 3.34 3.91 7.6 6.78 10.75 5.54 2.54 12.93-2.31 17.76 2.37 3.73 2.55 3.91 8.87-0.04 11.29-10.49 8.43-18.58 20.59-19.74 34.23 1.1 1.15 2.21 2.3 3.35 3.43-0.12 3.14-3.04 5.32-3.0099 8.47-0.19 3.4-0.08 6.81-0.22 10.21 0.74 0.67 1.49 1.33 2.26 2 2.91 0.03 6.27 1.52 6.89 4.65-0.04 2.85-1.02 5.62-0.87 8.5 0.39 0.33 1.17 1 1.56 1.33 2.5099 0.03 5.79-0.81 7.41 1.77 2.1 2.64-0.42 6.23-3.08 7.3-4.35 1.89-9.27 1.66-13.8 2.96-0.5 2.71-0.54 5.47-0.45 8.22 0.29 17.63-0.07 35.27 0.25 52.9 0.91 7.03 0.33 14.2 1.72 21.18 2.76 17.1 9.23 33.63 19.01 47.95 2.53 3.68 4.56 7.76 7.72 10.98 2.63 2.77 4.91 5.9 6.74 9.27 1.9 4.33 0.93 9.18 1.13 13.76 0.24 4.33 0.19 8.68 0.41 13.02 3.88 2.82 4.1 8.17 2.92 12.42-1.59 2.24-4.89 1.95-7.29 2.75-11.88 1.88-23.97 1.48-35.93 2.62-11.65 0.42-23.31 0.12-34.97 0.2-10.69 0.09-21.33-1.31-32.02-1.08-6.76-1.07-13.86-0.02-20.31-2.66-0.15-3.42-0.27-6.9 0.42-10.27 0.25-1.88 2.29-2.89 2.59-4.75 1-8.96-1.08-18.22 1.46-27 2.35-4.15 5.88-7.49 8.72-11.31 10.47-13.08 18.67-28.28 22.01-44.8 2.3-8.85 3.67-17.97 3.6-27.12 0.01-12.67 0.03-25.34-0.28-38.01-0.47-9.02-0.34-18.06 0.4-27.04-0.27-0.31-0.81-0.93-1.08-1.24-5.24-1.42-11.76-0.09-15.83-4.41-2.19-1.91-1.26-5.9 1.4-6.84 2.07-0.58 4.21-0.81 6.34-1.15 0.54-3.4 0.23-6.83 0.08-10.25 0.78-0.78 1.57-1.56 2.38-2.34 1.84-0.41 3.91-0.53 5.34-1.93 1.46-4.69 0.38-9.68 0.17-14.48-0.98-0.99-1.96-1.98-2.93-2.97-0.02-1.15-0.01-2.31 0.0099-3.45 4.95-1.71 3.1801-7.75 1.9901-11.49-1.97-7.5-7.12-13.46-11.83-19.38-3.26-3.81-9.86-6.01-9.38-11.94-0.28-2.98 2.03-5.53 4.69-6.49 5.01-0.42 10.04 0.27 15.07 0.31 1.93-3.68 3.87-7.36 6.08-10.87 1.8-2.77 5.14-3.61 8.23-3.91 1.6-3.12 1.28-6.76 0.98-10.14-1.01-3.47-3.99-6.22-4.05-10.01-0.8001-5.93 2.9399-12.09 8.5999-14.08z' />
            <path d='m297.47 129.81c0.64-2.05 2.16-4.05 4.49-4.15 9.08-0.86 18.21 0.96 27 3.07 4.85 7.05 6.81 15.66 12.09 22.45 5.17 8.63 9.87 17.56 14.26 26.61 2.92 5.51 2.21 12.13 5.31 17.55 4.03 8.6 9.32 17.02 9.83 26.77 0.93 4.61-1.38 9.44 0.67 13.85 3.53 8.9 5.21 18.52 4.86 28.1-0.13 2.86-0.96 5.69-2.42 8.15 0.92 9.93 1.32 19.9 0.5 29.84-0.26 4.85 0.03 11.53-4.91 14.19-8.11 2.08-16.62 1.82-24.85 3.27-0.24 5.04 1.37 9.93 3.88 14.25 4.14 8.61 9.29 16.7 15.12 24.26 3.71 5.7 10.21 9.6 11.81 16.59 1.24 8.07 0.69 16.26 1.24 24.38 3.58 3.83 3.54 9.8 2.22 14.58-10.27 2.84-20.96 3.45-31.56 3.56-20.97 1.62-42.03 1.08-63.04 0.79-11.04-1.18-22.28-0.42-33.1-3.33-2.82-3.93-1.96-10.01 1.03-13.67 1.4-1.62 0.8-3.93 0.98-5.88 0.19-6.37-0.54-12.81 0.4-19.13 1.29-6.97 7.74-10.95 11.53-16.43 9.2-11.23 14.46-24.92 19.65-38.31-0.35-0.6-1.06-1.79-1.42-2.39-6.88-1.17-13.92-1.4-20.68-3.19-1.67-5.74 0.77-11.45 2.05-16.99 5.05-19.12 9.94-38.29 14.42-57.55 1.36-5.52 2.17-11.15 2.05-16.84-3.65-0.26-7.27 0.31-10.89 0.54-8-0.59-15.98-1.39-23.97-1.99-2.56-0.27-5.15-0.59-7.57-1.49-3.14-1.79-1.99-5.88-2.97-8.78-2.15-5.83-4.46-12.02-3.37-18.33 1.78-2.92 5.07-4.43 7.66-6.52 15.86-11.78 31.99-23.18 47.8-35.02 1.64-1.3 3.3-2.78 3.91-4.85 2.01-5.98 3.83-12.03 5.99-17.96z' />
            <path d='m1183 128.97c4.55-1.47 9.33-1.49 14.05-1.98 5.33 1.13 10.97-0.28 16.14 1.74 2.65 6.06 4.1801 12.53 6.2401 18.81 0.6699 1.76 0.7999 3.98 2.46 5.17 19.34 14.29 39.4 27.6 58.58 42.12 0.86 8.24-2.7999 15.98-4.6 23.85-1.54 3.87-6.3199 3.75-9.8 4.18-7.38 0.12-14.71 1.35-22.1 1.11-3.8099-0.18-7.61 0.34-11.15 1.77-0.85 2.73-2.1899 5.53-1.48 8.45 1.65 8.7 4.03 17.23 6.0601 25.84 3.78 14.05 6.87 28.29 11.31 42.15 0.99 3.22 2.3301 6.43 2.3201 9.87 0.2999 2.32-1.77 4.34-3.9501 4.65-6.1799 1.39-12.6 1.23-18.75 2.75 2.61 17.11 13.17 31.48 23.19 45.06 3.98 3.67 8.35 7.63 8.73 13.44 0.05 7.65-0.26 15.32-0.2 22.98 1.0399 1.01 2.11 2.01 3.2 3.01 0.4399 3.09 0.52 6.22 0.35 9.35-14.48 4.12-29.72 3.61-44.64 3.92-10.97 0.53-21.93 0.25-32.9 0.08-11.36-0.45-22.75 0.16-34.06-1.21-5.76-0.8-11.63-0.51-17.32-1.74-0.9301-3.88-0.4-7.91 0.23-11.79 0.7999-1.34 1.9299-2.45 2.77-3.78 0.49-4.59 0.11-9.22 0.22-13.83 0.09-4.28-0.6801-8.86 1.41-12.81 1.1799-2.87 3.46-5 5.47-7.28 8.6699-10.81 16.64-22.47 21.25-35.64 1.15-3.28 2.99-6.45 2.74-10.04-6.4501-0.25-12.89-0.9-19.31-1.47-3.24-0.57-7.45-0.69-9.1699-4-2.78-5.51-2.17-11.8-2.73-17.74-0.66-7.38 0.5299-14.75 0.4199-22.12-2.72-14.25-2.04-29.45 3.4501-42.99 0.95-3.49 0.7-7.18 1.2899-10.74 0.38-10.42 5.13-20.01 10.39-28.77 1.98-9.04 4.72-18.04 9.4401-26.07 3.7799-6.75 8.3099-13.04 12.36-19.63 2.7998-5.5 5.1898-11.21 8.0898-16.67z' />
            <path d='m1010.6 132.69c1.1-1.99 3.52-1.61 5.43-1.71 8.36 0.1 16.74-0.25 25.08 0.52 1.13 0.07 2.11 0.73 3.15 1.17 0.1801 0.64 0.53 1.92 0.71 2.57-0.2 0.5-0.59 1.5-0.7899 2.01-1.74 0.49-3.4701 0.99-5.1901 1.48-0.37 0.54-1.12 1.6-1.49 2.13 1.24 4.57 5.76 6.68 9 9.65 5.29 5.02 11.47 9.2 15.83 15.14 4.8899 6.87 6.7699 16.47 2.8999 24.24-1.7799 4.77-5.7899 8.12-9.59 11.27-0.1899 1.96-0.3199 3.93-0.42 5.9 0.78 0.75 1.5901 1.5 2.4 2.26-0.01 0.59-0.0399 1.77-0.0499 2.36-1.38 1.32-2.89 2.56-3.8501 4.23-0.73 4.66-0.0199 9.4-0.23 14.1 0.3301 0.56 0.99 1.68 1.3201 2.24 2.2 0.7 4.39 1.5 6.46 2.58 0.33 0.98 0.71 1.96 1.08 2.94-1.38 3.2-1.2 6.67-0.12 9.93 3.7001-0.26 10.852-1.7 11.478 2.6125 0.4554 3.1426-3.5275 4.4575-6.5675 5.6275-4.3199 1.71-9.08 1.69-13.59 2.59-0.8401 4.81-0.0601 9.68-0.1801 14.52 0.26 9.33-0.27 18.7 0.77 28 0.71 19.69 8.47 38.26 17.33 55.57 3.8 5.94 7.42 12.11 12.85 16.75 1.47 2.75 3.4099 5.39 3.9199 8.54 0.49 5.79-0.14 11.63 0.3301 17.43 0.26 3.1 3.0499 5.13 3.9299 8 0.62 2.63 0.39 5.36 0.05 8.02-5.3101 1.86-10.98 2.15-16.53 2.6-30.9 2.41-62.01 2.29-92.94 0.16-6.51-0.11-13.04-0.48-19.46-1.62-0.95-3.48-0.5099-7.1-0.12-10.62 0.03-2.19 2.26-3.32 3.09-5.17 0.5-6.56-0.48-13.15 0.03-19.71 0.72-4.33 3.7401-7.74 6.57-10.91 5.12-5.69 9.3-12.14 13.23-18.69 4.44-7.27 6.38-15.65 9.52-23.48 3.52-12.65 6.06-25.74 5.78-38.92 0-10.15 0.34-20.32-0.13-30.47-5.14-1.88-11.35-0.62-15.79-4.28-1.8101-1.23-2.01-3.86-1.28-5.74 1.4-2.47 4.58-2.01 6.99-2.28 0.75-0.73 1.5-1.45 2.27-2.17-0.17-3.27-2.95-7.52 0.31-10.02 2.09-1.95 6.47-0.81 7.03-4.39 0.79-4.89 0.26-9.88 0.45-14.81-1.41-1.4-2.88-2.73-4.39-4.01 1.31-3.38 4.64-8.04 1.26-11.16-7.19-4.82-11.7-13.77-10.26-22.45 0.4-6.18 3.8-11.7 8.05-16.03 6.28-5.37 12.24-11.13 18.69-16.32 1.7-1.15 2.22-3.24 3.04-5.02-1.92-1.21-4.05-2-6.22-2.54-0.72-1.39-2.2-3-1.14-4.62z' />
            <path d='m84.67 186.67l8.28-0.12c6.74-0.4 13.49-0.42 20.24-0.12 0.18 1.17 0.38 2.35 0.58 3.52 4.37-0.02 8.75 0.02 13.13 0.01 0.71-0.94 1.43-1.87 2.16-2.8 6.66-0.08 13.34-0.51 19.99 0.16 1.23 0.06 2.3 0.73 3.41 1.2 0.72 0.03 2.16 0.1 2.88 0.13-0.2 5.82 0.18 11.64-0.03 17.45-0.02 1.89-1.79 3.07-2.81 4.47 0.86 7.1 0.81 14.3 0.25 21.42-0.05 3.06-1.91 5.95-4.76 7.12-4.21 1.77-8.89 1.35-13.27 2.42-0.33 0.44-0.97 1.34-1.29 1.79-0.19 3.91-0.16 7.82-0.06 11.73 0.6 17.7-0.75 35.49 1.61 53.1 3.19 17.47 10.03 34.26 20.3 48.77 4.17 6.82 11.8 11.69 13.05 20.09 0.61 7.32-0.67 14.78 0.6 22.04 3.73 3.82 3.89 9.27 3.6 14.3-7.09 3.06-14.93 2.48-22.43 3.44-8.05 0.13-16.01 1.61-24.08 1.23-20.36 0.82-40.72 0.44-61.07-0.21-5.66-0.65-11.32-1.3-16.98-1.89-2.26-0.3-4.96-0.63-6.28-2.75-0.33-4.34-0.19-9.04 2.95-12.39 0.81-7.25-0.25-14.58 0.3-21.85 0.35-3.98 2.54-7.37 4.76-10.54 2.78-2.77 5.56-5.6 7.42-9.1 1.26-2.79 3.02-5.32 4.59-7.93 11.77-19.53 18.75-42.39 17.72-65.3-0.04-14.48 0.2-28.96 0.09-43.44-5.52-2.22-12.4-0.77-17.06-5.12-3.7-4.23-2.1-10.4-2.51-15.52-0.61-5.43 2.85-11.97-1.91-16.25-0.12-5.64 0.06-11.29-0.12-16.94 4.14-1.64 8.71-0.94 13.06-1.05 4.21-0.31 7.79 2.52 12.01 2.26l1.68-3.33z' />
            <path d='m1409.7 191.12c4.1646 0.2559 7.6976-2.5298 11.852-2.2247 4.2928 0.1083 8.803-0.5808 12.889 1.0336-0.1777 5.5617 0 11.123-0.1185 16.675-4.6975 4.2131-1.2828 10.651-1.8849 15.996-0.4047 5.04 1.1744 11.114-2.4771 15.278-4.5989 4.282-11.388 2.8547-16.836 5.04-0.1085 14.254 0.1283 28.507 0.0889 42.761-1.0165 22.552 5.8718 45.055 17.487 64.279 1.5494 2.5692 3.2864 5.0597 4.5298 7.8061 1.8356 3.4453 4.5791 6.231 7.3226 8.9578 2.1909 3.1204 4.3522 6.4575 4.6976 10.375 0.5427 7.1564-0.5033 14.372 0.296 21.508 3.0988 3.2977 3.2369 7.9242 2.9113 12.196-1.3026 2.0869-3.9672 2.4117-6.1975 2.707-5.5858 0.5808-11.172 1.2206-16.757 1.8604-20.083 0.6398-40.176 1.0139-60.269 0.2067-7.9641 0.3741-15.82-1.0828-23.764-1.2108-7.4016-0.945-15.139-0.3741-22.136-3.3862-0.2863-4.9514-0.1283-10.316 3.5527-14.076 1.2533-7.1465-0.0099-14.49 0.5922-21.696 1.2335-8.2687 8.7634-13.063 12.879-19.776 10.135-14.283 16.886-30.811 20.034-48.008 2.3291-17.335 0.9968-34.847 1.5889-52.27 0.0988-3.8489 0.1283-7.6978-0.0592-11.547-0.3158-0.443-0.9474-1.3289-1.2731-1.762-4.3225-1.0533-8.941-0.6398-13.096-2.3822-2.8126-1.1517-4.6482-3.9965-4.6976-7.0087-0.5526-7.0087-0.6019-14.096 0.2468-21.085-1.0067-1.3781-2.7534-2.5397-2.7732-4.4001-0.2073-5.7192 0.1677-11.448-0.0295-17.177 0.7104-0.0295 2.1316-0.0984 2.8422-0.128 1.0955-0.4627 2.1514-1.1222 3.3652-1.1812 6.5627-0.6595 13.155-0.2363 19.728-0.1575 0.7203 0.9155 1.4309 1.8309 2.1316 2.7562 4.3226 0.0098 8.6451-0.0295 12.958-0.0099 0.1974-1.1517 0.3948-2.3133 0.5724-3.465 6.6615-0.2953 13.323-0.2756 19.974 0.1181l8.1714 0.1181c0.5525 1.0927 1.1051 2.1853 1.6578 3.278z' />
            <path d='m586.17 405.89c-0.0699-2.11-2.5599-2.99-2.9399-4.93-0.9399-9.21 2.72-20.31-4.49-27.78-10.61-12.19-19.33-26.29-23.81-41.9-4.3499-11.94-5.5898-24.66-6.3899-37.24 0.11-11.78 0.01-23.55-0.01-35.33 6.02-1.67 13.06-0.7 18.12-4.99-0.14-1.58 0.41-3.4-0.63-4.77-1.55-2.4-4.8201-1.9-7.25-2.54-0.54-0.88-1.0701-1.76-1.6001-2.64 0.3901-2.91 2.4102-6.3 0.1702-8.9-1.3601-2.18-4.27-1.85-6.3201-2.9-3.1001-2.31-1.14-6.67-1.5601-9.94-0.4399-3.84 0.42-7.96 4.01-10.04 0.0901-0.95 0.1801-1.89 0.28-2.84-2.0601-2-2.78-4.67-2.37-7.47 4.1801-3.46 8.4301-7.2 10.25-12.5 3.58-7.33 1.4401-15.88-2.2999-22.67-4.26-5.89-10.25-10.15-15.35-15.24-3.52-3.63-8.63-6.13-10.29-11.23 3-2.21 8.24-2.29 8.1501-7.19-3.9353-2.8415-9.0225-1.4072-13.533-1.85h-18.821c-1.3071 0.143-2.4548 0.5644-3.076 1.96-0.7201 4.24 3.99 5.15 7.0499 5.84 0.14 0.56 0.42 1.67 0.55 2.22-6.09 7.22-14.15 12.48-20.88 19.08-8.04 6.71-12.3 18.7-7.93 28.61 2.01 5.41 6.69 9.05 10.5 13.14 0.3 2.99-1.5999 5.23-3.21 7.49-0.5699 2.47 2.73 3.41 4.15 4.88 0.1801 4.91 0.28 9.83 0.13 14.74 0.15 1.75-1.5801 2.6299-2.5901 3.74-1.7799 0.15-4.1299-0.4-5.2899 1.37-2.5 2.85 0.35 6.6-0.28 9.87-1.3 2.52-4.65 1.58-6.93 2.38-2.77 0.44-2.31 3.74-2.53 5.81 3.88 6 11.63 4.33 17.52 6.34-0.1 25.14 1.0299 51.15-8.0601 75.06-1.5099 5.93-3.72 11.73-7.22 16.78-4.69 8.08-9.79 16.04-16.39 22.72-2.15 2.52-4.23 5.49-4.29 8.94-0.19 6.47 0.3 12.97-0.32 19.43-3.84 2.67-3.63 7.58-4 11.74 0.34 0.58 1.01 1.75 1.35 2.33 6.6801 2.56 13.98 2.21 20.99 2.8 21.36 2.47 42.88 1.64 64.34 1.67 12.99-1.03 26.09-0.84 38.98-2.98 1.99-0.1 3.5-1.36 4.8199-2.72-0.2297-2.7902-0.3197-5.5902-0.6998-8.3502z' />
          </clipPath>
          <linearGradient id="PintGradient" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#005"/>
        <stop offset="50%" stopColor="#fff" stopOpacity="0"/>
        <stop offset="100%" stopColor="#f0f"/>
      </linearGradient>
        </defs>
        <g>
          <rect className='rectBefore' width='1497' height='504' />
          <rect className='rectAfter' width='1497' height='504' />
        </g>
      </svg>
    </StyleSlidingSvg> 
  );
};

export default SlidingSvg;

 

 

---

읽어주셔서 감사합니다 좋은 하루 보내세요~

 

 

 

 

참조

https://pixabay.com/images/id-2025120/

 

https://stackoverflow.com/questions/32579417/how-to-make-a-css3-clip-path

How to make a CSS3 Clip Path

https://stackoverflow.com/questions/30748359/hide-overflow-for-inner-g-element-inside-svg-element

Hide overflow for inner g element inside svg element

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

 

---