squircle

Make all the squircles you need, in the browser. https://github.com/georgedoescode/squircle https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

TheWaveBackground.vue (877B)

      1 <script>
      2 export default {
      3     name: 'TheWaveBackground',
      4 };
      5 </script>
      6 
      7 <template>
      8     <div class="wave-background">
      9         <svg
     10             class="wave-background__svg"
     11             xmlns="http://www.w3.org/2000/svg"
     12             viewBox="0 0 1440 320"
     13         >
     14             <path
     15                 fill-opacity="1"
     16                 d="M0,64L80,96C160,128,320,192,480,181.3C640,171,800,85,960,69.3C1120,53,1280,107,1360,133.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
     17             ></path>
     18         </svg>
     19         <div class="wave-background__fill"></div>
     20     </div>
     21 </template>
     22 
     23 <style scoped>
     24 .wave-background {
     25     display: flex;
     26     flex-direction: column;
     27 }
     28 
     29 .wave-background__svg {
     30     margin-top: var(--spacing-7);
     31     fill: #fff;
     32 }
     33 
     34 .wave-background__fill {
     35     flex-grow: 1;
     36     background: #fff;
     37 }
     38 </style>