Trình tạo Blob SVG

Trình tạo Blob SVG là gì?

Trình tạo Blob SVG là một công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế và lập trình viên front-end muốn có các hình blob mềm mại, hữu cơ cho nền, phần hero, ảnh đại diện hoặc các điểm nhấn trang trí mà không phải vẽ tay. Bạn kiểm soát hai giá trị: độ phức tạp (số điểm neo quanh hình) và độ tương phản (mức độ mỗi điểm lệch khỏi một vòng tròn hoàn hảo). Một seed trong trạng thái, được tăng lên bởi nút Tạo lại, cho phép bạn duyệt qua vô số biến thể trong khi giữ cố định độ phức tạp và độ tương phản. Kết quả được kết xuất dưới dạng một đường Bézier khép kín, mượt mà duy nhất, nhờ đó bạn có thể sao chép mã SVG sạch, lấy một quy tắc CSS clip-path() để che bất kỳ phần tử nào, hoặc tải xuống một tệp .svg sẵn dùng. Hãy dùng nó để nhanh chóng tạo các trang trí đúng với thương hiệu hoặc để tìm hiểu cách các đường blob được dựng từ các điểm quanh một vòng tròn.

Cách sử dụng Trình tạo Blob SVG

1. Mở Cài đặt và đặt độ phức tạp (số điểm, 3-16) cho hình.
2. Đặt độ tương phản (0-100) để kiểm soát mức độ không đều và gợn sóng của các cạnh.
3. Chọn màu tô bằng ô màu hoặc bằng cách nhập giá trị HEX.
4. Nhấn Tạo lại để gieo một biến thể ngẫu nhiên mới từ seed tiếp theo cho đến khi bạn ưng ý hình dạng.
5. Sao chép mã SVG hoặc quy tắc CSS clip-path, hoặc nhấn Tải xuống để lưu một tệp .svg.

Ví dụ

Câu hỏi thường gặp

Độ phức tạp và độ tương phản kiểm soát điều gì?

Độ phức tạp là số điểm neo được đặt đều quanh một vòng tròn (từ 3 đến 16) — càng nhiều điểm thì đường viền càng chi tiết. Độ tương phản là mức độ mỗi điểm bị đẩy ngẫu nhiên vào trong hoặc ra ngoài so với bán kính gốc (từ 0 đến 100), nên 0 gần với một vòng tròn đơn giản và 100 thì rất không đều.

Nút Tạo lại hoạt động như thế nào?

Mỗi blob được dựng từ một seed dạng số cộng với độ phức tạp và độ tương phản của bạn. Tạo lại tăng seed thêm một và tính lại hình dạng, nên bạn nhận được một biến thể ngẫu nhiên mới ở mỗi lần nhấp trong khi độ phức tạp, độ tương phản và màu sắc vẫn giữ nguyên.

Sự khác biệt giữa đầu ra SVG và clip-path là gì?

Đầu ra SVG là một tệp <svg> hoàn chỉnh, độc lập mà bạn có thể nhúng hoặc tải xuống. Đầu ra clip-path là một quy tắc CSS duy nhất sử dụng path() mà bạn có thể áp dụng cho bất kỳ phần tử HTML nào để cắt nó theo cùng một đường viền blob.

Tôi có thể đổi màu và tải tệp xuống không?

Có. Đặt màu tô bằng ô màu hoặc một giá trị HEX; bản xem trước, SVG và bản tải xuống đều dùng nó. Nhấn Tải xuống để lưu một tệp blob.svg được tạo hoàn toàn trong trình duyệt của bạn.

Hình dạng hoặc thiết lập của tôi có được gửi đến máy chủ không?

Không. Blob được tạo bằng một hàm ngẫu nhiên cục bộ dựa trên seed và mọi chuỗi SVG và clip-path đều được dựng trong trình duyệt của bạn. Không có gì được tải lên, nên công cụ hoạt động ngoại tuyến và công việc của bạn được giữ riêng tư.