본문 바로가기
svg

svg animation using inkscape

by peach1227 2023. 9. 2.


<style>
#g7201 {
animation: wheel-left  2s linear infinite;

transform-origin:center center;
transform-box:fill-box;
}

@keyframes wheel-left{

from {transform:translateX(17px) translateY(9px) rotateZ(0deg)   ;}

to {transform:translateX(17px) translateY(9px) rotateZ(360deg)  ;}

}


#g7231 {
animation: wheel-right  2s linear infinite;

transform-origin:center center;
transform-box:fill-box;
}

@keyframes wheel-right{

from {transform:translateX(101px) translateY(9px) rotateZ(0deg)   ;}

to {transform:translateX(101px) translateY(9px) rotateZ(360deg)  ;}

}
</style>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg1576"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   sodipodi:docname="drawing_bike2.svg">
  <title
     id="title898">drawing bike_finished</title>
  <defs
     id="defs1570" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.5"
     inkscape:cx="473.08886"
     inkscape:cy="491.34568"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:lockguides="true"
     inkscape:snap-object-midpoints="true"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata1573">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>drawing bike_finished</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       id="path7134"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 60.491036,69.777192 a 22.296072,22.29607 0 0 0 -22.29603,22.296033 22.296072,22.29607 0 0 0 22.29603,22.296025 22.296072,22.29607 0 0 0 22.29603,-22.296025 22.296072,22.29607 0 0 0 -22.29603,-22.296033 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 A 18.951661,18.951659 0 0 1 60.491036,111.02506 18.951661,18.951659 0 0 1 41.539202,92.073225 18.951661,18.951659 0 0 1 60.398526,73.12185 Z" />
    <path
       id="path7154"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.1561;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 34.89806,88.739584 A 25.809174,25.809174 0 0 1 60.491034,66.264053 25.809174,25.809174 0 0 1 86.112238,88.964014" />
    <path
       d="m 144.73834,69.623077 a 22.296072,22.29607 0 0 0 -22.29603,22.296033 22.296072,22.29607 0 0 0 22.29603,22.29603 22.296072,22.29607 0 0 0 22.29603,-22.29603 22.296072,22.29607 0 0 0 -22.29603,-22.296033 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 18.951661,18.951659 0 0 1 -18.95183,18.95184 18.951661,18.951659 0 0 1 -18.95184,-18.95184 18.951661,18.951659 0 0 1 18.85933,-18.951375 z"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path7146" />
    <path
       id="path7159"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.1561;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 118.92916,91.91911 A 25.809174,25.809174 0 0 1 144.73834,66.109937" />
    <g
       id="g7201"
       transform="translate(16.928291,9.27467)"
       style="fill:#ffffff;fill-opacity:1">
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7164" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7166" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7168" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7170" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7172" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7174" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         id="path7176" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 52.906975,67.144031 34.218515,98.453073"
         id="path7178" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 59.482346,73.913454 27.643144,91.68365"
         id="path7180" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 61.792073,83.063632 25.333417,82.533472"
         id="path7182" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 59.217266,92.142782 27.908224,73.454322"
         id="path7184" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 52.447843,98.718153 34.677647,66.878951"
         id="path7186" />
      <path
         id="path7162"
         d="M 52.447843,98.718153 34.677647,66.878951"
         style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    </g>
    <path
       d="m 144.73834,69.623078 a 22.296072,22.29607 0 0 0 -22.29603,22.296034 22.296072,22.29607 0 0 0 22.29603,22.296028 22.296072,22.29607 0 0 0 22.29603,-22.296028 22.296072,22.29607 0 0 0 -22.29603,-22.296034 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 18.951661,18.951659 0 0 1 -18.95183,18.951839 18.951661,18.951659 0 0 1 -18.95183,-18.951838 18.951661,18.951659 0 0 1 18.85932,-18.951375 z"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path7203" />
    <g
       transform="translate(101.1756,9.1205555)"
       id="g7231">
      <path
         id="path7205"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7207"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7209"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7211"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7213"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7215"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7217"
         d="m 43.827825,64.569224 -0.53016,36.458656"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7219"
         d="M 52.906975,67.144031 34.218515,98.453073"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7221"
         d="M 59.482346,73.913454 27.643144,91.68365"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7223"
         d="M 61.792073,83.063632 25.333417,82.533472"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7225"
         d="M 59.217266,92.142782 27.908224,73.454322"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         id="path7227"
         d="M 52.447843,98.718153 34.677647,66.878951"
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <path
         style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 52.447843,98.718153 34.677647,66.878951"
         id="path7229" />
    </g>
    <path
       id="rect7241"
       style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 124.91871,64.930587 107.53047,92.073222 H 60.491034 l 21.916101,-34.2105 v 0 h 37.321175" />
    <circle
       style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.7452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path7235"
       cx="60.491035"
       cy="92.073219"
       r="3.2261367" />
    <path
       sodipodi:nodetypes="cc"
       id="path7246"
       d="m 112.55118,48.089777 32.18716,43.82933"
       style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <circle
       r="3.2261367"
       cy="91.919106"
       cx="144.73836"
       id="circle7237"
       style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.7452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       style="fill:none;stroke:#000000;stroke-width:1.852;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 75.133446,48.089777 32.187164,43.82933"
       id="path7244"
       sodipodi:nodetypes="cc" />
    <path
       id="path868"
       d="m 66.462541,48.089777 c 17.34181,0 17.34181,0 17.34181,0"
       style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path870"
       d="M 291.85833,165.7071 Z"
       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
    <path
       sodipodi:nodetypes="ccc"
       id="path874"
       d="m 112.55118,48.089777 c 22.15266,0 22.15266,1.087816 22.15266,1.087816 9.79151,1.877112 14.2621,4.380214 0,9.087162"
       style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
    <g
       transform="matrix(1,0,0,-1,0,183.83821)"
       id="g890">
      <path
         id="path886"
         d="m 107.32061,91.919106 c 0,13.536254 0,13.536254 0,13.536254"
         style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" >
    <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="360 106 92"
                          to="0 106 92"
                          dur="3s"
                          repeatCount="indefinite"/></path>
