Tạo SVG blob

Công cụ tạo SVG blob là gì?

Công cụ tạo SVG blob tạo ra các hình khép kín mang dáng hữu cơ bằng cách lấy mẫu các điểm quanh một đường tròn rồi nối chúng bằng các đường cong Bézier mượt mà. Kết quả là một hình bóng mềm mại, uyển chuyển, loại hình bạn thường thấy phía sau phần hero quảng cáo, quanh ảnh hồ sơ hoặc làm mảng màu trang trí trên landing page.

Blob nằm ở điểm cân bằng giữa hình học và ngẫu nhiên. Chỉnh số điểm để có hình hạt đậu (3 đến 4), hòn sỏi (5 đến 6) hoặc hỗn loạn (từ 10 trở lên). Kéo thanh trượt độ ngẫu nhiên để đi từ gần như hình tròn đến méo mó dữ dội. Nhấn nút xúc xắc để tạo một seed hoàn toàn mới bất cứ lúc nào.

Mọi thứ chạy trong trình duyệt của bạn. Xuất thành đoạn SVG để sao chép, tệp .svg để tải xuống, hoặc một giá trị CSS clip-path mà bạn áp dụng trực tiếp cho bất kỳ phần tử HTML nào để cắt nó theo hình blob.

Bạn sẽ học được gì khi tạo blob

• Đường cong Bézier bậc ba tạo nên độ mượt của blob: mỗi cặp điểm kề nhau có hai tay nắm điều khiển, được tính sao cho tiếp tuyến liên tục tại mọi điểm nối.
• Spline Catmull-Rom (dùng ở đây) tự suy ra các tay nắm đó từ các điểm lân cận, nên bạn không phải chỉnh tay điểm điều khiển để giữ đường cong mượt.
• CSS clip-path: path(...) áp dụng được hình blob cho mọi phần tử như ảnh, div, video mà không ảnh hưởng đến khung bố cục của nó.
• Blob vẽ bằng SVG phóng to vô hạn mà không bị vỡ hạt như PNG, và chỉ nặng vài trăm byte.

Cách tạo blob từng bước

1. 1

   Chọn số điểm

   Ít điểm (3 đến 5) cho ra blob hình hạt đậu. Nhiều điểm (8 đến 12) cho ra hình sần sùi như sỏi, không đều.

2. 2

   Đặt độ ngẫu nhiên

   0% là hình tròn. 50% cho các đường cong blob nhẹ nhàng. 100% cho hình bóng méo mó dữ dội, ấn tượng.

3. 3

   Chọn màu hoặc gradient

   Dùng màu tô đơn sắc, hoặc bật Gradient rồi chọn hai màu cùng một góc. Hợp với các mẫu phần hero phổ biến.

4. 4

   Tạo ngẫu nhiên và xuất

   Nhấn xúc xắc để tạo seed mới. Khi đã ưng ý, sao chép SVG, sao chép CSS clip-path hoặc tải tệp .svg xuống.

Blob phát huy tốt nhất ở đâu

Những cách dùng blob phổ biến và điều cần lưu ý.

Ví dụ blob để thử

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Welcome to Coddy</h1></section>

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Những lỗi thường gặp với SVG blob

• Quên viewBox và đặt chiều rộng/chiều cao cố định cho <svg>. Hình sẽ không co giãn theo màn hình; hãy dùng viewBox kèm width/height trong CSS.
• Tạo hoạt ảnh cho các path lớn có màu tô ở mỗi khung hình. Raster hóa path rất tốn kém; hãy dùng transform/opacity hoặc làm mờ sẵn bằng CSS filter để GPU xử lý.
• Chép <svg> inline vào Tailwind/Bootstrap và thừa hưởng display: inline thay vì block. Khoảng trống baseline mặc định để lại vài pixel bên dưới hình.
• Dùng blob làm hình dạng nút bấm mà quên rằng sự kiện chuột vẫn kích hoạt trên cả khung bao, không phải đường viền cong. Hãy bọc một thẻ <button> thật bên trong nếu cần xác định vùng nhấp chính xác.
• Chồng nhiều blob đặc với độ mờ cao trên thiết bị di động. Tổng chi phí vẽ lại có thể làm giảm tốc độ khung hình rõ rệt trên máy cấu hình thấp.

Câu hỏi thường gặp về công cụ tạo SVG blob