FrontEnd/css

[css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기

김평범님 2021. 1. 1. 22:25
반응형

🙄 SVG란?

SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다.

SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고

백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다.

SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다

 

 

SVG를 사용하는 이유는?

png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까?

 

- SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며

- 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며

- css를 통해 다양한 효과를 줄 수 있음

 

 

단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며,

단순한 내용이 아닌 복잡한 SVG를 구현하게 된다면, 오히려 속도가 느려질 수 있는 위험이 있다.

 

하지만, 내가 SVG를 사용해야겠다고 생각하게 된 것은

이미 많은 사람들이 SVG를 활용하여 다양한 효과를 가지는 웹페이지를 만들어내고 있기 때문이다.

역동적인 웹 페이지를 구성하길 원하거나, 고화질의 이미지를 제공하고 싶다면

SVG에 대해 관심을 가질 필요가 있다.

 

 

 

 

 

😁 SVG를 사용해보자

SVG 호출하기

html 태그 중 <svg> 태그를 사용하면 svg파일을 불러올 수 있는 준비가 된다.

svg를 사용할 크기는 width와 height 속성으로 지정할 수 있다.

그다음 viewBox속성을 이용하면 svg 요소의 기준점과 배율을 정할 수 있다.

 

viewBox는 총 4개의 숫자를 가지고 있다.

viewBox  = min-x, min-y, width, height

 

밑의 코드로 width 525px, height 160px 구역으로 만든 뒤

viewBox속성으로 X축 0에서 525px, y축 0에서부터 높이가 160인 viewBox를 설정해줍니다.

즉 1 배율의 svg 요소를 보여줄 SVG구역이 만들어진 것이다.

 

<svg width=525 height=160 viewBox="0 0 525 160">
</svg>

 

 

SVG에 TEXT 그려주기

<svg> 내부에 <text> 속성을 이용하면 SVG 안에 TEXT를 써넣을 수 있다.

<text>가 SVG 어느 좌표에 있을지를 작성해 줘야 한다. 

X좌표는 0 높이는 가운데 정렬을 위해 y좌표 50%를 지정해준다. 

 

CSS 코드

@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

body {
  width: 100%;
  height: 100%;
  background: #16345A;
  padding: 0;
  margin: 0;
}


svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
}

HTML 코드

 <svg width=525 height=160 viewBox="0 0 525 160">
  <text>ORDINARY CODE</text>
 </svg>

결과 화면

SVG TEXT로 그려진 화면

 

기존 Text로 작성한 것과 화면상에서는 동일하다.

하지만 이제 SVG에서 제공하는 효과, Animation 효과를 활용해보자.

 

 

 

SVG에 TEXT에 효과 넣어주기

fill

text 컬러 넣기 위해서 사용하는 속성은 fill이다.

SVG에서 색상을 추가하기 위해서는 기존 font에서 color 속성이 아닌 fill을 이용해야

SVG text에 컬러를 넣는 게 가능하다.

 

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  fill:#F1C164;
}

svg text에 fill 적용 화면

 

 

stroke

svg에서 text에 외곽선을 그리기 위한 속성은 stroke를 이용하면 된다.

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  stroke:#F1C164;
}

svg text에 stroke 적용 화면

 

 

stroke-width

svg 내 stroke에서는 여러 가지 효과를 주는 게 가능하다.

stroke-width의 경우 외곽선의 두께를 조절할 수 있다.

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  stroke:#F1C164;
  stroke-width: 3px;
}

 

svg text에 stroke-width 적용 화면

 

 

 

stroke-dasharray

skroke-dasharray를 이용하면 그려진 외곽선의 점선 두께와 두께 사이의 간격을 지정할 수 있다.

하나의 숫자를 지정하면 해당 픽셀의 선과 해당 픽셀만큼 간격이 띄워진다.

 svg text {
   font-family: 'Staatliches', cursive;
   font-size: 6em;
   stroke:#F1C164;
   stroke-width: 3px;
   stroke-dasharray: 5px;
 }

svg text에 stroke-dasharray 적용 화면

 

stroke-dasharray에서 2가지 숫자를 지정하면

첫 번째 숫자로 외곽선의 길이를 정할 수 있고 두 번째 숫자로 다음 외곽선 사이의 간격을 설정할 수 있다.

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  stroke:#F1C164;
  stroke-width: 3px;
  stroke-dasharray: 5px 20px;
}

svg text에 stroke-dasharray 적용 화면

 

 

 

stroke-dashoffset