<path
         style="fill:none;stroke:#000000;stroke-width:1.41346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 111.26262,105.45536 c -7.88402,0 -7.88402,0 -7.88402,0"
         id="path888" >
<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="360 106 92"
                          to="0 106 92"
                          dur="3s"
                          repeatCount="indefinite"/></path>


    </g>
    <circle
       r="6.1013055"
       cy="92.073219"
       cx="106.99593"
       id="circle876"
       style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.40933;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <g
       id="g884">

      <path
         style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 107.32061,91.919106 c 0,13.536254 0,13.536254 0,13.536254"
         id="path878" >
<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 106 92"
                          to="360 106 92"
                          dur="3s"
                          repeatCount="indefinite"/>

</path>

      <path
         id="path880"
         d="m 111.26262,105.45536 c -7.88402,0 -7.88402,0 -7.88402,0"
         style="fill:none;stroke:#000000;stroke-width:1.41346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" >

<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 106 92"
                          to="360 106 92"
                          dur="3s"
                          repeatCount="indefinite"/></path>
    </g>
    <path
       id="path892"
       d="m 21.733631,116.79464 c 77.863094,-0.37797 77.863094,-0.37797 77.863094,-0.37797"
       style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 130.59077,116.79464 c 77.8631,-0.37797 77.8631,-0.37797 77.8631,-0.37797"
       id="path894" />
    <path
       id="path896"
       d="m 110.717,116.63424 c 11.7773,-0.0572 11.7773,-0.0572 11.7773,-0.0572"
       style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>


drawing bike_finished image/svg+xml drawing bike_finished
반응형

'svg' 카테고리의 다른 글

svg clipPath basic examples  (0) 2023.09.03
svg simple logo  (0) 2023.09.02
svg clipPath animation  (0) 2023.09.02
svg textPath animation  (0) 2023.09.01
svg animateTransform example  (0) 2023.09.01