[ 항해99 실전프로젝트 ] 로고를 SVG로 다루어보자! ( 2 )

그려지는 애니메이션 다음으로 네온사인효과를 내야한다.

 

아래와 같이 깜빡거리는 전광판 느낌의 네온사인효과를 만들어내야한다.

 

출처 :https://itblog.bcafe75.com/entry/CSS

 

네온사인효과는 text-shadow를 사용하여 만드는 데, text-shadow는 아래와 같이 4개의 값을 넣을 수 있다.

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

 

처음 2개는 각각 그림자의 가로 및 세로 위치를 나타내며, 세 번째는 흐림 반경의 크기를 나타내고 마지막은 그림자의 색상을 나타낸다.

 

 

하지만 위의 경우는 텍스트이고, 우리는 svg를 다루기 때문에 svg에 그림자효과를 넣는 방법을 따로 찾아야한다.

 

 

svg태그에 효과를 주기위해서는 filter를 따로 만들어주어야 합니다. ( defs태그 안에 만들어줘야합니다! )

<defs>
//이런식으로 필터 안에 효과를 넣어줍니다.
<filter id="">
//아래 feOffset과 feBlend를 통해, 그림자를 만들어줍니다.
//여기서 dx와 dy를 통해, 그림자의 위치를 조절할 수 있습니다.
<feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>

그림자효과를 위해 feoffset과 feblend를 통해 그림자효과를 처리합니다.

 

<fe...>태그들 기능정리

• 뒤에 기능들이 영문으로 붙음
• <feBlend> : 이미지 결합용 필터
• <feColorMatrix> : 색상 변환을 위한 필터
• <feOffset> : 그림자를위한 필터
• <feDistantLight>, <fePointLight>, <feSpotLight> : 조명용 필터

 

그림자가 적용된 로고

 

이제 위의 그림자에 색을 입히고, 흐림처리를 하면 네온사인과같은 효과를 만들 수 있을 것 같다.

<feGaussianBlur in="SourceGraphic" stdDeviation="15" />

 

위의 코드를 넣어, 필터 안에 위의 블러효과를 주는 fe태그를 넣어준다. 

여기서 stpDeviation은 흐림의 양을 조절할 수 있는 값이다.

 

또 <feColoreMatrix>를 이용해, 그림자의 색상을 조절해주어야 한다.

 

 <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />

-  "feColorMatrix는 오프셋 이미지의 색상을 검은 색에 가깝게 변환하는 데 사용됩니다. 행렬에서 '0.2'의 세 가지 값은 모두 빨강, 녹색 및 파랑 채널로 곱해집니다. 값을 줄이면 색상이 검은 색에 가까워집니다 (검정은 0)"  이렇다고 한다.

 

 

 

블러 및 컬러처리 후 모습

 

 

	<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
	</filter>

 

완성된 필터코드의 모습이다. 지금 현재, 각 path의 구역이 딱 path크기만큼만 사각형으로 나누어져있어 그림자가 짤리는 사태가 벌어졌다.  이후에 어떻게 짤리는 부분을 해결할 지 생각해봐야겠다.

 

 

왜 짤리냐;';;

 

 

 

 

참고자료 :  https://ossam5.tistory.com/117

[HTML기초문법] 16강 SVG태그의 effect와 gradient - 오쌤의 니가스터디