This content originally appeared on DEV Community and was authored by Chinwendu Agbaetuo
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.
This content originally appeared on DEV Community and was authored by Chinwendu Agbaetuo
Chinwendu Agbaetuo | Sciencx (2024-07-03T22:35:47+00:00) Recreate Angular Logo with SVG. Retrieved from https://www.scien.cx/2024/07/03/recreate-angular-logo-with-svg/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.