모든 이미지 도구

브라우저에서 움직이는 빛의 패턴을 디자인하세요. 선을 휘고 색을 정해 끊김 없는 루프를 MP4, WebM, GIF, PNG, 라이브 코드로 내보냅니다. 무료.

무료

룩으로 시작하기

내 기기에서 만들어지며, 아무것도 업로드되지 않습니다.

Saved designs
0
Your saved designs will appear here.

애니메이션 패턴 생성기 소개

애니메이션 패턴 생성기는 움직이는 빛의 패턴을 만드는 무료 스튜디오입니다. 색색의 선이 그래픽 카드로 실시간 그려지므로 변경 사항이 바로 보입니다. 부채, 터널, 나선, 꽃, 등고선 지도, 회전하는 지구본, 회로 칩 등 다양한 패턴이 있습니다. 완성된 룩에서 시작해 선, 색상, 움직임을 다듬어 브랜드에 꼭 맞는 패턴을 만드세요.

선을 손으로 휘게 하거나, 단어나 로고의 윤곽을 따라 흐르게 할 수 있고, 이미지에서 팔레트를 가져오거나 브랜드 색상을 붙여넣을 수도 있습니다. 모든 애니메이션은 정수 주기로 만들어져 마지막 프레임이 첫 프레임으로 곧바로 이어지므로 루프가 튀지 않습니다.

최대 4K의 MP4 또는 WebM 동영상, GIF, 최대 8K의 PNG, JPG, WebP 이미지를 내보낼 수 있으며, 형식이 지원하면 배경을 투명하게 할 수 있습니다. 라이브러리 없이 어떤 웹사이트에서든 패턴을 실행하는 라이브 코드를 복사할 수도 있습니다. 모든 작업은 내 기기에서 이루어지며 아무것도 업로드되지 않습니다.

애니메이션 패턴 생성기 사용 방법

  1. 시작할 룩을 고르거나 랜덤 생성을 눌러 새 디자인을 만드세요.
  2. 패턴을 고르고 선을 조정하세요. 그림을 드래그해 중심을 옮기거나, 단어를 입력해 그 주위로 선이 흐르게 할 수 있습니다.
  3. 팔레트를 고르거나, hex 코드를 붙여넣거나, 이미지에서 색상을 가져오세요.
  4. 움직임, 루프 길이, 속도를 설정한 다음 글로우, 3D 튜브, 플루티드 글라스, 필름 그레인으로 룩을 마무리하세요.
  5. 프레임 모양을 고르세요. 16:9, 정사각형, 세로, 스토리, 배너, 사용자 지정 크기 중에서 선택할 수 있습니다.
  6. 동영상, GIF 또는 이미지로 내보내거나, 코드를 복사해 웹사이트에서 실시간으로 실행하세요.

자주 묻는 질문

네. 워터마크도 계정도 없이 원하는 만큼 패턴을 만들고 내보낼 수 있습니다. 계정은 디자인을 저장해 나중에 다시 열 때만 필요합니다.

네. 모든 움직임이 정수 주기로 이루어져 있고 각 프레임은 루프 안의 정확한 위치에서 계산되므로, 마지막 프레임이 첫 프레임으로 곧바로 이어집니다. 파일은 화면을 녹화한 것이 아니어서 느린 컴퓨터에서도 매끄럽습니다.

동영상은 MP4 또는 WebM(최대 4K, 초당 24, 30, 60프레임), 애니메이션 GIF, 이미지는 PNG, JPG, WebP(최대 8K)를 지원합니다. 웹사이트용 라이브 코드 복사, 이미지를 클립보드로 복사, 디자인 링크 복사도 가능합니다.

네. PNG 및 WebP 이미지와 라이브 코드에서 가능합니다. MP4, WebM, GIF, JPG 파일에서는 대신 배경색이 사용됩니다.

네. 텍스트 또는 로고 패턴을 고른 다음 단어를 입력하거나 이미지를 선택하세요. 선이 그 윤곽을 따라 흐릅니다. 배경이 투명한 PNG 또는 SVG가 가장 깔끔하게 나오며, 파일은 기기 밖으로 나가지 않습니다.

내보내기 단계에서 코드 탭을 열고 코드를 페이지에 복사하세요. 라이브러리가 필요 없고 이 사이트로 요청을 보내지도 않습니다. 화면 밖에서는 일시정지되며, 모션을 끈 방문자에게는 정지 이미지를 보여 줍니다.

WebGL 2가 켜져 있는 최신 Chrome, Edge, Firefox, Safari라면 모두 사용할 수 있습니다. 동영상 내보내기에는 브라우저의 동영상 인코딩 지원도 필요하며, 지원하지 않아도 GIF와 이미지는 내보낼 수 있습니다.


인기 검색어
애니메이션 패턴 생성기 움직이는 배경 만들기 끊김 없는 루프 영상 만들기 그라데이션 애니메이션 배경 모션 배경 제작 제너레이티브 패턴 만들기 온라인 애니메이션 선 패턴 반복 배경 영상 브랜드 애니메이션 패턴 WebGL 배경 생성기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.
문제 신고

이 무료 도구를 귀하의 웹사이트에 추가하세요: 아래 코드를 복사하여 붙여넣으세요.