Thiết kế / SVG
Trình tạo sóng SVG cho đường phân cách giữa các phần
Tạo các sóng SVG mượt, xếp lớp cho ranh giới giữa hai phần của trang: chọn số lớp, số sóng, chiều cao, độ mượt và màu sắc, rồi tải xuống SVG hoặc sao chép dưới dạng nền CSS.
Trình tạo sóng SVG cho đường phân cách giữa các phần: Mỗi lớp là một hàng các điểm luân phiên nằm trên và dưới đường cơ sở với độ lệch ngẫu nhiên, được nối bằng một đường cong mượt và tô kín xuống cạnh dưới. Các lớp phía sau có màu nhạt hơn, tạo cảm giác chiều sâu. SVG có thể co giãn theo mọi chiều rộng, còn phiên bản CSS nhúng SVG dưới dạng nền data URI. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 240" preserveAspectRatio="none"><g fill="#479d1d"><path d="M0,121.9 C34.3,111.7 137.1,60.8 205.7,60.2 C274.3,59.7 342.9,118.4 411.4,118.5 C480,118.5 548.6,61.3 617.1,60.8 C685.7,60.3 754.3,115.5 822.9,115.6 C891.4,115.7 960,61.8 1028.6,61.2 C1097.1,60.7 1165.7,110.4 1234.3,112.2 C1302.9,114 1405.7,78.8 1440,72.2 L1440,240 L0,240 Z" fill-opacity="0.57"/><path d="M0,144.3 C34.3,135.4 137.1,89.7 205.7,90.4 C274.3,91.1 342.9,148.9 411.4,148.6 C480,148.2 548.6,89 617.1,88.4 C685.7,87.7 754.3,142.2 822.9,144.7 C891.4,147.3 960,103.8 1028.6,103.7 C1097.1,103.7 1165.7,145.8 1234.3,144.5 C1302.9,143.3 1405.7,104.1 1440,96.1 L1440,240 L0,240 Z" fill-opacity="0.78"/><path d="M0,184.4 C34.3,175.7 137.1,135.5 205.7,132.1 C274.3,128.8 342.9,166 411.4,164.5 C480,163 548.6,119.4 617.1,123 C685.7,126.6 754.3,187.2 822.9,186 C891.4,184.8 960,118.6 1028.6,116 C1097.1,113.4 1165.7,170.5 1234.3,170.5 C1302.9,170.6 1405.7,125.3 1440,116.2 L1440,240 L0,240 Z"/></g></svg>
CSS
.wave {
height: 240px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='%23479d1d'%3E%3Cpath d='M0%2C121.9 C34.3%2C111.7 137.1%2C60.8 205.7%2C60.2 C274.3%2C59.7 342.9%2C118.4 411.4%2C118.5 C480%2C118.5 548.6%2C61.3 617.1%2C60.8 C685.7%2C60.3 754.3%2C115.5 822.9%2C115.6 C891.4%2C115.7 960%2C61.8 1028.6%2C61.2 C1097.1%2C60.7 1165.7%2C110.4 1234.3%2C112.2 C1302.9%2C114 1405.7%2C78.8 1440%2C72.2 L1440%2C240 L0%2C240 Z' fill-opacity='0.57'/%3E%3Cpath d='M0%2C144.3 C34.3%2C135.4 137.1%2C89.7 205.7%2C90.4 C274.3%2C91.1 342.9%2C148.9 411.4%2C148.6 C480%2C148.2 548.6%2C89 617.1%2C88.4 C685.7%2C87.7 754.3%2C142.2 822.9%2C144.7 C891.4%2C147.3 960%2C103.8 1028.6%2C103.7 C1097.1%2C103.7 1165.7%2C145.8 1234.3%2C144.5 C1302.9%2C143.3 1405.7%2C104.1 1440%2C96.1 L1440%2C240 L0%2C240 Z' fill-opacity='0.78'/%3E%3Cpath d='M0%2C184.4 C34.3%2C175.7 137.1%2C135.5 205.7%2C132.1 C274.3%2C128.8 342.9%2C166 411.4%2C164.5 C480%2C163 548.6%2C119.4 617.1%2C123 C685.7%2C126.6 754.3%2C187.2 822.9%2C186 C891.4%2C184.8 960%2C118.6 1028.6%2C116 C1097.1%2C113.4 1165.7%2C170.5 1234.3%2C170.5 C1302.9%2C170.6 1405.7%2C125.3 1440%2C116.2 L1440%2C240 L0%2C240 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}SVG có thể kéo giãn đến mọi chiều rộng (preserveAspectRatio="none"), nên phù hợp làm đường phân cách toàn chiều rộng giữa các phần. Đặt nó ở cuối một phần và dùng màu nền của phần tiếp theo, hoặc lật nó để đặt ở đầu phần. Cùng một giá trị khởi tạo ngẫu nhiên sẽ luôn tạo ra cùng một sóng.
SVG hay CSS?
SVG nội tuyến có thể được tạo kiểu và hoạt ảnh bằng CSS, còn thuộc tính fill có thể dùng currentColor. Khi được dùng làm nền CSS, SVG là một URI dữ liệu: không cần tải thêm gì, nhưng màu sắc được cố định trong mã. Tệp chỉ có vài trăm byte theo cả hai cách; bạn có thể làm gọn thêm bằng công cụ làm sạch SVG.
Độ mượt
Đường cong là một spline Catmull-Rom được chuyển thành các đoạn Bézier bậc ba: ở độ mượt tối đa, đường cong uốn nhẹ qua mọi điểm; ở mức 0, nó trở thành các đường thẳng nối giữa các điểm, tạo ra một cạnh núi lởm chởm.
Cách sử dụng
- Thiết lập số lớp, số lượng sóng và chiều cao của chúng.
- Chọn màu sắc và lật sóng để dùng ở đầu một phần.
- Nhấp để tạo các sóng ngẫu nhiên mới, rồi tải xuống SVG hoặc sao chép CSS.
Quyền riêng tư và giới hạn
Sóng được vẽ trong trình duyệt của bạn.
Công cụ liên quan
Câu hỏi thường gặp
Tôi sử dụng công cụ này giữa hai phần như thế nào?
Đặt màu của sóng trùng với màu của phần bên dưới, rồi đặt sóng ở cuối phần bên trên với chiều rộng toàn phần; lật sóng nếu muốn dùng nó ở đầu một phần.
Cùng một cài đặt có tạo ra cùng một sóng không?
Có: hình dạng được tạo từ một seed ngẫu nhiên, vì vậy chỉ thay đổi khi bạn nhấp để tạo sóng mới.
Tôi có thể sử dụng các sóng cho mục đích thương mại không?
Có: các hình dạng được tạo cho bạn và không kèm hạn chế về giấy phép.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản