Draw double curved item with beveled edges

by

I created 2 SVG examples so you can choose where to apply the background

Codepen demo

The outer container of each SVG element keeps a specific aspect ratio so the whole element can be responsive (but, of course, you can also specify a fixed width or height).

The basic idea is to create a path that overflows the size of the SVG element, so you can define a closed shape on the top area or on the bottom area, in order to fill it with a colour (if you enlarged the viewbox e.g. to -10 -10 610 130 you could see how the path is actually defined).

The applied background is a gradient but you can also specify a single color-stop (white, in your specific scenario). The background on the body element shows the transparent parts of the SVG.

Fine tuning and adjustment of curves, viewbox, colours is left to the reader.

For any change to the shape you can read the path documentation on MDN

Markup

<div class="doublecurve">
  <svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#d8e5f1" />
        <stop offset="100%" stop-color="#91b4d3" />
      </linearGradient>
    </defs>

    <path class="concave" fill="url(#gradient)" d="M-2 2 
            L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
            A75 75 0 0 1 525 2 L602 2 L602 122 L-2 122 z"/>
  </svg>
</div>



<div class="doublecurve">
  <svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">

    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#d8e5f1"/>
        <stop offset="100%" stop-color="#91b4d3"/>
      </linearGradient>
    </defs>

    <path class="concave" fill="url(#gradient)" d="M-2 2 
            L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
            A75 75 0 0 1 525 2 L602 2 L602 -2 L-2-2"/>
  </svg>
</div>

CSS

.doublecurve {
  width: 100%;
  height: 0;
  margin: 20px 0;
  border: 1px dashed #bc9;
  padding-bottom: 20%;
  position: relative; }

.doublecurve svg { 
  position: absolute;
  width: 100%; height: 100%;}

.doublecurve path.concave { 
  stroke: #d0d0d0; 
  stroke-width: 4px;}

Final Result

enter image description here

More Related Contents:

  1. Fill SVG path element with a background-image
  2. How to modify the fill color of an SVG image when being served as background image?
  3. SVG drop shadow using css3
  4. How to create a circle with links on border side
  5. How to apply a style to an embedded SVG?
  6. SVGs not scaling properly in IE – has extra space
  7. Add a background image (.png) to a SVG circle shape
  8. border curved css – circle with curved end
  9. How to style SVG with external CSS?
  10. html/css hexagon with image inside
  11. Setting transform-origin on SVG group not working in Firefox
  12. Responsive CSS Trapezoid Shape
  13. Circular percent progress bar
  14. Linking to CSS in an SVG embedded by an IMG tag
  15. Creating a ‘New’ spiky label with 24 or above point burst
  16. How to cut a circular part from an image?
  17. How to calculate required hue-rotate to generate specific colour?
  18. Making an svg image object clickable with onclick, avoiding absolute positioning
  19. How to change SVG color when it is an encoded CSS background image?
  20. How to get rid of extra space below svg in div element
  21. How to get ScrollBars in SVG?
  22. CSS transform origin issue on svg sub-element
  23. Manipulating external svg file style properties with CSS
  24. Css hover sometimes doesn’t work on svg paths
  25. SVG LinearGradient hidden if svg is hidden in seperate class
  26. How do I create a teardrop in HTML?
  27. Create a Reverse Clip-Path – CSS or SVG
  28. Internet Explorer and clip-path
  29. How to curve the div from bottom with image background
  30. svg background image position is always centered in internet explorer, despite background-position: left center;

Leave a Comment