전체 글
-
[에스비지] SVG -(20편)- SMIL 애니메이션 alternate하기 (feat. values, keyTimes)SVG 2021. 2. 9. 20:07
#에스비지 #에스브이지 ###스밀애니메이션 #스밀 #fill #freeze #indefinite https://blog.naver.com/nicholasdw/222238055995 [에스비지] SVG -(20편)- SMIL 애니메이션 alternate하기 (feat. values, keyTimes) #svg #에스비지 #에스브이지 #SMIL #SMILAnimation #스밀애니메이션 #스밀 #fill #freeze #indefi... blog.naver.com
-
[에스비지] SVG -(19편)- 자바스크립트를 이용한 SMIL 애니메이션 제어 (feat. begin, beginElement, DOMContentLoaded)SVG 2021. 2. 9. 20:05
https://blog.naver.com/nicholasdw/222238003640 [에스비지] SVG -(19편)- 자바스크립트를 이용한 SMIL 애니메이션 제어 (feat. begin,beginElement, DOMContentLo #svg #에스비지 #에스브이지 #SMIL #SMILAnimation #스밀애니메이션 #스밀 #fill #freeze #indefi... blog.naver.com
-
[에스비지] SVG -(18편)- SMIL 애니메이션 (feat. animate, attributName, dur, to, repeatCount, indefinite, fill, indefinite, repeatCount, freeze)SVG 2021. 2. 9. 20:01
https://blog.naver.com/nicholasdw/222237961256 [에스비지] SVG -(18편)- SMIL 애니메이션 (feat. animate, attributName, dur, to, repeatCount, indefinite, fill, #svg #에스비지 #에스브이지 #SMIL #SMILAnimation #스밀애니메이션 #스밀 #fill #freeze #indefi... blog.naver.com
-
[에스비지] SVG -(17편)- mask와 stroke animation (feat. mask, stroke-dasharray, stroke-dashoffset)SVG 2021. 2. 8. 17:40
https://blog.naver.com/nicholasdw/222236600662 [에스비지] SVG -(17편)- mask와 stroke animation (feat. mask, stroke-dasharray, stroke-dashoffset) #mask #stroke #strokeAnimation #stroke-dasharray #stroke-dashoffset #svg #에스지비 #에스지비스트로... blog.naver.com
-
[에스비지] SVG -(16편)- stroke animation 스트로크 애니메이션 (feat. stroke-dasharray, stroke-dashoffset, ....)SVG 2021. 2. 8. 17:39
https://blog.naver.com/nicholasdw/222236512525 [에스비지] SVG -(16편)- stroke animation 스트로크 애니메이션 (feat. stroke-dasharray, stroke-dashoffset, ....) #svg #strokeAnimation #스트로크애니메이션 #애니메이션 #svg애니메이션 #에스지비 #에스지비애니메이션 ... blog.naver.com
-
[에스비지] SVG -(15편)- 자바스크립트를 이용한 마스크 돋보기 효과 (2/2) (feat. mask, JavaScript)SVG 2021. 2. 8. 00:09
이번 시간은, 돋보기가 마우스를 따라 움직이며 저 돋보기 안쪽부분에서만 보이도록 할 것이다. 그래서 일러스트레이터로 돋보기를 그렸다. 그럼 svg는 저 초록영역의 path와 검정부분의 circle이 있을거라고 예상이 된다. 그렇게 svg 파일을 만든다. magnifier svg 파일의 코드다. 예상대로 circle과 path가 있다. circle은 마스크 영역이 될테다. 그럼 html에 body 안에 svg태그 안에 저 path와 circle을 복사해와서 붙여넣기 하자 색상도 같이 가져오자. svg 전체 영역잡아준 뒤, path의 색상도 inline으로 바로 적어줬다. 여기까지는 아래의 모습이다. 잘 나오고 있다. 자 그럼 마스크를 씌어보자. 이전시간에 배웠던 마스크 적용하는 것을 해보자. https:/..
-
[에스비지] SVG -(14편)- 마스크 효과 (1/2) (feat. mask, id, url)SVG 2021. 2. 7. 22:25
이번에 우리가 해볼 것은 바로바로바로!!!!!!!!!!! MASK! 마스크 포토샵을 다뤄봤으면 알것이다. 필요한부분만 보이고, 원치않은 부분은 가리는 것. 자 포토샵을 열어봤다. 저기에서 노트북만 남기고 다 안보이게 하고 싶다면, 저기 빨간 박스가, 레이어 마스크를 설정하는 것이다. 레이어1 이 선택된 상태에서 저 빨간걸 누르면, 이렇게 해당 레이어에 흰색 종이모양으로 연결되 있는 것을 볼 수 있다. 그것이 선택된 채로 내가 남기고 싶은 영역을 잡는다. 나는 다각형 올가미 도구로 잡아보겠다. 우리가 마스크에 대해서 알아야 할게, 검정색으로 칠하면 안보이게 된다는 것. 즉 가리고 싶은 부분을 검게 칠하면 된다. 레이어 상태를 보면 반드시 검정 색칠은 사진이 선택된 상태가 아니라 마스크가 선택된 상태에서 해..