https://github.com/shakibamoshiri/pure-svg-animation

SVG animations without CSS or JS
https://github.com/shakibamoshiri/pure-svg-animation

animate animatemotion animatetransform animation pure-svg-animation svg

Last synced: about 1 month ago
JSON representation

SVG animations without CSS or JS

• Host: GitHub
• URL: https://github.com/shakibamoshiri/pure-svg-animation
• Owner: shakibamoshiri
• License: mit
• Created: 2018-03-14T09:33:34.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-04-27T07:03:20.000Z (almost 3 years ago)
• Last Synced: 2024-11-08T08:44:51.422Z (3 months ago)
• Topics: animate, animatemotion, animatetransform, animation, pure-svg-animation, svg
• Language: HTML
• Homepage: http://svgfun.ir
• Size: 35.2 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



  









SVG animations without **CSS** nor **JS**; a silly or maybe crazy idea which came to my mind for some reasons.  

I am still learning this technology, so you may see (for sure you will see) some mistakes in these samples.  

Also these SVGs which you see them here, have been created using: badge-for-git.









  






The big one is try these samples on a **modern** web-browser which not only supports SVG but also SMIL. And  

**IE** browser does not support it (= SMIL) for more see this page: the fall and rise of SVG









  






### In order of their time:  

Simple:  

 - radio-button-1: `?s`

 - radio-button-2: `?s`

 - buttons: `18s`

 - owl: `19s`

 - draw-UIUX: `20s`

 - typewriter: `21s`

 - heart-ECG: `25s`

 - DevOps: `25s`

   - It would become complicated if I have wanted it to be exactly like wikipedia-page

 - fish-and-gull: `27s`

 - circles: `28s`

 - heart2: `43s`

 - spiral: `63s`

 - yin-yang: `115s`

Complex:  

 - about-me  

   - This is a sample of a simple Personal-Web-Page which can be all in SVG.  

   - Also you can see it here: shakibamoshiri.ir