Best of SVG — April 2026

1. 1
   Article

   CSS Tip·6w

   Convert Complex SVG Shapes into CSS

   An SVG-to-CSS converter tool has been updated to support multiple SVG path elements, not just a single path. It merges multiple path elements by concatenating their 'd' attribute values and converts them into a single CSS shape() function, producing responsive single-element code. A border-only version using border-shape is also available (Chrome-only). The technique works when paths form separate portions of the same shape, share the same color, and have no transforms applied. The author emphasizes that shape() is not a replacement for SVG but a proof-of-concept tool.

   154

   8
2. 2
   Article

   Josh W Comeau·6w

   Squash and Stretch • Josh W. Comeau

   A tutorial on applying Disney's 'squash and stretch' animation principle to SVG micro-interactions on the web. Covers implementing stretchy arrow icons using CSS path transitions and the Motion JavaScript library, with tips on spring physics easing and event-based (vs. state-based) hover interactions. Also includes a bouncing ball playground demonstrating the same principle with CSS keyframes and custom properties.

   41

   3
3. 3
   Article

   Blogging and all that Malarkey·5w

   How I designed an information-rich website for The Shared Homeland Paradigm

   Andy Clarke shares his design process for building an information-rich website for The Shared Homeland Paradigm, a political research project on Palestine-Israel. He walks through his typography selection process (settling on Bankside Sans by Dalton Maag), graphic concept development including topographical maps, a carefully considered color palette that avoids politically charged flag colors, and the use of Eleventy as the CMS. The post emphasizes story-led web design where layout, type, and graphics work together to communicate complex ideas.

   17

   1