[에스비지] SVG -(13편)- 패턴만들기 (2/2) (feat. keyframes, animation, transform-origin, ...)

패턴 만들기

Pattern

 

 

이번에는,

svg를 body안에 넣는것이 아니라,

 

css로 body태그의 background로 이미지를 링크해서 깔아 줄 것이다.

지난번에 사용한 face_hair.svg 파일을 사용하겠다.

<style>
    body {
      background: url('face_hair.svg');
    }
  </style>

그럼 이렇게 작게 나온다.

확대하면,

 

 

지난번에 머리 그라데이션 준걸

그대로 사용한 것이다.

 

확대를 하지말고,

이미지 사이즈를 키우면 된다.

 

 

 <style>
    body {
      background: url('face_hair.svg');
      background-size: 10em;
    }
  </style>

 

그러면,

 

얼마든지 키울 수 있다.

 

 

 

 

자 여기서 만약에!!!,

 

 

저 이모티콘의 한쪽눈을 깜빡이는 애니메이션을 하고 싶다면,

직접 해당 svg 파일에서 css 애니메이션을 주면 된다.

 

<svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.79 347">
  <defs>
    <style>
    <![CDATA[
    .cls-1,.cls-3,.cls-4{fill:none;stroke:#231815;stroke-miterlimit:10;}
    .cls-1{stroke-width:10px;}
    .cls-2{fill:#231815;}
    .cls-3{stroke-linecap:round;stroke-width:11px;}
    .cls-4{stroke-width:5px;}
    .gradient-hair {
      fill: url('#gradient-hair');
    }
    .left-eye {
      animation: wink 0.5s infinite alternate;
        transform-origin: 154.13px 162.94px;
    }
    @keyframes wink {
      to {
        transform: scaleY(0.2) skewY(-10deg);
      }
    }
    ]]>
    </style>
    <radialGradient id="gradient-hair">
      <stop offset="0%" stop-color="yellow"></stop>
      <stop offset="50%" stop-color="hotpink"></stop>
      <stop offset="100%" stop-color="deepskyblue"></stop>
    </radialGradient>
  </defs>
  <title>face_hair</title>
  <circle class="cls-1" cx="213.63" cy="186" r="156"/>
  <circle class="cls-2" cx="273.13" cy="162.94" r="23.06"/>
  <circle class="cls-2 left-eye" cx="154.13" cy="162.94" r="23.06"/>
  <path class="cls-3" d="M375.86,289.81a100,100,0,0,1-175.47,0" transform="translate(-74.5 -49.78)"/>
  <path class="cls-2 gradient-hair" d="M414.24,105.35a30,30,0,0,0-29.67-25.57c-.83,0-1.64,0-2.45.11a30,30,0,0,0-40-15.41,30,30,0,0,0-42.42-5.72,30,30,0,0,0-40.33-2.25,30,30,0,0,0-39,7.82,30,30,0,0,0-42,24.7,30,30,0,0,0-24,26.66,30,30,0,1,0,35.74,32.18,30,30,0,0,0,24-26.67,30,30,0,0,0,18-11.3,30,30,0,0,0,31-4.18,30,30,0,0,0,33.47-2.25,30,30,0,0,0,33.82,6.28,29.92,29.92,0,0,0,24,12c.83,0,1.64,0,2.45-.11a30,30,0,0,0,23.88,17.88,30,30,0,1,0,33.34-34.2Z" transform="translate(-74.5 -49.78)"/>
  <ellipse class="cls-4" cx="29.83" cy="196.33" rx="27.33" ry="36.33"/>
  <ellipse class="cls-4" cx="396.96" cy="196.33" rx="27.33" ry="36.33"/>
  <polygon class="cls-2" points="398.29 218.22 402.27 230.49 415.17 230.49 404.74 238.06 408.72 250.32 398.29 242.75 387.86 250.32 391.85 238.06 381.42 230.49 394.31 230.49 398.29 218.22"/>
  <polygon class="cls-2" points="28.96 218.22 24.98 230.49 12.08 230.49 22.51 238.06 18.53 250.32 28.96 242.75 39.39 250.32 35.4 238.06 45.83 230.49 32.94 230.49 28.96 218.22"/>
</svg>

세번째 circle에 left-eye라는 클래스명을 추가 지정하였다.

 

그리고나서 keyframes 로 눈이 감기듯이 세로길이가 작아졌다 돌아와야 하니까

scaleY 값으로 transform을 통해 조정해줬다.

 

그리고 애니메이션을 left-eye에 연결해주고

무한반복 infinite 과 애니메이션이 앞으로 갔다 뒤로 돌아왔다를 반복하도록 alternate를 줘서

좀더 자연스럽게 만들었고,

 

transform-origin의 기본이 left top 혹은 0 0 이므로,

left-eye의 중심값 cx와 cy값으로 중심을 잡아줬다.

 

그리고 살짝 쳐진눈을 만들고 싶어서 skewY 값으로 돌려줬다.

그렇게 하면,

 

이런 모습이 나온다.

 

 

그럼 다시 이것을 body의 배경으로 깔았던 html로 돌아오면,

이런식으로 배경 전체가 눈을 깜빡이고 있는 패턴을 사용할 수 가 있다.

 

패턴을 사용안하겠고 하나의 이미지만 쓰겠다면,

 

background-repeat: no-repeat;

 

해주면 하나만 깔린다.