Tạo hình blob SVG mềm mại, lặp lại được bằng seed và xuất mã sạch
Blob là những mảng hình tròn méo, mềm mại hay dùng làm nền cho hero section, khung ảnh đại diện, hay điểm nhấn trên slide và banner. SVG Blob Generator này sinh hình blob ngẫu nhiên nhưng có kiểm soát: bạn chọn số điểm neo, độ ngẫu nhiên và một con số seed, công cụ nối các điểm bằng đường cong Bezier khép kín rồi xuất ra file SVG gọn, data URI, đoạn CSS background và component React dùng được ngay.
Tính năng nổi bật
- Sinh hình blob từ 3 đến 16 điểm neo, độ ngẫu nhiên từ 0% (hình tròn đều) đến 100%
- Seed hiển thị và sửa được: nhập lại đúng seed cùng thông số là ra lại đúng hình cũ
- Đường viền khép kín, trơn liền mạch nhờ chuyển đường cong Catmull-Rom sang Bezier bậc ba
- Tô màu đơn, gradient tuyến tính theo góc tùy chọn, hoặc chỉ vẽ viền với độ dày và màu riêng
- Chồng tối đa 5 lớp blob kích thước giảm dần, độ trong suốt tăng dần để tạo chiều sâu
- Xem trước hiệu ứng biến hình giữa hai hình blob, tôn trọng cài đặt giảm chuyển động của thiết bị
- Xuất SVG đã làm tròn tọa độ (0 đến 3 chữ số thập phân), data URI, CSS background-image và JSX cho React
- Tải file .svg về máy, mọi xử lý chạy ngay trong trình duyệt, không gửi dữ liệu đi đâu
Vì sao nên tự sinh blob thay vì vẽ tay hay tải hình có sẵn
Vẽ một hình blob đẹp bằng công cụ pen trong Figma hay Illustrator mất thời gian căn các tay nắm Bezier sao cho đường cong trơn, không bị gãy góc. Tải hình blob từ kho ảnh thì nhanh nhưng thường nặng, lẫn nhiều thuộc tính thừa của phần mềm thiết kế, và khó đổi màu cho khớp bộ nhận diện thương hiệu. Công cụ này làm phần toán học thay bạn: các điểm neo được đặt quanh một tâm với bán kính dao động ngẫu nhiên, sau đó đường cong được tính sao cho đi qua đúng từng điểm và liền mạch tại mọi chỗ nối. Kết quả là một thẻ path duy nhất, vài trăm byte, đổi màu chỉ bằng một thuộc tính. Vì hình được quyết định hoàn toàn bởi seed và các thông số, bạn có thể ghi seed vào tài liệu thiết kế để đồng nghiệp tạo lại đúng hình đó bất cứ lúc nào, thay vì phải gửi qua lại file.
Lợi ích khi sử dụng
- Có hình nền trang trí độc bản chỉ trong vài giây, không lo trùng với hình tải sẵn trên mạng
- File SVG rất nhẹ, không làm chậm trang như ảnh PNG hay JPG cùng kích thước
- Đổi màu theo thương hiệu dễ dàng vì chỉ có một vài thuộc tính fill và stop-color
- Tái tạo đúng hình bằng seed, thuận tiện khi làm việc nhóm hoặc sửa thiết kế sau nhiều tháng
- Dùng được ở nhiều nơi: HTML, CSS, React, Figma (dán SVG), slide và ấn phẩm in
Cách tạo hình blob SVG
- 1Chọn số điểm neo: ít điểm (3 đến 5) cho hình đơn giản, tròn trịa; nhiều điểm (10 trở lên) cho hình gợn sóng, nhiều múi hơn.
- 2Kéo thanh độ ngẫu nhiên: 0% là hình tròn, khoảng 40% đến 70% cho blob tự nhiên, gần 100% cho hình méo mạnh.
- 3Bấm Ngẫu nhiên hoặc Tạo hình khác đến khi ưng ý, rồi ghi lại con số seed nếu muốn tạo lại sau này.
- 4Chọn kiểu tô (màu đơn, gradient hoặc chỉ viền), màu sắc, góc gradient, độ dày viền và số lớp chồng nhau.
- 5Chọn số chữ số thập phân cho tọa độ: 0 hoặc 1 là đủ cho hầu hết nền trang web, giúp file nhỏ nhất.
- 6Bấm Xem biến hình để thử hiệu ứng chuyển động, bật tùy chọn kèm animation nếu muốn file SVG tự biến hình.
- 7Sao chép SVG, data URI, CSS hoặc JSX, hoặc bấm Tải file SVG để lưu về máy.
Hình blob được tạo ra như thế nào
Công cụ chia vòng tròn thành số phần bằng nhau theo số điểm neo bạn chọn. Tại mỗi phần, một điểm được đặt cách tâm một khoảng bằng bán kính gốc trừ đi một lượng ngẫu nhiên, lượng này tối đa 55% bán kính khi độ ngẫu nhiên ở mức 100%. Góc của mỗi điểm cũng được xê dịch nhẹ, tối đa một phần tư khoảng cách giữa hai điểm, để hình không trông quá đều như bông hoa. Các số ngẫu nhiên không lấy từ Math.random mà từ bộ sinh số giả ngẫu nhiên mulberry32 khởi tạo bằng seed, nên cùng seed luôn cho cùng dãy số. Khi độ ngẫu nhiên bằng 0, mọi điểm cách tâm đúng bằng bán kính gốc và kết quả gần như một hình tròn. Toàn bộ hình được thu nhỏ vừa đủ để cả phần viền và phần đường cong lồi ra ngoài điểm neo vẫn nằm trọn trong khung, không bị cắt mép.
Vì sao đường cong trơn và khép kín
Nếu nối các điểm neo bằng đoạn thẳng, bạn sẽ có một đa giác góc cạnh. Để có đường cong mềm đi qua đúng các điểm, công cụ dùng spline Catmull-Rom: tại mỗi điểm, hướng tiếp tuyến được lấy theo hướng từ điểm trước tới điểm sau. Mỗi đoạn Catmull-Rom sau đó được đổi sang một lệnh C (Bezier bậc ba) của SVG với hai điểm điều khiển bằng điểm hiện tại cộng một phần sáu hiệu của hai điểm lân cận. Vì điểm cuối của đoạn cuối cùng quay về đúng điểm đầu và tiếp tuyến ở hai phía chỗ nối trùng hướng nhau, đường viền khép kín và không có góc gãy. Mã path luôn có dạng một lệnh M, đúng số lệnh C bằng số điểm neo, và kết thúc bằng Z. Bộ kiểm thử của công cụ đã chạy với hàng nghìn seed để xác nhận path luôn khép kín, không có giá trị NaN hay vô cực, và mọi tọa độ nằm trong khung vẽ.
Seed là gì và dùng thế nào cho hiệu quả
Seed là con số khởi đầu của bộ sinh số ngẫu nhiên, nhận giá trị nguyên từ 0 đến 4.294.967.295. Cùng một seed, cùng số điểm neo, cùng độ ngẫu nhiên và cùng kích thước khung sẽ luôn ra cùng một hình, trên mọi trình duyệt và mọi máy. Điều này hữu ích khi bạn cần ghi lại quyết định thiết kế: thay vì lưu file SVG, chỉ cần ghi seed 20250927, 7 điểm, 60% vào ghi chú là đủ. Nếu đổi số điểm neo, dãy số ngẫu nhiên vẫn như cũ nhưng được phân bổ cho số điểm khác nên hình sẽ đổi. Đổi độ ngẫu nhiên thì các điểm vẫn giữ tỷ lệ tương đối, chỉ co giãn mức độ méo, vì vậy bạn có thể tìm được hình ưng ý rồi tinh chỉnh độ méo mà không mất dáng tổng thể.
Làm tròn tọa độ và kích thước file
Tọa độ trong path được làm tròn theo số chữ số thập phân bạn chọn và bỏ các số 0 thừa ở cuối. Với khung 400 px, sai lệch khi làm tròn đến số nguyên chỉ tối đa nửa pixel, mắt thường không nhận ra ở kích thước hiển thị thông thường. Ví dụ với seed 123, 7 điểm, 60% ngẫu nhiên, tô gradient, file SVG dài khoảng 478 byte khi làm tròn đến số nguyên và khoảng 652 byte khi giữ 3 chữ số thập phân. Nếu hình được phóng to nhiều lần, ví dụ in khổ lớn từ khung nhỏ, hãy giữ 2 đến 3 chữ số để đường cong không bị lượn sóng. Công cụ không thêm metadata, không thêm comment, không có thuộc tính của phần mềm thiết kế nên file xuất ra đã ở dạng gọn.
Hiệu ứng biến hình và chế độ giảm chuyển động
Khi bật hiệu ứng, mỗi lớp blob được sinh thêm một hình thứ hai có cùng số điểm neo. Vì hai path có cùng cấu trúc lệnh, trình duyệt có thể nội suy từng con số để hình chuyển mượt từ dáng này sang dáng kia rồi quay lại, bằng thẻ animate của SMIL với đường cong gia tốc êm ở hai đầu. Phần xem trước trên trang chỉ chạy khi bạn bấm Xem biến hình, và nếu thiết bị đang bật chế độ giảm chuyển động, công cụ nhắc bạn điều đó. Cần lưu ý là animation SMIL nằm trong file SVG sẽ chạy bất kể cài đặt giảm chuyển động của người xem, vì CSS không tắt được SMIL. Nếu trang web của bạn cần tuân thủ chuẩn tiếp cận nghiêm ngặt, hãy xuất bản tĩnh và tự điều khiển chuyển động bằng JavaScript kiểm tra prefers-reduced-motion. Data URI và đoạn CSS luôn là bản tĩnh.
Chọn định dạng xuất phù hợp
File SVG hoặc mã SVG dán trực tiếp vào HTML là lựa chọn linh hoạt nhất: bạn có thể đổi màu bằng CSS, thêm animation, và hình sắc nét ở mọi độ phân giải. Data URI và đoạn CSS background-image phù hợp khi blob chỉ là hình nền trang trí, không cần tương tác, và bạn muốn tránh thêm một request tải file. Data URI ở đây dùng mã hóa URL thay vì base64 nên ngắn hơn và vẫn đọc được. Bản JSX đã đổi các thuộc tính có gạch nối sang dạng camelCase mà React yêu cầu như strokeWidth, stopColor, fillOpacity, và nhận props để bạn truyền className hay kích thước. Nếu trên cùng một trang có nhiều blob dùng gradient, hãy đảm bảo mỗi bản có id gradient riêng, vì hai phần tử cùng id sẽ khiến trình duyệt dùng nhầm gradient của nhau.
Giới hạn cần biết
Công cụ chỉ tạo hình blob đơn khối từ một tâm, không tạo hình có lỗ, hình nhiều mảnh rời nhau hay đường gợn sóng dạng wave ở đáy section. Gradient hiện chỉ hỗ trợ hai màu tuyến tính, chưa có gradient tỏa tròn hay nhiều điểm dừng. Khi chồng nhiều lớp, các lớp dùng chung màu tô và khác nhau ở kích thước, độ trong suốt; nếu cần mỗi lớp một màu, hãy tải SVG về và sửa thuộc tính fill của từng path. Animation dùng SMIL, được các trình duyệt hiện đại hỗ trợ, nhưng một số trình soạn thảo đồ họa khi mở file sẽ bỏ qua phần chuyển động. Hình được sinh ngẫu nhiên nên không thể đảm bảo hai seed khác nhau cho hai hình trông khác hẳn nhau, đôi khi chúng khá giống.
Câu hỏi thường gặp (FAQ)
Blob SVG là gì?
Blob là hình khối có đường viền cong mềm, không đều, trông giống giọt nước hay đám mây méo. Khi lưu ở dạng SVG, hình chỉ là một thẻ path với vài chục con số, nên rất nhẹ và phóng to không bị vỡ.
Làm sao để tạo lại đúng hình blob tôi đã tạo hôm trước?
Nhập lại đúng seed, số điểm neo, độ ngẫu nhiên và kích thước khung như lần trước. Cùng các thông số đó, công cụ luôn sinh ra cùng một hình trên mọi máy.
Tại sao đổi số điểm neo thì hình thay đổi hoàn toàn dù giữ nguyên seed?
Seed quyết định dãy số ngẫu nhiên, còn số điểm neo quyết định dãy số đó được gán cho bao nhiêu điểm và ở góc nào. Khi số điểm thay đổi, cùng dãy số được phân bổ khác đi nên dáng hình cũng khác.
Độ ngẫu nhiên bao nhiêu thì đẹp?
Không có con số đúng cho mọi trường hợp. Khoảng 40% đến 70% với 5 đến 8 điểm neo thường cho hình blob tự nhiên. Dưới 20% hình gần như tròn, trên 85% hình có thể có chỗ lõm sâu.
Có dùng hình blob này cho mục đích thương mại được không?
Hình được sinh bằng thuật toán từ thông số bạn chọn, công cụ không gắn điều kiện sử dụng nào lên file xuất ra. Bạn có thể dùng trong website, ấn phẩm và sản phẩm của mình.
Làm sao đổi màu blob bằng CSS sau khi dán vào HTML?
Với kiểu tô màu đơn, bạn có thể ghi đè thuộc tính fill bằng CSS, ví dụ chọn thẻ path trong svg và đặt fill theo biến màu của bạn. Với gradient, hãy sửa stop-color trong thẻ linearGradient hoặc dùng biến CSS cho từng stop.
Tại sao phải chú ý id gradient khi dùng nhiều blob trên một trang?
Gradient được tham chiếu bằng id. Nếu hai SVG dán trực tiếp vào cùng một trang có cùng id, trình duyệt chỉ dùng gradient khai báo đầu tiên cho cả hai. Công cụ đặt id theo seed để giảm khả năng trùng, nhưng nếu dùng cùng seed nhiều lần với màu khác nhau thì bạn cần tự đổi id.
Animation biến hình có chạy trên mọi trình duyệt không?
Thẻ animate của SMIL được Chrome, Edge, Firefox và Safari hiện đại hỗ trợ khi SVG được dán trực tiếp hoặc mở như file. Khi dùng làm ảnh nền CSS, công cụ xuất bản tĩnh. Một số phần mềm đồ họa bỏ qua animation khi nhập file.
Nên làm tròn tọa độ đến mấy chữ số thập phân?
Với hình nền web ở kích thước hiển thị gần với khung vẽ, 0 hoặc 1 chữ số là đủ và cho file nhỏ nhất. Nếu hình sẽ được phóng to nhiều lần so với khung gốc, giữ 2 đến 3 chữ số để đường cong mượt.
Dán SVG vào Figma được không?
Được. Sao chép mã SVG rồi dán vào khung Figma, hình sẽ thành một vector có thể chỉnh tiếp. Animation SMIL sẽ không được giữ lại trong Figma.
Vì sao dùng data URI dạng mã hóa URL thay vì base64?
SVG là văn bản, mã hóa URL chỉ thay thế một số ký tự đặc biệt nên chuỗi ngắn hơn base64, vốn làm mọi nội dung dài thêm khoảng một phần ba. Chuỗi mã hóa URL cũng vẫn đọc được bằng mắt để kiểm tra.
Dữ liệu của tôi có bị gửi lên máy chủ không?
Không. Toàn bộ việc sinh hình, làm tròn tọa độ và tạo mã xuất diễn ra trong trình duyệt của bạn. Công cụ không lưu và không gửi thông số hay file đi đâu.
Tôi muốn hình nền lặp lại dạng họa tiết thì dùng công cụ nào?
Blob phù hợp cho một hình trang trí đơn lẻ. Nếu cần họa tiết lặp lại như chấm, sọc, lưới, hãy dùng SVG Pattern Generator; nếu cần nền chuyển màu nhiều điểm, dùng Mesh Gradient Generator.
Từ khóa liên quan
- blob svg generator
- tạo hình blob svg
- svg blob online
- tạo blob ngẫu nhiên
- hình blob nền website
- organic shape generator
- random blob shape
- blob shape svg
- tạo hình khối mềm svg
- svg path generator
- blob background css
- blob animation svg
- svg morph animation
- hình trang trí hero section
- blob gradient svg
- svg data uri
- blob react component
- tạo hình svg ngẫu nhiên
- catmull rom bezier
- blob maker online
