SVG filter? filter noise? txt animation어떻게 만들어야 할까요..

[이승헌]

(해당 gif는 팀 프로젝트 서비스 명입니다. 디자인 친구들이 만들어 준...:))
이런 애니메이션 기능을 만들고 싶은데 보통 svg나 canvas로 만든다고 합니다
그런데 svg나 canvas로 어떻게 만드는 것인지 레퍼런스가 있어야 어떻게 만들어야할지 감이라도 잡힐텐데
이런 형태의 애니메이션을 쓴 웹사이트나 기능을 찾기가 너무 어렵네요..

제가 시도 해봤던건 캔버스에 pixelSize를 저장해두고 배열에 x,y 좌표 값을 입력하여 픽셀이 찍히게도 진행을 해봤고,
MOSS text에 노이즈 gif를 background-image에 넣고 -webkit-filter: blur(10px) grayscale(.3); -webkit-background-clip: text;
-webkit-text-fill-color: transparent; 이렇게 총 두 가지 해보았습니다.
힌트 요청 부탁드립니다람쥐...

아래에 있는 링크는 같은 대학 디자인 친구들이 보내준 레퍼런스입니다.
1. https://thisisgrey.tumblr.com/post/185364075163/andren-via
2. https://lamalama.nl/

[codingapple]

100x100 사이즈 박스로 캔버스를 채우고
원래이미지에서 왼쪽부터 0, 100, 200 ... 번째 픽셀의 색상을 뽑아서 각 박스에 칠해달라고 합시다 
그리고 점점 90 80 이렇게 줄여가면되거같은데
pixelate 해주는 라이브러리 쓰면 편할듯요

[이승헌]

코딩애플 센세 성공했습니다!!!!!!!!!!!!!!!!!!!!!!!!!!!! 장장 2일 반만에 크흡...

https://lamalama.nl/ 이 사이트의 로고처럼 픽셀이 변형되며 애니메이션(하트, 웃는 이모티콘 등)이 진행되는 것은

svg path를 이용해서 하면 편할까요??

[codingapple]

그냥 시간지나면 차례로 박스위치변경하면될거같은데 svg는 별로 안편할수도요

[글쓴이]

글