LightNews — News, ranked by scholars

Create SVG Path Stroke Animation | Xyris

www.youtube.com

January 8, 2025 at 9:13 AM

Phuong Dao

@phuongdao.bsky.social

The Interesting 8 🌀: A mesmerizing infinite loop created using SVG path stroke animation. Perfectly smooth, endlessly hypnotic. ✨
#MotionGraphics #SVGAnimation #CreativeCode #XyrisApp

November 24, 2024 at 3:40 AM

Phuong Dao

@phuongdao.bsky.social

I built my vector animation app entirely using vanilla JavaScript and vanilla CSS, as I believe this was the most efficient way to save my limited time—at least for this project.
#buildinpublic, #xyris, #motiongraphics, #svg, #SMIL, #SVGAnimation, #morphing

December 14, 2024 at 10:11 AM

Greg Linscheid

@greglinscheid.bsky.social

My cat Milo, composed of animated SVGs. He really likes following my mouse… 🐾

Pure vector/web animation magic.

#CatsOfBluesky #CreativeCoding #SVGAnimation #SVG #WebDev #FrontEnd #CatArt

July 26, 2026 at 4:39 PM

Xyris

@xyrisapp.bsky.social

Learn how to create a handwriting animation using Xyris!
#xyristutorial #handwritinganimation #motiongraphics #svganimation #designtutorial #animationtips #creativedesigns #xyris #graphicdesign #strokeanimation #howtoanimate

Create SVG Motion Path Animation | Xyris

December 28, 2024 at 10:54 AM

Xyris

@xyrisapp.bsky.social

Learn how to create SVG motion path animations in Xyris without writing a single line of code!
#SVGAnimation #SVGMotionPath #MotionPathAnimation #Xyris #MotionDesign

Create SVG Filter Animation - Animated Neon Effect | Xyris

www.youtube.com

December 16, 2024 at 5:05 AM

Xyris

@xyrisapp.bsky.social

Learn how to design and animate a glowing neon effect using filters in Xyris! This tutorial covers the basics of applying glow effects, animating colors and blur, and exporting your final design.

#xyris, #svganimation, #filteranimation, #neoneffect

youtu.be/oSpkdIA_Tqo

SVG Animation Methods Compared: CSS, SMIL, and JavaScript - Xyris - Free Online SVG Animator

January 21, 2025 at 8:06 AM

Xyris

@xyrisapp.bsky.social

Discover how to animate SVGs without using CSS or JavaScript by leveraging native SMIL animation: xyris.app/blog/how-to-...

#SVGAnimation, #Xyris, #SMIL, #cssanimation

June 6, 2025 at 4:35 PM

Xyris

@xyrisapp.bsky.social

Learn how to create scroll-triggered SVG animations using Xyris and SMIL. Animate visually, control with simple JavaScript—no complex coding required. (link in comment)
#SVGAnimation #ScrollAnimation #WebDesign #JavaScript #XyrisApp #SVG #WebAnimation #CreativeCoding #SMILAnimation

June 15, 2025 at 9:09 AM

Xyris

@xyrisapp.bsky.social

Compare SVG animations: CSS, SMIL, and JavaScript. Learn their pros, cons, and best uses.
xyris.app/blog/svg-ani...
#svganimation, #cssanimation, #webanimation, #xyris

Compare SVG animations: CSS, SMIL, and JavaScript. Learn their pros, cons, and best uses.

All the essential SVG animation techniques.

March 5, 2025 at 2:37 PM

Xyris

@xyrisapp.bsky.social

All the essential SVG animation techniques packed into one short video. #Xyris #SVGAnimation #MotionGraphics
youtu.be/Do_lw4SM6I8

The Complete Guide to Animating SVG: Techniques and Tools - Xyris - The Animation Builder for Stunning Vector Graphics

April 7, 2025 at 10:30 AM

Phuong Dao

@phuongdao.bsky.social

How long does it take you to create a unique loader? How easy is it to integrate into your page?
It took me 10 minutes to design this, and integrating it is as simple as uploading an image.
#svganimation, #xyris, #SMIL, #webdesign, #webanimation, #loader

Original file: xyris.app/wp-content/u...

December 20, 2024 at 8:47 AM

Phuong Dao

@phuongdao.bsky.social

Discover the ultimate guide to SVG animation techniques, including CSS, JavaScript, and SMIL. Learn about their capabilities and best use cases.
#SVGAnimation
#SMILAnimation
#CSSSVGAnimation
#JavaScriptSVGAnimation
#SVGAnimationTechniques
#AnimatingSVG
#BestSVGAnimationMethods

Discover the ultimate guide to SVG animation techniques (CSS, JavaScript, and SMIL). Learn about their capabilities and best use cases.

Top 10 Features Every SVG Animation Editor Should Have - Xyris - Free Online SVG Animator

December 14, 2024 at 9:53 AM

Xyris

@xyrisapp.bsky.social

Discover the top features every SVG animation editor should have, from keyframe support and interactive animations to cloud collaboration and version history.

#SVGAnimation #SVGAnimator #MotionGraphics #SMIL
xyris.app/blog/top-10-...

Discover the top features every SVG animation editor should have, from keyframe support and interactive animations to cloud collaboration and version history.

SVG Transform Animations | Xyris

March 7, 2025 at 12:36 PM

Xyris

@xyrisapp.bsky.social

🎨❄️ Animate a winter sales promotion banner by adding rotation and translation effects to snowflakes.❄️✨

#xyris #animation #2danimation #transformanimation #tutorial #design #ux #ui #webdesign #graphicdesign #snowflakes #animationtutorial #webanimation #svganimation #vectorart #vectoranimation

The Complete Guide to Animating SVG: Techniques and Tools - Xyris - The Animation Builder for Stunning Vector Graphics

December 19, 2024 at 2:55 PM

Daniel Kurdoghlian 🐍🇦🇲

@derblub.com

Messing around with a new SVG text animator I'm building. Pretty fun watching letters do their thing! ✍️💨 What do you guys think of this stroke effect? #SVGanimation #TextEffects #MotionDesign #DevLife

May 17, 2025 at 7:08 PM

Xyris

@xyrisapp.bsky.social

Discover the ultimate guide to SVG animation techniques, including CSS, JavaScript, and SMIL. Learn about their capabilities and best use cases.
#SVGAnimation
#SMILAnimation
#CSSSVGAnimation
#JavaScriptSVGAnimation
#SVGAnimationTechniques
#AnimatingSVG
#BestSVGAnimationMethods

Discover the ultimate guide to SVG animation techniques (CSS, JavaScript, and SMIL). Learn about their capabilities and best use cases.

The Best Tools for Creating Animated Logos | Xyris

December 14, 2024 at 9:54 AM

Xyris

@xyrisapp.bsky.social

Explore top visual tools and libraries for animating SVG logos seamlessly. From intuitive visual editors to powerful libraries, create scalable and engaging animations for the web.
#animatedlogo, #logoanimation, #motiongraphics, #smilanimation #animation, #svganimation, #webanimation, #motiondesign

Explore top visual tools and libraries for animating SVG logos seamlessly. From intuitive visual editors to powerful libraries, create scalable and engaging animations for the web.