stroke-dashoffset을 이용하면 점선의 시작 간격을 지정할 수 있다.

각각 dashoffset 숫자 설정에 따라 dash 외곽선이 다른 위치에서 지정되는 것을 볼 수 있다.

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  stroke:#F1C164;
  stroke-width: 3px;
  stroke-dasharray: 60px;
  stroke-dashoffset: 0;
}

(왼쪽)stroke-dashoffset :0, (중앙) stroke-dashoffset:20px, (오른쪽) stroke-dashoffset : 60px

 

 

 

 

 

 

💡 svg stroke기능을 이용해 tex가 그려지는 효과 만들기

text가 그려지는 효과를 하기 위해서

stroke-dasharray와 sotroke-dashoffset기능을 활용해서 만들 수 있다.

 

방법은 text 내 stroke-dasharray 길이를 text 전체를 감싸는 길이를 지정한 뒤,

storke-dashoffset을 dasharray와 같은 숫자로 지정하여 처음에 아무런 선이 보이 않도록 한다.

 

그다음 animation 효과를 주어 stroke-dashoffset를 0으로 만들어 모든 선이 표시되도록 만드는 원리이다.

 

전체 글자를 감싸는 stroke-dasharray 숫자를 확인한다.
stroke-dasharray와 같은 값을 값으로 줄 경우 Stroke가 모두 안보이는걸 확인할 수 있다.

 

css 코드

svg text {
  font-family: 'Staatliches', cursive;
  font-size: 6em;
  stroke:#F1C164;
  stroke-width: 3px;
  stroke-dasharray: 326px;
  animation: stroke 3s linear;
}
@keyframes stroke {
  0%   {
  stroke-dashoffset: 326px;
  }
  100% {
  stroke-dashoffset: 0px;
  }
}

결과 화면

 

 

응용하기

위의 코드의 경우 모든 글자가 한 번에 작성되고, 검은 글씨가 보이는 상태이다.

 

이제 아무것도 그려지지 않은 화면에

한 글자 씩 작성되는 코드로 활용해서 바꿔보겠다.

 

최종 코드

<html>
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

        body {
            width: 100%;
            height: 100%;
            background: #16345A;
            padding: 0;
            margin: 0;
        }

        .text-box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        svg text {
            font-family: 'Staatliches', cursive;
            font-size: 6em;
            fill:transparent;
            stroke-dasharray: 326px;
            animation: stroke 1s linear;
            animation-fill-mode: forwards;
        }
        svg text:nth-child(1) {
            animation-delay: 0s;
        }
        svg text:nth-child(2) {
            animation-delay: 0.5s;
        }
        svg text:nth-child(3) {
            animation-delay: 1s;
        }
        svg text:nth-child(4) {
            animation-delay: 1.5s;
        }
        svg text:nth-child(5) {
            animation-delay: 2s;
        }
        svg text:nth-child(6) {
            animation-delay: 2.5s;
        }
        svg text:nth-child(7) {
            animation-delay: 3s;
        }
        svg text:nth-child(8) {
            animation-delay: 3.5s;
        }
        svg text:nth-child(9) {
            animation-delay: 4s;
        }
        svg text:nth-child(10) {
            animation-delay: 4.5s;
        }
        svg text:nth-child(11) {
            animation-delay: 5s;
        }
        svg text:nth-child(12) {
            animation-delay: 5.5s;
        }
        @keyframes stroke {
            0%   {
                stroke:#F1C164;
                stroke-width: 3px;
                stroke-dashoffset: 326px;
            }
            70% {
                fill: transparent;
            }
            98% {
                stroke:#F1C164;
                stroke-width: 3px;
            }
            100% {
                fill: #F1C164;
                stroke-dashoffset: 0px;
            }
        }
    </style>
</head>
<body>
<div class="text-box">
    <div class="text-wrap">
        <svg width=525 height=160 viewBox="0 0 525 160">
            <text x="0" y="50%">O</text>
            <text x="45" y="50%">R</text>
            <text x="90" y="50%">D</text>
            <text x="135" y="50%">I</text>
            <text x="155" y="50%">N</text>
            <text x="199" y="50%">A</text>
            <text x="240" y="50%">R</text>
            <text x="285" y="50%">Y</text>
            <text x="350" y="50%">C</text>
            <text x="395" y="50%">O</text>
            <text x="440" y="50%">D</text>
            <text x="485" y="50%">E</text>
        </svg>
    </div>
</div>
</body>
</html>

 

최종 화면

최종코드가 적용된 결과 화면

반응형