Draw Double Curved Item with Beveled Edges

Draw double curved item with beveled edges

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

Draw a curved line from an arc edge

You expressed an interest in seeing how this could be solved using the stencil buffer yesterday, so I am following up with some basic pseudo-code.

glClearStencil (0x0);
glClear        (GL_STENCIL_BUFFER_BIT);

glEnable       (GL_STENCIL_TEST);
glStencilFunc  (GL_ALWAYS, 0x0, 0x0);

// Add 1 to stencil buffer at every location the object to be bordered is visible
glStencilOp    (GL_KEEP, GL_KEEP, GL_INCR);

// Draw your grey object

// Only draw the red border where the grey object was never drawn (stencil = 0x0)
glStencilFunc  (GL_EQUAL, 0x0, 0xff);

// Draw your red quarter circles

glDisable     (GL_STENCIL_TEST);

Clearing the stencil buffer everytime you draw your outlined object is probably overkill. If you opt to clear the stencil buffer once per-frame instead, you can do some pretty interesting things. For instance, if you drew the outlines as a separate pass after all non-outlined shapes are drawn you could use this stencil buffer setup to outline the union (instead of including the intersection of objects as part of the drawn outline) of any overlapping objects.. this would allow you to construct more complicated shapes from your simple rounded rectangles.

Of course for this to work, your pixel format must have a stencil buffer. I will have to leave that part up to you, because the process of setting that up is implementation specific.

UIBezierPath, how to draw QuadCurve

I am solved this problem using "addCurve" instead of "addQuadCurve".
code which I am replace

from:

// center left edge
        
        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) - 35, y: (11/2.0)), controlPoint: CGPoint(x: (viewWidth / 2 ) - 35, y: 0))
        // end left edge
        
        path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 35, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi * Double.pi), clockwise: false)
        
        // How to draw this curve?
        
        // center right edge
//        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) + 35 + 10 , y: 0), controlPoint: CGPoint(x: (viewWidth / 2 ) + 35 - 10, y: 10))
        
        
        // end right edge

to:

// center left edge

    path.addCurve(to: CGPoint(x: (viewWidth / 2) - 35.9, y: 10), controlPoint1: CGPoint(x: (viewWidth / 2) - 35, y: 0), controlPoint2: CGPoint(x: (viewWidth / 2) - 35, y: 10))
    // end left edge
    
    path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 36.5, startAngle: CGFloat(Double.pi), endAngle: CGFloat(2 * Double.pi), clockwise: false)
    
    // How to draw this curve?
    
    // center right edge
    path.addCurve(to: CGPoint(x: (viewWidth / 2) + 35 + 8, y: 0), controlPoint1: CGPoint(x: (viewWidth / 2) + 36, y: 10), controlPoint2: CGPoint(x: (viewWidth / 2) + 35, y: 0))

    // end right edge

Result:

---

Related Topics