格 千格 KiloCell

SVG Wave Wave Generator

Generate smooth, fine SVG wave partition lines. It's a new way to make your page paragraphs more natural and design-oriented. 



















































Addressing specific issues: How to break the web layout ' s rigidity?



          Most pages follow the “cube stacking” principle. Although this structure is easy to develop, it often appears to be monotonous and indecisive. Especially in areas of transition of different colours, a straight horizontal line tends to make design look very cheap.
          SVG Wave Wave Generator
          It's what it's made of, it can make your page fresh through the flow curve.
        


1. Why SVG instead of bitmap?



          In the early web design, wave effects usually use a huge PNG. Pictures as background. There are three serious problems with this practice:
        


    

  • 
Size size:
            High-resolution wave pictures tend to reach hundreds of KBs, which are severely slowing down the loading speed of the first screen.
          
    • 

  • 
Could not close temporary folder: %s
            On the Retina screen or ultra-widening display, the bitmap becomes blurred or sawn.
          
    • 

  • 
Colour deadboard:
            If you want to change the colour of the wave, you have to re-open the photo of Photoshop.
          
    • 




          Waves generated by SVG codes are almost negligible in size (usually less than 1KB) and maintains sharpness at any resolution and can change colours in real time by code.
        


2. Design policy for wave partition lines


When using waves, note the following to enhance user experience:


    

  • 
Not too big for amplitude:
            The excessive wave would encroach on the page content space and even interfere with text reading. It is recommended that the amplitude be maintained at 10-20% of the block height.
          
    • 

  • 
Level sense design:
            You can generate two layers of waves that are close and transparent, and allow them to shift at different speeds, creating deep waves.
          
    • 

  • 
Contrast:
            Ensure that the colour of waves is sufficiently contrasted with the background blocks to maximize the impact of this visual guidance.
          
    • 



3. Common application scenarios


The wave partition line is most suitable for the following locations:


    

  • 
Hero Section (Homeland)
            The design details of the brand are felt on the front screen by the user.
          
    • 

  • 
Product function list transition:
            Different functional modules are distinguished by wave.
          
    • 

  • 
Top:
            Adds an elegant radians to the end of the page.
          
    • 



How can it be applied in the project?



          You can copy the SVG code directly and place it in two.
          section
          between labels. Or you could use it as a...
          background-image
          Use:
        


.wave-divider {
  width: 100%;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,...');
  background-repeat: no-repeat;
  background-size: cover;
}