Myriam Frisano is a Swiss lover of words who has fallen head over heels for the world of CSS when she realized it could make one of her biggest dreams as a fiction writer a reality: Painting with words. Ever since, she’s been a professional frontend engineer with a passion for visual code. If Myriam isn’t working on design systems, crafting component code, or writing stories, she’s probably practicing her calligraphy or getting lost in recipe development (or the latest TV show binge).
SVG is easy — until you meet path. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of <path> and its sometimes mystifying commands. With simple examples and visualizations, she’ll help you understand the easy syntax and underlying rules of SVG’s most powerful element so that by the end, you’re fully able to translate SVG semantic tags into a language path understands.
Read more…
Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictures with words!”
Read more…
