Recreate Angular Logo with SVG
Chinwendu Agbaetuo
Posted on July 3, 2024
Introduction
Using path elements, the first thing to create is the outer shield. The logo shield is made of a lighter and darker portion, which creates an illusion of a fold. Let's create the shield.
<svg width="800" height="600">
<path fill="#dd002e" d="M 0 50 L 100 0 L 200 50 L 190 185 L 100 235 L 10 185 Z"></path>
<path fill="#c4002b" d="M 100 0 L 200 50 L 190 185 L 100 235 Z"></path>
</svg>
Explanation:
For the darker portion, there are seven instructions:
M 0 50
L 100 0
L 200 50
L 190 185
L 100 235
L 10 185
Z
The instructions work with coordinates, and M is the initiating origin, where the SVG starts from, L command is for lines that need to be drawn to a coordinate, and the Z command closes a path.
To draw letter A
// <svg width="800" height="600">
// <path fill="#dd002e" d="M 0 50 L 100 0 L 200 50 L 190 185 L 100 235 L 10 185 Z"></path>
// <path fill="#c4002b" d="M 100 0 L 200 50 L 190 185 L 100 235 Z"></path>
<path fill="#fff" d="M 100 35 L 30 185 H 50 L 100 70 Z"></path>
<path fill="#fff" d="M 100 35 L 170 185 L 150 185 L 100 70 Z"></path>
<path fill="#fff" d="M 78 120 L 122 120 L 132 140 L 68 140 Z"></path>
// svg
Result
See the Pen
SVG Angular Logo by Chinwendu (@dindustack)
on CodePen.
💖 💪 🙅 🚩
Chinwendu Agbaetuo
Posted on July 3, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
