W3docs
en
Log in

How to Create a Teardrop in HTML

The best way of creating a teardrop is to use SVG, which is used to specify vector-based graphics. In our snippet, we show how to create a teardrop using SVG.

Tags

The best way of creating a teardrop is to use SVG, which helps to specify vector-based graphics.

If you want to have a double curve, simply use inline SVG and a <path/> element.

Let’s see how to do this.

Create HTML

  • Use a <svg> element and specify the <span class="attribute">width</span> and <span class="attribute">viewBox</span> attributes.
  • Add a <path/> element and specify the <span class="attribute">fill</span>, <span class="attribute">stroke</span>, and <span class="attribute">stroke-width</span> attributes.
  • Add the <span class="attribute">d</span> attribute to specify the path that should be drawn.
  • Use two quadratic bezier curve commands (lines starting with Q) for the two top curves.
  • Use an arc command (line starting with A) for the bottom.

Example of creating a teardrop:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="30%" viewBox="0 0 30 42">
      <path fill="transparent" stroke="#000" stroke-width="1.5" d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" />
    </svg>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <svg viewBox="0 0 30 42" width="20%"> <path d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" fill="transparent" stroke="#000" stroke-width="1.5" /> </svg> </div>While SVG offers multiple ways to draw curves, this shape specifically uses two quadratic Bezier curves (Q) and an arc (A). The <path> element supports two Bezier commands: cubic (C) and quadratic (Q).

In our example, we used the quadratic curve, which is simpler than the cubic one. We only need a control point specifying the slope of the curve at both the starting and ending points. And arcs are used to create pieces of circles or ellipses.

In such cases, using SVG offers some advantages such as curve control, fill control, stroke control, time to build and maintain the shape, no HTTP request, and so on.