애니메이션 패턴 생성기
브라우저에서 움직이는 빛의 패턴을 디자인하세요. 선을 휘고 색을 정해 끊김 없는 루프를 MP4, WebM, GIF, PNG, 라이브 코드로 내보냅니다. 무료.
룩으로 시작하기
선 모양 다듬기
배경이 투명한 PNG 또는 SVG가 가장 좋습니다. 파일은 기기 밖으로 나가지 않습니다.
그림 위의 노드 4개를 드래그해 선을 휘어 보세요.
그림을 드래그해 패턴의 중심을 옮기세요.
색상 고르기
선 색상움직임 설정하기
룩 마무리하기
인쇄 효과내보내기
그림에 표시된 프레임을 내보냅니다. 다른 프레임을 고르려면 시간 슬라이더를 움직이세요.
이 브라우저는 동영상 인코딩을 지원하지 않습니다. 최신 Chrome, Edge, Firefox 또는 Safari를 사용하거나 GIF로 내보내세요.
GIF는 256색으로 제한됩니다. 부드러운 그라데이션과 작은 파일 크기를 원하면 동영상으로 내보내세요.
이 코드를 아무 웹페이지에 붙여넣으면 패턴이 실시간으로 실행됩니다. 라이브러리가 필요 없고, 어떤 크기에서도 선명하며, 화면 밖에서는 멈춥니다.
텍스트 및 로고 패턴은 아직 코드로 실행할 수 없습니다. 동영상이나 이미지로 내보내세요.
이 형식은 투명도를 지원하지 않아 배경색이 사용됩니다.
이 도구는 WebGL 2가 필요하지만, 이 브라우저나 기기에서 꺼져 있습니다. 브라우저 설정에서 하드웨어 가속을 켜거나 다른 브라우저를 사용해 보세요.
내 기기에서 만들어지며, 아무것도 업로드되지 않습니다.
Saved designs
0애니메이션 패턴 생성기 소개
애니메이션 패턴 생성기는 움직이는 빛의 패턴을 만드는 무료 스튜디오입니다. 색색의 선이 그래픽 카드로 실시간 그려지므로 변경 사항이 바로 보입니다. 부채, 터널, 나선, 꽃, 등고선 지도, 회전하는 지구본, 회로 칩 등 다양한 패턴이 있습니다. 완성된 룩에서 시작해 선, 색상, 움직임을 다듬어 브랜드에 꼭 맞는 패턴을 만드세요.
선을 손으로 휘게 하거나, 단어나 로고의 윤곽을 따라 흐르게 할 수 있고, 이미지에서 팔레트를 가져오거나 브랜드 색상을 붙여넣을 수도 있습니다. 모든 애니메이션은 정수 주기로 만들어져 마지막 프레임이 첫 프레임으로 곧바로 이어지므로 루프가 튀지 않습니다.
최대 4K의 MP4 또는 WebM 동영상, GIF, 최대 8K의 PNG, JPG, WebP 이미지를 내보낼 수 있으며, 형식이 지원하면 배경을 투명하게 할 수 있습니다. 라이브러리 없이 어떤 웹사이트에서든 패턴을 실행하는 라이브 코드를 복사할 수도 있습니다. 모든 작업은 내 기기에서 이루어지며 아무것도 업로드되지 않습니다.
애니메이션 패턴 생성기 사용 방법
- 시작할 룩을 고르거나 랜덤 생성을 눌러 새 디자인을 만드세요.
- 패턴을 고르고 선을 조정하세요. 그림을 드래그해 중심을 옮기거나, 단어를 입력해 그 주위로 선이 흐르게 할 수 있습니다.
- 팔레트를 고르거나, hex 코드를 붙여넣거나, 이미지에서 색상을 가져오세요.
- 움직임, 루프 길이, 속도를 설정한 다음 글로우, 3D 튜브, 플루티드 글라스, 필름 그레인으로 룩을 마무리하세요.
- 프레임 모양을 고르세요. 16:9, 정사각형, 세로, 스토리, 배너, 사용자 지정 크기 중에서 선택할 수 있습니다.
- 동영상, GIF 또는 이미지로 내보내거나, 코드를 복사해 웹사이트에서 실시간으로 실행하세요.