블롭 생성기

사용자 지정 베지어 곡선으로 유기적 SVG 모양 생성.

설정

블롭 가장자리(정점)6

뾰족함(복잡도)60%

채우기 모드

단색선형방사형

시작 색상

끝 색상

원시 SVG XML 코드

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
  <defs>
    <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b35" />
      <stop offset="100%" stop-color="#dd2c00" />
    </linearGradient>
  </defs>
  <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
</svg>

React JSX 컴포넌트

export const Blob = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="100%" height="100%">
    <defs>
      <linearGradient id="blob-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#ff6b35" />
        <stop offset="100%" stopColor="#dd2c00" />
      </linearGradient>
    </defs>
    <path d="M 290.0 148.0 Q 320.0 200.0 290.0 252.0 Q 260.0 303.9 200.0 303.9 Q 140.0 303.9 110.0 252.0 Q 80.0 200.0 110.0 148.0 Q 140.0 96.1 200.0 96.1 Q 260.0 96.1 290.0 148.0 Z" fill="url(#blob-grad)" />
  </svg>
);

작동 방식

무작위성과 복잡도를 조정해 유기적인 블롭 형태를 만듭니다.
채우기에 사용할 색상과 그라데이션을 선택합니다.
마음에 드는 형태가 나올 때까지 다시 생성합니다.
원시 SVG 코드 또는 바로 쓸 수 있는 React JSX 컴포넌트로 내보냅니다.

주요 용도

랜딩 페이지에 유기적인 배경 형태를 추가합니다.
디자인 시스템용 장식 블롭을 만듭니다.
SVG 블롭을 컴포넌트로 React 프로젝트에 곧바로 넣습니다.

참고 사항

블롭은 절차적으로 생성됩니다. 개별 점을 편집하기보다 다시 생성해 변형을 탐색하세요.
복잡도가 매우 높으면 경로 데이터가 길어집니다. 단순한 블롭이 SVG를 가볍게 유지합니다.

자주 묻는 질문

블롭을 React에서 바로 쓸 수 있나요?

네 — JSX 컴포넌트로 내보내 프로젝트에 넣거나, 다른 스택을 위해 원시 SVG를 가져가세요.

이후 형태를 편집할 수 있나요?

내보낸 SVG는 표준 벡터라 어떤 편집기에서도 미세 조정할 수 있습니다. 다만 도구 자체는 점 편집이 아니라 재생성으로 작동합니다.

업로드되는 것이 있나요?

아니요. 생성과 내보내기가 전적으로 브라우저에서 이루어집니다.

블롭 생성기

설정

작동 방식

주요 용도

참고 사항

자주 묻는 질문

블롭을 React에서 바로 쓸 수 있나요?

이후 형태를 편집할 수 있나요?

업로드되는 것이 있나요?

관련 도구

작동 방식

주요 용도

참고 사항

자주 묻는 질문

블롭을 React에서 바로 쓸 수 있나요?

이후 형태를 편집할 수 있나요?

업로드되는 것이 있나요?