Animacao002

Animação Por Paths

by Alexandre Gomiero de Oliveira

HTML

<div id="container2">
          <svg
            id="svg4"
            width="44.918457mm"
            height="41.290115mm"
            viewBox="0 0 159.15989 146.30356"
            version="1.1">
            <g
               inkscape:label="Layer 1"
               inkscape:groupmode="layer"
               id="layerNovo"
               style="opacity:0.97000002"
               transform="translate(-215.41992,-463.49609)">
              <path
                 style="fill:#b3b3b3;fill-opacity:0.74566471;stroke:#000000;stroke-width:3.59787416;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5;stroke-dasharray:none;stroke-opacity:1"
                 d="m 288.8656,608.00072 a 44.166031,42.188788 0 0 0 39.82074,-24.06301 49.073371,44.737102 0 0 0 44.09453,-44.45771 49.073371,44.737102 0 0 0 -34.90689,-42.81636 43.920664,37.092154 0 0 0 -43.36456,-31.36861 43.920664,37.092154 0 0 0 -41.18406,24.33553 42.693831,43.604519 0 0 0 -36.1065,43.05327 42.693831,43.604519 0 0 0 28.2862,40.98917 44.166031,42.188788 0 0 0 43.36054,34.32772 z"
                 id="novanuvem2"
                 inkscape:connector-curvature="0">
                 <animate
                  id="path"
                  xlink:href="#novanuvem2"
                  attributeName="d"
                  repeatCount="indefinite"

                  values="
                      m 288.8656,608.00072 a 44.166031,42.188788 0 0 0 39.82074,-24.06301 49.073371,44.737102 0 0 0 44.09453,-44.45771 49.073371,44.737102 0 0 0 -34.90689,-42.81636 43.920664,37.092154 0 0 0 -43.36456,-31.36861 43.920664,37.092154 0 0 0 -41.18406,24.33553 42.693831,43.604519 0 0 0 -36.1065,43.05327 42.693831,43.604519 0 0 0 28.2862,40.98917 44.166031,42.188788 0 0 0 43.36054,34.32772 z;
                      m 325.36386,601.50838 a 42.188788,44.166031 60 0 0 22.45427,-40.74954 44.737102,49.073371 60 0 0 15.95812,-60.54878 44.737102,49.073371 60 0 0 -51.63843,-19.62661 37.092154,43.920664 60 0 0 -53.23912,-5.48373...

CSS

#container2 {
  position: relative;
  width: 90mm;
  height: 90mm;
  background: rgb(200, 200, 255);
}

#svg4 {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 45mm;
  height: 45mm;
  margin: -23mm 0 0 -23mm;
}