Animate Stroke Loaders in Minutes SVGator

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=l2NJaoBnqqU

Welcome to our channel. These tutorials are for SVGator - the most advanced SVG animation creator: https://www.svgator.com • Your teacher today: Matt Gordon of https://www.g5designs.art/ • In this tutorial, you will learn how to create a 1.5-second looping stroke loader animation in SVGator. This technique can be extended to other illustrations, allowing you to replicate the process. • 00:26 Set Up the Canvas • 04:52 Set Up for Animation • 09:47 Animate the Stroke Offset • 12:58 Refinement • Here's a detailed guide on how to create and animate a 1.5-second looping stroke loader animation, emphasizing the most critical steps. • Preparation • Create a 2100 x 2100 pixel canvas with a dark slate gray background. Add a centered 1740 x 1740 pixel stroked square as a margin guide and lock it. Draw four 780 x 780-pixel squares, place them in a 2x2 grid within the margin guide, lighten their colors slightly, then group and lock them as the Background. • Animate • Start by designing a loader element. Enable Snap to Grid , and place 12 anchor points evenly with the pen tool. Shift every other point upward to create a wave shape, then round these points for smoothness, and set the stroke to 26 points with rounded ends. • Center-align the wave in the workspace, then duplicate it to create multiple layers labeled Wave 1 , Wave 2 , etc. For Wave 1, set an initial stroke offset of 600 with a dash-gap pattern, animating it to 0 for a flowing effect. Adjust dash and gap values for each wave layer • Preview and Final Adjustments • Play through the animation to observe the three animated waves moving in tandem. Adjust colors for additional contrast if necessary. These steps can be replicated to create additional stroke loaders with the same principles. • Subscribe: / @svgator • Let's connect: • Facebook: / svgator • Instagram: / svgatorapp • Twitter: / svgatorapp • LinkedIn: / svgator • SVGator is an online SVG (Scalable Vector Graphics) animation creator.

#############################

New on site