Creating complex SVG animations can be a challenging and tedious task — but not anymore. In this article, Mikołaj Dobrucki will show you how to create path animations for the web using SVGator, an online app created especially for the purpose of animating SVG files. It is a web-based app that allows you to import static SVG files, animate them using a user-friendly visual interface, and export them as animated SVG. Exported animations are CSS-based and ready to use on the web.
Read more…
When designing interfaces for IoT web page, one always has many options. In the previous part of this article, Richard Leddy shed light on the meaning of IoT and how Vue.js can be used to hosts groups of IoT human-machine interfaces. Today, Richard Leddy will take a closer look at lazy-loading panels and how to keep the Vue state in sync with devices. More about the editing process may be considered in some other discussion. There is a lot to it. But, for now, we have the tools we need in order to load hierarchal components and make them come alive.
Read more…
IoT is growing to include many devices with many owners. Web developers will be faced with the problem of finding ways to enable owners to interact with their devices. But, this problem gives rise to a great deal of business. In this article, Richard Leddy will explore some aspects of web page development for the Internet of Things (IoT) that are already in demand. This discussion delves into the interface requirements using Vue.js as a catalyst and illustrates one method of webpage to device communication out of many subsitutions.
Read more…
To make the best of SVG, it’s useful not only to learn its syntax but also to understand how SVG is generated by graphic design software. Let’s take a closer look at the process of generating SVG with popular design apps and how we can use them to our own advantage. In this post, Mikolaj Dobrucki will shed light on three of the most popular design tools: Adobe Illustrator, Sketch, and Figma. There are also other tools available supporting SVG that may have other functionalities and implement other solutions. This article should be enough to deal with the most common use cases.
Read more…
There are a good number of benefits in being able to write SVG by hand, such as optimizing SVGs in ways a tool can’t (turning a path into a simpler path or shape), or by simply understanding how libraries like D3 or Greensock work. In this article, Bryan Rasmussen will show you how to turn SVG circles into paths which you can use in animation and text paths, as well as how to turn paths into circles. Once you’ve figured out how it all works, you’ll be able to achieve some quite practical effects. Let’s dig in.
Read more…
In this article, you can learn how to build the animated note display from the Awwwards website. It discusses the HTML5 SVG circle element, its stroke properties, and how to animate them with CSS variables and Vanilla JavaScript.
Read more…
Have you ever had a requirement in which you had to design and build an interactive web experience but the grid system fell short? Furthermore, the design elements turned into unusual shapes that just wouldn’t fit into the regular web layouts? In this article, Krutie Patel is going to build an interactive infographic using Vue.js, SVG and GreenSock by using dynamic data and unusual layout.
Read more…
We’re pretty excited by tools such as SVGator, which really speed up the process when you’re making simple SVG animations. Animated SVG files have become very popular, because they are entirely scalable, small and 100% code-based, which allows for so many transformations and tweaks. This, however, comes at a price: the steep learning curve for complete beginners. In this article, Vitaly Friedman will show you how easy it is to use and how you can get a great-looking animation in no time.
Read more…
SVG supports the same kind of interactivity we’re used to with HTML. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction. Every browser that supports SVG supports the property for SVG documents and elements. When used with HTML elements, support is slightly less robust. It isn’t available in Internet Explorer 10 or its predecessors, or any version of Opera Mini. In this article, Tiffany Brown will scratch the surface of pointer-events.
Read more…
For the Build 2016 conference, David Rousset had to create a small 8-bit drum machine, with 8-bit sounds and graphics. Building it might sound trivial, but it raises some interesting questions. For instance, how do you guarantee the same experience across all devices and browsers, accounting for resolution and touch support? In this article, David Rousset is going to share some tips he followed to build it.
Read more…
