Chinwendu AgbaetuoIntroduction
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.
