Cool SVG-Related Things You Need to See
Lemme show off some cool SVG-related things this week. Gotta love SVG – it’s this graphics language built right into the web platform that has a ton of capability and is always right there waiting for us when we need it. Thanks the web!
One of the coolest features of SVG is its portability. You can copy and paste a bit of SVG right into HTML, which is not only functional but also a pretty good way to do it. That way you can style it freely and no additional network request is made. For example, our icons feature here on CodePen works this way.
It’s a common way to deliver UX on a set of SVG icons generally. For example, check out Monika Michalczyk’s Shapes project, where you can just click on any shape and get the code right on your clipboard.
Robb Knight’s Mac 30th Anniversary Icons are also worth checking out. They are minimalist representations of Mac devices over the last many decades.
Learning the SVG syntax can be a valuable skill. SVG paths alone are quite complex and require some understanding. If you’re looking to dive deeper into SVG syntax, there are guides available to help you grasp the concepts.
Sébastien Noël has created a helpful guide on understanding various SVG element attributes like circles and more. Interactive examples can make learning SVG syntax more engaging.
yuanchuan, the creator of css-doodle, is exploring a new syntax to write SVG, centered around the idea of moving stylistic SVG attributes to a CSS-like syntax that can not only style but create SVG elements.
And now, for the best part – Draw SVG rope using JavaScript. Stanko Tadić shares a fascinating journey into creating a realistic twisted rope effect using SVG and JavaScript. The detailed documentation and demo make it a must-see for SVG enthusiasts.