![]() The way Pen Tool works makes it really easy to modify the shape without losing the smooth, continuous line of it. Next, we can duplicate the blob and use the Pen Tool again to create two more different blobs. In this case, I only applied an x-axis blur. Notice that as SVGator uses native SVG filters instead of CSS, it allows you to control the blur properties for both axes separately. I also applied a light blur filter on the element as a final touch. In our case, a single gradient fill and a gradient stroke will do. Modifying the gradient fill of the shape. ![]() It also allows you to style (your fills, strokes, effects, and so on) with confidence that the final result will be as expected, as all these features have been created especially for SVG files. This includes options specific to how SVG handles strokes, fills, gradient elements (have you heard about the spreadMethod attribute of SVG gradients?), filters (such as blur, shadow or sepia), and many others. SVGator, being solely aimed at creating SVG files, takes full advantage of what this format, in particular, has to offer. At the same time, apps focused primarily on user interfaces, cater mostly for what’s possible with HTML and CSS properties, rarely giving much love to SVG-specific features such as stroke markers or filters. Other popular vector graphics applications that allow you to export SVG files usually have to leverage their features to fit a plethora of formats and use cases. Here, we’re stumbling upon one of the biggest competitive advantages of the app. ![]() With a first blob ready, it’s time to style it a bit. If you need more space for drawing you can easily hide and show the app’s sidebars by pressing. It’s also important to note that all the drawing features of SVGator are completely free so you can use it as your SVG-creating software as much as you want for no cost. No need to get in and out of the drawing mode to adjust the lines you already created.Ĭreating and editing shapes in SVGator might feel a bit different than in other vector tools but once you’ve got used to it, it’s truly a breeze. Note that as you keep adding new points to the path, you can always modify the already existing points and curves on the fly by moving and dragging them. What is really cool about this one is that SVGator’s Pencil Tool usually creates shapes with much fewer node points than comparable tools in other apps, which makes the result not only look smoother but also be much lighter on file size. The Pencil Tool would also do well for that purpose. Next, using a Pen Tool, we draw the first blob roughly following the shape of the circle underneath. You can choose from a vast variety of shapes, icons and illustrations. ( Large preview) Did you know? Apart from basic shapes and drawing functionalities, SVGator also offers a library of premade assets to fasten your workflow. Using smart guides to align the circle to the centre. You can also use grids and rulers for better precision and fidelity. Fortunately, SVGator makes it dead simple to align and measure elements, thanks to a smart system of guides and snapping functions. To make it easier for me to create the desired shape, I started by drawing a circle as a guide in the center of the canvas. You can also use boolean functions to combine shapes with one another. SVGator allows you to draw all the standard SVG shapes such as ellipses, rectangles and polygons as well as use a Pen and Pencil tools to draw your own. ( Large preview)įrom here, we can start drawing the illustration we are going to animate later. We begin by creating a new blank file and changing its background color. In this article, we will follow a process of creating a custom SVG loader, from drawing it from scratch and applying various visual effects, through creating different types of animations, to exporting your file and preparing it for use on the web.Ī custom loader made with pure SVG, drawn and animated in SVGator. Advanced animation features are available under a paid plan, starting at 11 USD/month. You can also use basic animation features and export 3 animations per month. On the free plan, you can create and export an unlimited number of SVG graphics. Note: Some of the SVGator’s features covered in this tutorial are paid. This time, we are introducing a new major version of SVGator that offers a matured, complete environment for drawing from scratch and animating SVG graphics. Two years ago, we introduced you to a new version of SVGator and its improved animation capabilities. At that time it was an app meant solely for animating SVG files created in other apps. Three years ago, we published a comprehensive introduction to the basic use of SVGator. SVGator is evolving and it’s evolving a lot. This article has been kindly supported by our dear friends at SVGator who are passionate about designing and producing unique, high-quality, and unforgettable animations.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |