Softonic

SVG 블롭 생성기

단계 1 / 2
다음

블롭 형태는 2018년 무렵 현대 UI의 “친근한 둥근 배경”으로 완벽한 원을 대체했습니다, 히어로 일러스트 뒤, 아바타 마스크, 랜딩 페이지의 색 얼룩으로 등장합니다. 이 생성기는 원 주위의 랜덤 워크에서 블롭을 만든 다음, 다각형을 이차 베지에 곡선으로 매끄럽게 다듬어 디자이너가 원하는 유기적이고 살짝 울퉁불퉁한 형태로 만듭니다. 제어점 개수(복잡도), 워크가 얼마나 거칠어지는지(대비), 랜덤 시드를 조절한 뒤 SVG를 복사하세요.

블롭이 만들어지는 방법

  1. 1

    색상과 복잡도 선택

    복잡도는 제어점 개수(3-12)를 설정합니다. 점이 많을수록 굴곡이 많아집니다.

  2. 2

    대비 설정

    대비는 각 점이 기준 반지름에서 얼마나 벗어나는지를 제어합니다. 낮은 대비 = 거의 원형, 높은 대비 = 공격적으로 돌출된 형태.

  3. 3

    시드 선택

    시드는 블롭 형태를 고정하는 난수입니다. 같은 시드, 같은 블롭. 무작위 버튼을 누르면 새 것을 얻습니다.

  4. 4

    SVG 복사

    400×400 viewBox 안에 단일 `<path>`를 얻습니다. SVG가 지원되는 어디에든 넣으세요.

블롭 path의 구조

생성기는 400×400 viewBox 주위에 N개의 점을 고르게 분포시키고(중심 200, 200; 기준 반지름 130), 각 반지름을 ±contrast만큼 교란한 다음, 모든 쌍을 이차 베지에 곡선으로 연결합니다:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy는 현재 점과 다음 점의 중간점입니다, 각 곡선의 끝을 거기에 두는 것이 다각형을 유기적 형태로 둥글게 만듭니다.

파라미터 치트시트

설정 범위 효과
복잡도 3-12 돌출부 개수. UI에는 5-7이 최적입니다.
대비 0-100 랜덤 워크의 진폭. 30-60이 자연스러워 보입니다.
시드 1-9999 결정론적; 같은 시드 = 실행 간 같은 블롭.
색상 hex 단일 fill, stroke 없음. 필요하면 fill-opacity를 수동 추가.

블롭이 가장 잘 어울리는 곳

  • 배경 장식, 제목 뒤, 히어로 섹션의 빈 구석.
  • 아바타 마스크, path를 clip-path로 적용해 유기적인 인물 프레임을 만듭니다.
  • 일러스트 강조, 아이콘이나 숫자 아래 브랜드 색 얼룩.
  • 이미지 마스크, CSS mask-image로 블롭이 사진을 유기적 컷아웃으로 잘라냅니다.

팁

  • 배경에는 stroke 없는 블롭을 유지하세요. stroke가 있으면 스티커처럼 보입니다.
  • 애니메이션 모핑을 원하면 같은 복잡도와 다른 시드로 블롭 두 개를 생성한 다음, flubber나 svg-morpheus 같은 라이브러리로 d 속성을 애니메이션하세요.
  • <img src=blob.svg> 대신 SVG를 인라인하세요, 런타임에 CSS 변수로 fill 색상을 바꿀 수 있습니다.
  • 블롭이 어떤 컨테이너에든 맞춰 확대되길 원하면 viewBox는 유지하되 명시적인 width="400" height="400"은 제거하세요.

자주 묻는 질문

시드는 랜덤 워크 전에 PHP의 srand()를 초기화합니다. 같은 시드 = 같은 rand() 호출 시퀀스 = 같은 점 오프셋 = 동일한 path입니다.

네, 단 두 path의 명령 수와 점 개수가 같을 때만요. 복잡도를 동일하게 유지하고 시드만 바꿔 보간하기 쉬운 쌍을 얻으세요. 실제 애니메이션에는 GSAP MorphSVG나 flubber 같은 트위닝 라이브러리를 사용하세요.

path의 fill="#hex"를 fill="url(#gradient-id)"로 바꾸고 <defs> 블록 안에 <linearGradient> 또는 <radialGradient> 정의를 추가하세요. SVG를 인라인하면 CSS 사용자 정의 속성도 동작합니다.

깔끔하지만 minify되지는 않았습니다. 바이트 크기가 신경 쓰이면 SVGO를 한 번 돌리세요. 보통 문자의 20-30%를 줄일 수 있습니다.

아니요. SVG는 URL 폼의 파라미터로부터 즉석에서 생성되며 아무것도 기록되지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다