---
title: "Discussion on \"Make Your Applications More Attractive Using SVG Animations — Part 2\" | Hashnode"
description: "Discussion on \"Make Your Applications More Attractive Using SVG Animations — Part 2\". Learn how to create SVG animations using CSS, explore stroke drawing effects, and discover tools for designing engaging, interactive web animations."
url: "https://hashnode.com/posts/make-your-applications-more-attractive-using-svg-animations-part-2/6ade4389412d0977220f61cd"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Make Your Applications More Attractive Using SVG Animations — Part 2](https://blog.vihanga.dev/make-your-applications-more-attractive-using-svg-animations-part-2?utm_source=hashnode&utm_medium=feed)

Learn how to create SVG animations using CSS, explore stroke drawing effects, and discover tools for designing engaging, interactive web animations.

Oct 25 · 5 min read · blog.vihanga.dev  
Read the article

-   [#svg](https://hashnode.com/tag/svg)
-   [#svg-animation](https://hashnode.com/tag/svg-animation)

## Written by

[Vihanga nivarthana](https://hashnode.com/@vihanga)

@vihanga · SriLanka

  
[View profile](https://hashnode.com/@vihanga)

Senior UI Engineer @ Velaris.io

working on the front end to build fantastic user interfaces and deliver a top notch user experience.

## Responses 4

Markdown supported · ⌘↵ to post

[Crownforge](https://hashnode.com/@thecrownforge)

[Oct 25](https://hashnode.com/posts/make-your-applications-more-attractive-using-svg-animations-part-2/6ade4389412d0977220f61cd/comment/6ade6c948a5fb597cd7d8ae1)

I would add a reduced motion version of the examples too. The drawing effect should still show the finished path when animation is turned off, otherwise the icon could just disappear.

[Vihanga nivarthana](https://hashnode.com/@vihanga)

[Oct 26](https://hashnode.com/posts/make-your-applications-more-attractive-using-svg-animations-part-2/6ade4389412d0977220f61cd/comment/6ade6c948a5fb597cd7d8ae1#reply-6adea15e6123af80316cda3b)

Good point! I hadn’t considered adding a reduced motion version to the examples. It’s important to make sure the SVG still looks right when animations are disabled, especially for users who prefer less motion. Thanks for pointing this out!

[nullterminal](https://hashnode.com/@nullterminal)

[Oct 26](https://hashnode.com/posts/make-your-applications-more-attractive-using-svg-animations-part-2/6ade4389412d0977220f61cd/comment/6adf5bc3e6eec0146b150c6d)

Reading this level of discussion about prefers-reduced-motion and SVG strokes makes me realize how much l still have to learn.😂 Just a newbie passing by to pay respects!🙌

[melonape](https://hashnode.com/@melonape)

[Oct 26](https://hashnode.com/posts/make-your-applications-more-attractive-using-svg-animations-part-2/6ade4389412d0977220f61cd/comment/6adf3843f218f0c2c96fdb76)

Heads-up for anyone grabbing icons to try the draw effect: it only works on stroked paths. Lucide, Tabler and the Heroicons outline set ship as strokes, so pathLength plus dashoffset works on them as-is. Remix's line icons look like outlines, but they're filled shapes, so nothing draws.

Worth wrapping the keyframes in prefers-reduced-motion too. An infinite alternate pulse is exactly what that setting exists for.