Công cụ tạo sóng SVG
Tạo sóng SVG mượt, nhọn hoặc bậc thang với nhiều lớp, biên độ và seed. Tải file .svg hoặc sao chép dạng data URI nền CSS để làm vách ngăn giữa các phần.
Cài đặt sóng
Cùng cài đặt và cùng seed luôn tạo ra cùng một hình.
Xem trước
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Công cụ Liên quan
Xem Tất cảTạo sóng SVG là gì?
Tạo hình sóng dạng SVG cho vách ngăn giữa các phần và nền. Chọn đường cong mượt, đỉnh nhọn hoặc bậc thang, xếp tối đa năm lớp, lật sóng lên trên, và xuất thành file .svg hoặc data URI background-image CSS sẵn sàng để dán.
Cách sử dụng Tạo sóng SVG
- Chọn Màu và Kiểu sóng (Mượt, Nhọn, Bậc thang) cùng Vị trí (Dưới hoặc Trên).
- Chỉnh Độ phức tạp, Biên độ, Lớp, Độ trong suốt, Chiều rộng và Chiều cao.
- Bấm Ngẫu nhiên hoặc gõ Seed để có sóng khác nhưng tái lập được.
- Bấm Tải xuống .svg hoặc sao chép mã SVG.
- Hoặc sao chép Nền CSS (data URI) để dùng sóng mà không cần file riêng.
Ví dụ
Độ phức tạp 2, biên độ 0, 1440×320, màu #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Biên độ 0 cho ra đường thẳng, cho thấy chính xác cách dựng đường Bézier.
Khi nào nên dùng Tạo sóng SVG
Dùng cho vách ngăn dạng sóng giữa các phần, footer và nền banner. preserveAspectRatio="none" giúp sóng giãn theo mọi chiều rộng, phù hợp với vách ngăn toàn chiều rộng; với hình minh họa phải giữ tỉ lệ, hãy chỉnh SVG trong trình chỉnh sửa vector.
Tạo sóng SVG hoạt động như thế nào
Chiều rộng được chia thành các đoạn bằng nhau; độ cao của mỗi điểm là đường cơ sở cộng một độ lệch giả ngẫu nhiên có seed (mulberry32) nhân với biên độ. Sóng mượt cho một spline Catmull-Rom đi qua các điểm, chuyển thành lệnh Bézier bậc ba C; sóng nhọn dùng đường thẳng và bậc thang dùng đường ngang/dọc. Đường path được khép về mép dưới (hoặc trên). Nhiều lớp dùng đường cơ sở và seed khác nhau, với độ đục tăng dần về phía trước. Data URI giữ SVG dễ đọc và chỉ percent-encode các ký tự không an toàn.
Các Trường Hợp Sử Dụng Phổ Biến
- Vách ngăn dạng sóng giữa các phần của landing page
- Nền footer nhiều lớp
- Phần đáy của banner
- Ảnh nền qua data URI trong CSS
- Hình trang trí tái lập được trong design system
Câu Hỏi Thường Gặp
Tôi có lấy lại được cùng sóng không?
Có. Cùng thiết lập và Seed luôn tạo ra mã SVG giống hệt nhau.
SVG nội tuyến hay data URI?
SVG nội tuyến có thể tạo kiểu và hoạt ảnh bằng CSS; data URI trong background-image giữ HTML gọn gàng nhưng không thể đổi kiểu sau khi đã mã hóa.
Làm sao đặt sóng ở đầu một phần trang?
Đặt Vị trí là Trên; path được khép về mép trên nên lấp đầy hướng lên.