M
M
Max Darkleviathan2018-06-20 17:25:51
SVG
Max Darkleviathan, 2018-06-20 17:25:51

How to animate an SVG image when it appears?

According to the lesson, I created an svg image, tell the experts how to animate it.
The picture consists of lines and circle elements without fills.
It is necessary to make an animation of drawing lines that form a picture when they appear and remain.
Here is the code itself:

<svg>
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:100}
    .fil0 {fill:none}
    .fil1 {fill:#1F1B20}
   ]]>
  </style>
 </defs>
 <g>
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <polygon class="fil0 str0" points="16397,11548 8005,6441 4499,4191 4478,8535 12695,13579 16303,15794 "/>
  <polygon class="fil0 str0" points="8005,6441 10438,4941 10438,583 4499,4191 "/>
  <polygon class="fil0 str0" points="10438,4941 13822,7029 16417,4231 10438,583 "/>
  <polygon class="fil0 str0" points="12695,13579 10364,15125 10323,19443 16303,15794 "/>
  <polygon class="fil0 str0" points="10364,15125 6939,12997 4344,15794 10323,19443 "/>
  <circle class="fil1" cx="6938" cy="12997" r="294"/>
  <circle class="fil1" cx="4344" cy="15794" r="294"/>
  <circle class="fil1" cx="10364" cy="15125" r="294"/>
  <circle class="fil1" cx="10323" cy="19443" r="294"/>
  <circle class="fil1" cx="16303" cy="15794" r="294"/>
  <circle class="fil1" cx="12695" cy="13579" r="294"/>
  <circle class="fil1" cx="16397" cy="11548" r="294"/>
  <circle class="fil1" cx="4478" cy="8535" r="294"/>
  <circle class="fil1" cx="8005" cy="6441" r="294"/>
  <circle class="fil1" cx="4499" cy="4191" r="294"/>
  <circle class="fil1" cx="10438" cy="4941" r="294"/>
  <circle class="fil1" cx="13822" cy="7029" r="294"/>
  <circle class="fil1" cx="16417" cy="4231" r="294"/>
  <circle class="fil1" cx="10438" cy="583" r="294"/>
 </g>
</svg>

Answer the question

In order to leave comments, you need to log in

6 answer(s)
L
lagudal, 2018-06-21
@lagudal

I don’t know if I correctly understood the meaning of what needs to be done, if how to animate the contours, then stroke-dasharray and stroke-dashoffset
Example

A
Alex Chistyakov, 2014-09-28
@lAtrey

If the tasks to be solved are not CPU-bound, and there are less and less of them in our time, then it is better to spend this money (the difference between i5 and i7) on building a more balanced system. Personally, I always do not have enough RAM, so I put a lot of it. Someone is missing a good video card. Someone lacks a good disk subsystem.

A
Anton Kalashnikov, 2014-09-28
@kalashnikau

I think i7 is better if money allows, since the next upgrade will not have to be done so soon. And as we know, having bought the most modern processor, having reached the house, it becomes the processor of the previous generation)
So the more powerful, the better.

R
riddans, 2014-09-28
@riddans

It's not about megahertz. If you play simulators like Arma 3 and xplane, for a snack render a lot of polygons in 3dmax, take the i7. But, to fully reveal the potential of the processor in games, you will have to install radeon 290/geforce 780 and higher.

D
Dmitry Spiridonov, 2014-09-28
@spirik

Take i7 while without vidhu (temporarily work on the built-in one), collect money and buy vidhu..

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question