Trình tạo sóng SVG

Trình tạo sóng SVG là gì?

Trình tạo sóng SVG là một công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế web và lập trình viên front-end muốn có các đường phân cách dạng sóng mượt mà, tự nhiên và nền hero mà không cần vẽ đường dẫn bằng tay. Bạn đặt cường độ đường cong, xếp chồng từ một đến tám lớp, lật sóng để đỉnh hướng xuống hoặc lên, và tô nó bằng một dải pha một màu hoặc chuyển sắc dọc giữa hai màu HEX. Mỗi con sóng được dựng từ một trình tạo giả ngẫu nhiên dựa trên seed, nên nhấn Tạo lại sẽ cho bạn một hình mới trong khi giữ nguyên cùng các cài đặt, và đầu ra là SVG chính xác, có thể co giãn mà bạn có thể dán vào bất kỳ trang HTML hay tệp thiết kế nào. Hãy dùng nó cho đường phân cách phần, chân trang, biểu ngữ và nền trang trí.

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

1. Đặt cường độ đường cong từ 0 đến 100 để kiểm soát các đỉnh sóng cao và ấn tượng đến mức nào.
2. Chọn số lớp (1-8); càng nhiều lớp càng xếp chồng các con sóng bán trong suốt để tạo chiều sâu.
3. Dùng Lật để đỉnh sóng hướng xuống hoặc lên.
4. Mở Cài đặt để chuyển giữa kiểu tô đặc và chuyển sắc dọc, đồng thời chọn màu bắt đầu và màu kết thúc.
5. Nhấn Tạo lại để xáo trộn lại hình sóng cho đến khi bạn ưng ý.
6. Sao chép mã SVG hoặc nhấp Tải xuống để lưu tệp wave.svg.

Ví dụ

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

Cường độ đường cong thay đổi điều gì?

Cường độ (0-100) kiểm soát mỗi đỉnh sóng nhô lên và hạ xuống bao xa. Giá trị thấp tạo gợn sóng nhẹ nhàng; giá trị cao tạo các đỉnh cao, ấn tượng. Bản xem trước và SVG cập nhật tức thì khi bạn thay đổi.

Tại sao nhấn Tạo lại làm thay đổi hình dạng?

Mỗi con sóng được vẽ từ một trình tạo giả ngẫu nhiên dựa trên seed. Tạo lại tăng seed lên để bạn có một cách sắp xếp đỉnh mới trong khi giữ nguyên cường độ, số lớp, màu sắc và kiểu tô đúng như bạn đã đặt.

Khác biệt giữa kiểu tô đặc và chuyển sắc là gì?

Kiểu tô đặc pha trộn mỗi lớp xếp chồng giữa hai màu của bạn, trong khi chuyển sắc áp dụng một dải chuyển sắc dọc duy nhất từ màu đầu tiên ở trên xuống màu thứ hai ở dưới trên tất cả các lớp. Mở Cài đặt để chuyển đổi và chọn cả hai màu.

Tôi dùng tệp SVG đã tải xuống như thế nào?

Đầu ra là mã SVG tiêu chuẩn, có thể co giãn. Sao chép trực tiếp vào HTML của bạn, hoặc tải wave.svg và nhập vào công cụ thiết kế hoặc tham chiếu nó như một hình ảnh. Vì là vector, nó luôn sắc nét ở mọi kích thước.

Có gì được tải lên máy chủ không?

Không. Con sóng được tạo hoàn toàn trong trình duyệt của bạn bằng phép toán cục bộ, và bản tải .svg được dựng từ một blob trong bộ nhớ. Không có cài đặt, màu sắc hay hình ảnh nào từng rời khỏi thiết bị của bạn, nên công cụ hoạt động ngoại tuyến và giữ cho công việc của bạn riêng tư.