SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

SVG (Scalable Vector Graphics) is a powerful web technology that allows developers to create scalable, interactive graphics using XML syntax. Unlike traditional image formats, inline SVGs can be styled with CSS and manipulated with JavaScript as first-class DOM citizens. The tutorial covers basic SVG shapes (circles, rectangles, polygons), the viewBox attribute for scalability, and advanced stroke animations including dash patterns and drawing effects. Key concepts include using presentational attributes, creating smooth transitions, and leveraging stroke-dasharray and stroke-dashoffset for dynamic visual effects.

A Friendly Introduction to SVG • Josh W. Comeau

Link to this heading Presentational Attributes

the demon keeps asking me to subscribe

Thank you for sharing, nice article 🙌

There is a follow-up article available: <a href="https://www.joshwcomeau.com/svg/interactive-guide-to-paths/" target="_blank" rel="noopener nofollow">https://www.joshwcomeau.com/svg/interactive-guide-to-paths/</a>

Another great article from Josh!
It’s exciting to read articles like this and see how many cool and interesting things and tricks are out there for you to try

Always such great articles from Josh! 👏🏻👏🏻
And this is another one 🎉