Handwriting an SVG Coronary heart, With Our Hearts

Based on native grocery shops, it’s the Valentine’s Day season once more, and what higher technique to specific our love than with the image of affection: a coronary heart. Some time again on CSS-Tips, we shared a number of methods to attract hearts, and the response was dreamy. Take a look at all these wonderful, heart-filled submissions on this assortment on CodePen:

Temani Afif’s CSS Shapes website presents an excellent trendy coronary heart utilizing solely CSS:

Now, to indicate my love, I needed to do one thing private, one thing artful, one thing with a light quantity of effort.

L is for Love Traces

Handwriting a love be aware is a basic romantic gesture, however have you ever thought-about handwriting an SVG? We received’t want some fancy vector drawing device to precise our love. As a substitute, we are able to open a clean HTML doc and add an <svg> tag:

<svg>

</svg>

We’ll want a technique to see what we’re doing contained in the “SVG realm” (as I prefer to name it), which is what the viewBox attribute offers. The 2D airplane upon which vector graphics render is as infinite as our love, fairly actually, full with an x- and y-axis and all (like from math class).

We’ll set the beginning coordinates as 0 0 and finish coordinates as 10 10 to make a good-looking, sq. viewBox. Oh, and by the best way, we don’t concern ourselves over pixels, rem values, or every other unit sorts; that is vector graphics, and we play by our personal guidelines.

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

<svg viewBox="0 0 10 10">

</svg>

Now we are able to start drawing our coronary heart, with our coronary heart. Let’s make a line. To try this, we’ll have to know much more about coordinates, and the place to stay ’em. We’re ready to attract a line with many factors utilizing the <path> ingredient, which defines paths utilizing the d attribute. SVG path instructions are troublesome to memorize, however the effort means you care. The trail instructions 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 solely focused on drawing line segments for now, so collectively we’ll discover the primary two: MoveTo and LineTo. MDN romantically describes MoveTo as choosing up a drawing instrument, reminiscent of a pen or pencil: we aren’t but drawing something, simply transferring our pen to the purpose the place we need to start our confession of affection.

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

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

Not shocking then to search out that LineTo is akin to placing pen to paper and drawing from one level to a different. Let’s draw the primary phase of our coronary heart by drawing a LineTo (L) with coordinates (4,4), represented as L2,2 subsequent within the d attribute:

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

We’ll add a ultimate line phase as one other LineTo L with coordinates (6,2), once more appended to the d attribute as L6,2:

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

Should you cease to preview what we’ve achieved thus far, it’s possible you’ll be confused because it renders an upside-down triangle; that’s not fairly a coronary heart but, Let’s repair that.

SVG shapes apply a fill by default, which we are able to take away with fill="none":

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

Quite than filling within the form, as a substitute, let’s show our line path by including a stroke, including coloration to our coronary heart.

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

Subsequent, add some weight to the stroke by rising 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>

Lastly, apply a stroke-linecap of spherical (sorry, no time for butt jokes) to spherical off the beginning and finish factors of our line path, giving us that basic image of affection:

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

Perfection. Now all that’s left to do is ship it to that particular somebody.

💜

---

Handwriting an SVG Coronary heart, With Our Hearts initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the publication.