All geek questions in one place

How were the bugs made?

http://livicons.com/

I am wondering if anyone can explain to me how these badges were made. I see that they are SVG and animated with Raphael js, but each icon is drawn on canvas? Or the actual svg file of icons that each animated independently using raphael.js?

I have an icon that I want to use on my own, and see if I can animate it in my own way, similar to these icons. Does anyone have any ideas or teachings about this technique? I read through raphael js, but it looks like it's mainly for drawing SVG and then for animation, so I'm not 100%.

I also tried to read the inspector, but I can’t understand what each animation does (how does it know which part of the icon to manipulate, etc.?)

Thanks everyone!

+6
source share
2 answers

I am Dee, author of LivIcons. Just looked at the traffic from Stackoverflow on my sites :)

The answer is given, but nonetheless I will try to give a brief explanation of how I created LivIcons.

All magic in Raphael js lib (Special thanks to Dmitry Baranovsky).

  • These icons are not always SVG, they are VML in IE6-IE8.
  • The first step is to create an SVG file with the path (s) in it for each icon shape in any vector software, for example, ex. Adobe Illustrator
  • If the animation is not simple (for example, rotate, move or scale), you need to create additional paths for each frame. Thus, your animation will go through these frames from start to finish.
  • After that, you take the values ​​of these paths for the script.
  • Using Raphaeljs in one function, you create the initial state for the icon method - Paper.path ([pathString]) and animate these paths using the Element.animate (...) method. This feature also captures or clicks events and changes color on hover.

So this is a very short guide. I have been working on the first 303 badges for 4 months. If you have time and aspiration, you can also try.

Best wishes and good luck!

Di

+10
source

They animate SVG elements (vector) using the javascript and hover event .. read about it here

Example:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> <path fill="#000000" stroke="none" d="M25.59,13.368C25.814,13.598,26,13.52,26,13.197V6.584C26,6.262,25.738,6,25.416,6H18.803C18.481,6,18.403000000000002,6.186,18.633,6.41L21.227,9.004L15.999,14.231L10.774000000000001,9.006L13.369000000000002,6.41C13.598,6.185,13.52,6,13.198,6H6.584C6.262,6,6,6.262,6,6.584V13.198C6,13.519,6.185,13.597000000000001,6.411,13.369L9.007,10.774L14.232,15.998999999999999L9.004999999999999,21.226999999999997L6.41,18.633C6.186,18.402,6,18.48,6,18.803V25.416C6,25.738,6.262,26,6.584,26H13.197C13.518999999999998,26,13.597,25.816,13.367999999999999,25.59L10.771999999999998,22.994L15.998999999999999,17.766L21.226999999999997,22.994L18.632999999999996,25.59C18.402999999999995,25.815,18.480999999999995,26,18.802999999999997,26H25.415999999999997C25.738,26,26,25.738,26,25.416V18.803C26,18.481,25.814,18.403000000000002,25.59,18.633L22.994,21.227L17.766,15.999L22.994,10.772L25.59,13.368Z" stroke-width="0" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect> </svg>
+4
source

Source: https://habr.com/ru/post/950380/

More articles:


All Articles