SVG Wave Generator
Create single or layered SVG wave dividers with responsive output
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="320" preserveAspectRatio="none" viewBox="0 0 1440 320"><path d="M0 158.654L22.5 164.414L45 169.247L67.5 173.049L90 175.737L112.5 177.253L135 177.564L157.5 176.664L180 174.572L202.5 171.333L225 167.018L247.5 161.719L270 155.552L292.5 148.65L315 141.163L337.5 133.252L360 125.088L382.5 116.85L405 108.714L427.5 100.857L450 93.449L472.5 86.651L495 80.609L517.5 75.454L540 71.298L562.5 68.231L585 66.32L607.5 65.605L630 66.102L652.5 67.801L675 70.664L697.5 74.63L720 79.612L742.5 85.504L765 92.176L787.5 99.486L810 107.275L832.5 115.373L855 123.607L877.5 131.797L900 139.766L922.5 147.342L945 154.36L967.5 160.67L990 166.134L1012.5 170.634L1035 174.072L1057.5 176.374L1080 177.491L1102.5 177.398L1125 176.097L1147.5 173.617L1170 170.01L1192.5 165.355L1215 159.754L1237.5 153.326L1260 146.212L1282.5 138.564L1305 130.55L1327.5 122.342L1350 114.118L1372.5 106.055L1395 98.33L1417.5 91.108L1440 84.546L1440 320L0 320Z" fill="#b1b3f8"/><path d="M0 204.081L22.5 208.671L45 212.209L67.5 214.615L90 215.84L112.5 215.856L135 214.663L157.5 212.286L180 208.778L202.5 204.214L225 198.693L247.5 192.334L270 185.275L292.5 177.669L315 169.681L337.5 161.483L360 153.252L382.5 145.168L405 137.406L427.5 130.132L450 123.504L472.5 117.667L495 112.746L517.5 108.848L540 106.058L562.5 104.435L585 104.014L607.5 104.806L630 106.793L652.5 109.931L675 114.153L697.5 119.368L720 125.462L742.5 132.304L765 139.745L787.5 147.625L810 155.772L832.5 164.012L855 172.164L877.5 180.053L900 187.508L922.5 194.368L945 200.483L967.5 205.722L990 209.972L1012.5 213.14L1035 215.157L1057.5 215.98L1080 215.592L1102.5 214L1125 211.24L1147.5 207.37L1170 202.474L1192.5 196.66L1215 190.051L1237.5 182.792L1260 175.04L1282.5 166.962L1305 158.734L1327.5 150.533L1350 142.537L1372.5 134.919L1395 127.843L1417.5 121.464L1440 115.919L1440 320L0 320Z" fill="#8a8cf5"/><path d="M0 163.219L22.5 157.207L45 152.086L67.5 147.968L90 144.942L112.5 143.073L135 142.402L157.5 142.943L180 144.684L202.5 147.588L225 151.592L247.5 156.609L270 162.531L292.5 169.23L315 176.56L337.5 184.362L360 192.469L382.5 200.703L405 208.889L427.5 216.846L450 224.405L472.5 231.401L495 237.682L517.5 243.113L540 247.576L562.5 250.975L585 253.235L607.5 254.309L630 254.172L652.5 252.828L675 250.306L697.5 246.66L720 241.969L742.5 236.336L765 229.881L787.5 222.744L810 215.081L832.5 207.057L855 198.845L877.5 190.623L900 182.57L922.5 174.86L945 167.659L967.5 161.123L990 155.395L1012.5 150.597L1035 146.835L1057.5 144.188L1080 142.715L1102.5 142.447L1125 143.391L1147.5 145.525L1170 148.804L1192.5 153.157L1215 158.489L1237.5 164.685L1260 171.61L1282.5 179.116L1305 187.039L1327.5 195.208L1350 203.446L1372.5 211.575L1395 219.419L1417.5 226.807L1440 233.581L1440 320L0 320Z" fill="#6366f1"/></svg>
ตัวสร้างคลื่น SVG คืออะไร
ตัวสร้างคลื่น SVG สร้างรูปคลื่นชั้นเดียวหรือหลายชั้นสำหรับตัวแบ่งส่วน ส่วนท้ายของฮีโร่ และพื้นหลังตกแต่ง ผลลัพธ์เป็น SVG น้ำหนักเบาที่สร้างจากพาธตามเส้นโค้งไซน์ วางใน HTML ใช้เป็นคอมโพเนนต์ React หรือส่งออกเป็น PNG ได้
วิธีใช้
- 1.เลือกคลื่นเดียวหรือคลื่นซ้อนชั้น แล้วกำหนดจำนวนชั้น
- 2.ปรับแอมพลิจูด ความถี่ (จำนวนรอบตลอดความกว้าง) เฟส และระยะห่างระหว่างชั้น
- 3.เลือกสีหลัก ชั้นซ้อนจะได้ชุดสีอ่อนลงอัตโนมัติ ซึ่งเปลี่ยนได้ทีละชั้น
- 4.ตั้งความกว้าง ความสูง ตำแหน่งสีเติม (ใต้หรือเหนือคลื่น) และกลับด้านแนวนอนหากต้องการ
- 5.คัดลอก SVG หรือ JSX ดาวน์โหลด SVG หรือส่งออก PNG ที่ 1× หรือ 2×
ผลลัพธ์แบบตอบสนองและซีด
เมื่อเปิด SVG แบบตอบสนอง มาร์กอัปจะใช้ width="100%" คง viewBox และตั้ง preserveAspectRatio="none" คลื่นจึงยืดตามความกว้างของคอนเทนเนอร์ใดก็ได้โดยความสูงคงที่ ซีดจะเลื่อนแต่ละชั้นด้วยค่าสุ่มที่ทำซ้ำได้ ซีดและการตั้งค่าเดียวกันให้คลื่นเดิมเสมอ และซีดว่างจะทำให้ทุกชั้นตรงกัน
ข้อจำกัดและความเป็นส่วนตัว
ซ้อนได้สูงสุด 6 ชั้น ความกว้าง 64 ถึง 4096 px และความสูง 32 ถึง 2048 px คลื่นวาดด้วยเส้นตรงที่สุ่มตัวอย่างถี่ตามเส้นโค้งไซน์ เมื่อซูมมาก ๆ อาจเห็นเป็นเหลี่ยมเล็กน้อย การส่งออก PNG ใช้ความกว้างและความสูงคงที่เสมอ ทุกอย่างสร้างในเบราว์เซอร์ของคุณ
