A rather geeky/technical weblog, est. 2001, by Bramus
This is crazy: Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters. Built on top of PoseNet to track the body’s pose, and the aforementioned …
Continue reading “Pose Animator – Animate SVG Illustrations using your Camera”
Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings: See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen. Creating a Pencil Effect in SVG → 💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat …
Great “hack” popularized by Lea Verou (but first discovered by Leandro): if you place an emoji inside <text> in an SVG Favicon you instantly have an Emoji Favicon 🙂 Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">💩</text></svg> Useful …
There’s a good deep dive into SVG Properties and CSS on CSS-Tricks: SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner …
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Think SVG line animations, but then …
A commit that landed in Chromium (and which will be available in Chrome 80) is support for SVG favicons. 🎉 🦊 Firefox already has support for SVG favicons, ever since version 41 Since most (all?) browsers always make a request to favicon.ico you can also serve an SVG at that location with the image/svg+xml MIME …
react-native-svg-transformer
React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components. This makes it possible to use the same code for React Native and Web. Oh, …
Continue reading “Easily use SVG files in React Native with react-native-svg-transformer“
Sara Soueidan: An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. Putting aside the UX side of the coin and whether or not an icon alone is enough to convey …
Another great entry in the “Making Future Interfaces” video series by Heydon Pickering. This one here is a basic introduction to SVG. Like with his other videos: even if you already know about the topic he’s talking about: just watch it, the presentation style and puns are great 🙂 Related: Here’s a post of mine …
Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through …