Công cụ tạo hình blob SVG

Tạo hình blob SVG là gì?

Tạo hình blob hữu cơ, mượt mà dạng SVG. Điều chỉnh số điểm neo, mức độ bất thường của hình và kích thước, chọn tô màu đặc, gradient hoặc chỉ viền, và xuất thành file .svg hoặc data URI cho CSS.

Cách sử dụng Tạo hình blob SVG

1. Chọn Kiểu tô (Màu đặc, Gradient hoặc Chỉ viền) và (các) màu.
2. Đặt Số điểm neo, Độ ngẫu nhiên và Kích thước.
3. Bấm Ngẫu nhiên hoặc nhập Seed để có một hình cụ thể.
4. Bấm Tải xuống .svg hoặc sao chép mã SVG.
5. Hoặc sao chép Nền CSS (data URI).

Ví dụ

4 điểm, độ ngẫu nhiên 0, kích thước 100, màu đặc #8a3ffc

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path fill="#8a3ffc" d="M50,5C65,5 95,35 95,50C95,65 65,95 50,95C35,95 5,65 5,50C5,35 35,5 50,5Z"/></svg>

Khi nào nên dùng Tạo hình blob SVG

Dùng blob làm nền trang trí, mặt nạ ảnh, khung avatar hoặc điểm nhấn minh họa. Với độ ngẫu nhiên 0 bạn được hình gần tròn; với hình học chính xác, hãy dùng CSS border-radius hoặc clip-path.

Tạo hình blob SVG hoạt động như thế nào

Các điểm neo được đặt cách đều quanh một đường tròn (bán kính 45% kích thước). Khoảng cách từ tâm của mỗi điểm bị giảm đi một lượng giả ngẫu nhiên có seed, tối đa 60% × độ ngẫu nhiên. Một spline Catmull-Rom khép kín đi qua các điểm được chuyển thành lệnh Bézier bậc ba, đảm bảo đường viền mượt không gãy khúc. Tô gradient dùng linearGradient của SVG từ trên trái xuống dưới phải.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Hình nền trang trí trên landing page
• ✓ Mặt nạ cho ảnh đại diện
• ✓ Điểm nhấn minh họa và sticker
• ✓ Blob biến hình có hoạt ảnh (tạo nhiều hình với seed khác nhau)
• ✓ Hình giữ chỗ trong bài thuyết trình

Câu Hỏi Thường Gặp

Khám phá thêm danh mục