Handwriting an SVG Heart, With Our Hearts

According to local grocery stores, it’s the Valentine’s Day season again, and what better way to express our love than with the symbol of love: a heart. A while back on CSS-Tricks, we shared several ways to draw hearts, and the response was dreamy. Check out all these amazing, heart-filled submissions in this collection on CodePen:

Temani Afif’s CSS Shapes site offers a super modern heart using only CSS:

Now, to show my love, I wanted to do something personal, something crafty, something with a mild amount of effort.

L is for Love Lines

Handwriting a love note is a classic romantic gesture, but have you considered handwriting an SVG? We won’t need some fancy vector drawing tool to express our love. Instead, we can open a blank HTML document and add an <svg> tag:

<svg>

</svg>

We’ll need a way to see what we are doing inside the “SVG realm” (as I like to call it), which is what the viewBox attribute provides. The 2D plane upon which vector graphics render is as infinite as our love, quite literally, complete with an x- and y-axis and all (like from math class).

We’ll set the start coordinates as 0 0 and end coordinates as 10 10 to make a handsome, square viewBox. Oh, and by the way, we don’t concern ourselves over pixels, rem values, or any other unit types; this is vector graphics, and we play by our own rules.

We add in these coordinates to the viewBox as a string of values:

<svg viewBox="0 0 10 10">

</svg>

Now we can begin drawing our heart, with our heart. Let’s make a line. To do that, we’ll need to know a lot more about coordinates, and where to stick ’em. We’re able to draw a line with many points using the <path> element, which defines paths using the d attribute. SVG path commands are difficult to memorize, but the effort means you care. The path commands are:

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• Cubic Bézier curve: C, c, S, s
• Quadratic Bézier Curve: Q, q, T, t
• Elliptical arc curve: A, a
• ClosePath: Z, z

We’re only interested in drawing line segments for now, so together we’ll explore the first two: MoveTo and LineTo. MDN romantically describes MoveTo as picking up a drawing instrument, such as a pen or pencil: we aren’t yet drawing anything, just moving our pen to the point where we want to begin our confession of love.

We’ll MoveTo (M) the coordinates of (2,2) represented in the d attribute as M2,2:

<svg viewBox="0 0 10 10">
  <path d="M2,2" />
</svg>

Not surprising then to find that LineTo is akin to putting pen to paper and drawing from one point to another. Let’s draw the first segment of our heart by drawing a LineTo (L) with coordinates (4,4), represented as L2,2 next in the d attribute:

<svg viewBox="0 0 10 10">
  <path d="M2,2 L4,4" />
</svg>

We’ll add a final line segment as another LineTo L with coordinates (6,2), again appended to the d attribute as L6,2:

<svg viewBox="0 0 10 10">
  <path d="M2,2 L4,4 L6,2" />
</svg>

If you stop to preview what we’ve accomplished so far, you may be confused as it renders an upside-down triangle; that’s not quite a heart yet, Let’s fix that.

SVG shapes apply a fill by default, which we can remove with fill="none":

<svg viewBox="0 0 10 10">
  <path d="M2,2 L4,4 L6,2" fill="none" />
</svg>

Rather than filling in the shape, instead, let’s display our line path by adding a stroke, adding color to our heart.

<svg viewBox="0 0 10 10">
  <path 
    d="M2,2 L4,4 L6,2" 
    fill="none" 
    stroke="rebeccapurple" />
</svg>

Next, add some weight to the stroke by increasing the stroke-width:

<svg viewBox="0 0 10 10">
  <path 
    d="M2,2 L4,4 L6,2" 
    fill="none" 
    stroke="rebeccapurple" 
    stroke-width="4" />
</svg>

Finally, apply a stroke-linecap of round (sorry, no time for butt jokes) to round off the start and end points of our line path, giving us that classic symbol of love:

<svg viewBox="0 0 10 10">
  <path 
    d="M2,2 L4,4 L6,2" 
    fill="none"
    stroke="rebeccapurple"
    stroke-width="4"
    stroke-linecap="round" />
</svg>

Perfection. Now all that’s left to do is send it to that special someone.

💜

---

Handwriting an SVG Heart, With Our Hearts originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Source: Read More