<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>svg</title> <style> * { margin: 0; } .svg-box { width: 100%; height: 600px; } </style> </head> <body> <div class='svg-box'> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 360 219" xml:space="preserve" class="position-absolute" style="fill: url("#linear-gradient");"> <linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="29.2925" y1="-34.9094" x2="330.7075" y2="128.0078"> <stop offset="0" style="stop-color: rgb(236, 75, 52);"></stop> <stop offset="1" style="stop-color: rgb(221, 28, 44);"></stop> </linearGradient> <path d="M 0 0 h 260 v 130 C 300 153 230 164 160 162 S 40 150 0 130 V 0 Z M 0 0 h 360 v 130 C 300 153 230 164 160 162 S 40 150 0 130 V 0 Z M 0 0 h 360 v 130 C 300 153 230 164 160 162 S 40 150 0 130 V 0 Z" class="st0"></path> </svg> <!-- <path d="M 0 0 h 260 v 90 C 300 113 230 124 160 122 S 40 110 0 90 V 0 Z M 0 0 h 360 v 90 C 300 113 230 124 160 122 S 40 110 0 90 V 0 Z M 0 0 h 360 v 90 C 300 113 230 124 160 122 S 40 110 0 90 V 0 Z" class="st0"></path> --> <!-- d="M 0 0 h 260 v 140.1 C 300 207 240 219 180 219 S 60 207 0 123.1 V 0 Z M 0 0 h 360 v 183.1 C 300 207 240 219 180 219 S 60 207 0 123.1 V 0 Z M 0 0 h 360 v 183.1 C 300 207 240 219 180 219 S 60 207 0 183.1 V 0 Z" --> </div> </body> </html>