Build a Heart Icon - Step 4

HTML-CSS
1

Tell us what’s happening:

How do I add a path element inside my svg element…please don’t comment “IF JOHNNY HAD 5 APPLES”! I can read , I do not understand what I am doing wrong. Is this “” not a path element?

Your code so far

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>
  <body>

<!-- User Editable Region -->

    <svg width="24" height="24" viewBox="0 0 24 24">
      <path>
    </svg>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Heart Icon - Step 4

2

SOOOOOOOO no one is going to help me with this?!!!???

3

The path element is just an container or shape data.

  • The attribute d tells SVG the path commands like where to move, draw lines, curves, etc.

  • Without it, nothing gets drawn so your code “works,” but there’s nothing visible.

Your path is correct, but you must include a d attribute (and optionally stroke/fill).

Here is an example

  1. M10 10 –> Move to (10,10)
  2. H90 –> Draw a horizontal line to x=90
  3. V90 –> Draw a vertical line to y=90
  4. H10 –> Draw back to x=10
  5. Z –> Close the path
4

thank you for that but I still don’t understand what I am doing wrong? Am I supposed to make the actual heart shape? Any shape? Just create a template for a path? this is beyond confusing and frustrating

5

can you post a link to the challenge you are working on?

6

when you create a element, what do you write, an opening tag, and a … ?

hint: path is not a void element