Trình Tạo Sóng SVG
Trình tạo sóng SVG miễn phí trực tuyến: xếp 1-5 lớp sóng mượt, tinh chỉnh đường chuẩn, biên độ, bước sóng và độ mượt, áp gradient hai màu rồi xuất mã vector.
Trình tạo sóng SVG làm được gì?
Nó tạo các hình sóng trang trí dưới dạng mã SVG dùng ngay được. Bạn có thể xếp 1-5 lớp, mỗi lớp có độ cao đường chuẩn, biên độ, bước sóng và độ mượt riêng, và tất cả được tô bằng một gradient tuyến tính hai màu dùng chung.
Đường cong sóng được vẽ thế nào?
Mỗi lớp do một bộ sinh path tích hợp tạo ra: sóng được chia thành các đoạn nửa bước sóng và mỗi đoạn vẽ bằng các điểm điều khiển Bézier bậc ba. Tệp rất nhỏ và hoàn toàn mượt ở mọi mức thu phóng.
Thanh trượt độ mượt thay đổi điều gì?
Ở 0% các đoạn trở thành đường thẳng và sóng trông như răng cưa. Tăng lên, các điểm điều khiển Bézier đẩy ra ngoài và ở 100% bạn có đường cong hình sin trọn vẹn.
Dùng SVG xuất ra ở đâu?
Bất cứ nơi nào chấp nhận HTML hoặc SVG: nền hero, đường phân cách giữa các section, chân trang, bài thuyết trình và công cụ thiết kế. Dán mã đã sao chép thẳng vào HTML hoặc lưu tệp .svg qua nút tải xuống.
Sóng có sắc nét ở mọi kích thước không?
Có. Bản xuất giữ viewBox 1440x480 nên hình là hình học vector thuần. Kéo giãn 100% chiều rộng trang hay phóng to để in, đường cong không bao giờ mờ hay răng cưa.
Nút Ngẫu nhiên hoạt động ra sao?
Nó chọn số lớp ngẫu nhiên từ 1 đến 5, giá trị ngẫu nhiên mới cho từng tham số và hai màu ngẫu nhiên hài hòa, rồi vẽ lại bản xem trước ngay lập tức. Bấm nhiều lần cho tới khi ưng ý.
Có dùng được màu thương hiệu của tôi không?
Được. Hai ô chọn màu đặt điểm đầu và cuối của gradient tuyến tính mà mọi lớp dùng chung, nên đổi màu là cả nhóm sóng đổi màu cùng lúc.
Dữ liệu có bị tải lên máy chủ không?
Không. Bộ tạo chạy hoàn toàn trong trình duyệt bằng JavaScript thuần. Màu và cài đặt của bạn không bao giờ rời trang, tệp xuất ra cũng được tạo cục bộ trên thiết bị.
Cách sử dụng Trình Tạo Sóng SVG
Trình tạo sóng SVG tạo ra các hình sóng nhiều lớp dưới dạng mã SVG sạch, dán ngay được. Mỗi lớp là một đường cong bezier khối trơn được tô bằng gradient tuyến tính hai màu dùng chung, nên nó hoàn hảo cho nền phần hero, đường phân cách trang và trang trí chân trang. Mọi thứ được tạo trong trình duyệt của bạn — không tải lên gì cả.
- Chọn số lớp (1-5) bạn muốn trong bộ chọn 「Lớp」. Các lớp được vẽ từ sau ra trước, nên lớp mới sẽ tô đè lên lớp trước.
- Chọn màu đầu và cuối của gradient bằng hai bộ chọn màu — mọi lớp dùng chung gradient tuyến tính này.
- Tinh chỉnh từng lớp bằng bốn thanh trượt của nó: 「Chiều cao đường chuẩn」 dịch chuyển sóng lên xuống, 「Biên độ」 đặt độ cao của đỉnh sóng, 「Bước sóng」 điều khiển khoảng cách ngang giữa các đỉnh, còn 「Độ mượt」 pha trộn từ đường răng cưa thẳng (0%) đến đường cong bezier khối hình sin trọn vẹn (100%).
- Nhấn 「Ngẫu nhiên hóa」 để tạo ngay một tổ hợp mới về số lớp, hình dạng và màu sắc cho đến khi thấy ưng ý.
- Nhấn 「Tải SVG」 để lưu tệp .svg, hoặc 「Sao chép mã」 để đặt toàn bộ đánh dấu SVG vào clipboard, sẵn sàng dán vào bất kỳ tệp HTML hay công cụ thiết kế nào.
Làm đường phân cách phần trang web thì đặt SVG giữa hai khối và cho nó giãn ra 100% chiều rộng — viewBox giữ các đường cong không méo ở mọi kích thước. Độ mượt thấp với bước sóng ngắn cho cảm giác vẽ tay, còn độ mượt tối đa với bước sóng dài trông như mặt biển lặng.
Công cụ liên quan
- Trình tối ưu SVG Tối ưu và nén tệp SVG ngay lập tức trong trình duyệt. Loại bỏ siêu dữ liệu, nhận xét và dữ liệu thừa, giảm kích thước tới 60%.
- Chuyển đổi SVG sang PNG Chuyển đổi SVG sang PNG, JPEG hoặc WebP ngay lập tức trong trình duyệt. Tùy chỉnh tỷ lệ, kích thước và màu nền. Miễn phí, riêng tư, không tải lên.
- Trình chuyển PNG sang SVG Trình chuyển PNG sang SVG miễn phí trực tuyến. Biến ảnh PNG, JPG và các ảnh bitmap khác thành SVG vector co giãn với tùy chỉnh màu sắc và chi tiết - hoàn toàn trong trình duyệt của bạn.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.
- Trình tạo clip-path CSS Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.