--description--

In a previous lesson, you learned about svg elements and how they're often used as icons in projects. In real-world codebases, you would typically rely on icon libraries, so you don't need to create svg elements from scratch. However, in this workshop, you'll build a heart icon to learn about the core attributes used inside an svg element.

Start by creating an svg element on the page.

--hints--

You should have an svg element on the page.

const svg = document.querySelector('svg');
assert.exists(svg);

--seed--

--seed-contents--

html

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

Step 1

--description--

--hints--

--seed--

--seed-contents--