SVG animation examples | SVG animation

svg animation tutorials and examples

Hello guys today in this article we will learn how to create SVG animation and how to export svg file from Illustrator.

To create SVG animation first of all you have to create SVG image, there are multiple tools to create svg image, you can create svg image in Illustrator.

First Of All create svg shape in illustrator and save it in svg formate. after that add that image in you project.

SVG IMAGE CODE

 <svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="600px" height="350px" viewBox="0 0 900 500" enable-background="new 0 0 900 500" xml:space="preserve">
<rect x="1" fill="none" width="900" height="500"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="265.5" y1="264.9141" x2="383.7886" y2="264.9141">
   <stop  offset="0" style="stop-color:#EF4136"/>
   <stop  offset="0.5" style="stop-color:#262262"/>
   <stop  offset="1" style="stop-color:#FBB040"/>
</linearGradient>
<path fill="none" stroke="url(#SVGID_1_)" stroke-width="10" stroke-miterlimit="10" d="M265.5,151.625
   c62.568,0,113.289,50.721,113.289,113.289c0,62.567-50.721,113.289-113.289,113.289"/>
<path fill="#FFFFFF" d="M554.951,123.328c0,6.627-5.372,12-12,12H412.084c-6.627,0-12-5.373-12-12V104.85c0-6.627,5.373-12,12-12
   h130.867c6.628,0,12,5.373,12,12V123.328z"/>
<path fill="#FFFFFF" d="M607.951,193.028c0,6.627-5.372,12-12,12H465.084c-6.627,0-12-5.373-12-12V174.55c0-6.627,5.373-12,12-12
   h130.867c6.628,0,12,5.373,12,12V193.028z"/>
<path fill="#FFFFFF" d="M649.238,273.828c0,6.627-5.372,12-12,12H506.371c-6.627,0-12-5.373-12-12V255.35c0-6.627,5.373-12,12-12
   h130.867c6.628,0,12,5.373,12,12V273.828z"/>
<path fill="#FFFFFF" d="M607.951,353.328c0,6.627-5.372,12-12,12H465.084c-6.627,0-12-5.373-12-12V334.85c0-6.627,5.373-12,12-12
   h130.867c6.628,0,12,5.373,12,12V353.328z"/>
<path fill="#FFFFFF" d="M563.995,419.053c0,6.627-5.372,12-12,12H421.128c-6.627,0-12-5.373-12-12v-18.479c0-6.627,5.373-12,12-12
   h130.867c6.628,0,12,5.373,12,12V419.053z"/>
<polygon fill="#1A3F71" points="283.5,151 321.5,112 395.25,112 395.25,115.75 323.75,116 286.75,154 "/>
<polygon fill="#006838" points="290.777,378.675 328.777,410.813 402.527,410.813 402.527,407.724 331.027,407.518 294.027,376.203 
   "/>
<circle fill="#FFFFFF" cx="286.125" cy="152.625" r="3.625"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="163.833" y1="264.498" x2="368.5" y2="264.498">
   <stop  offset="0" style="stop-color:#EF4136"/>
   <stop  offset="0.5" style="stop-color:#262262"/>
   <stop  offset="1" style="stop-color:#FBB040"/>
</linearGradient>
<circle fill="none" stroke="url(#SVGID_2_)" stroke-width="10" stroke-miterlimit="10" cx="266.167" cy="264.498" r="97.333"/>
<g class="t1">
   <circle fill="#22BCB9" cx="476.672" cy="185.089" r="17.699"/>
   <path fill="#FFFFFF" d="M476.518,174.456c-5.569,0-10.094,4.524-10.094,10.094c0,1.123,0.187,2.202,0.525,3.211l0.1,0.299h3.764
       v-0.438v-6.392l5.705,5.778l5.705-5.778v6.831h3.764l0.1-0.299c0.339-1.009,0.525-2.088,0.525-3.211
       C486.611,178.98,482.087,174.456,476.518,174.456z M476.518,175.334c5.095,0,9.216,4.121,9.216,9.216
       c0,0.918-0.153,1.796-0.404,2.632h-2.229v-8.091l-6.583,6.667l-6.583-6.667v8.091h-2.229c-0.251-0.836-0.404-1.714-0.404-2.632
       C467.302,179.455,471.423,175.334,476.518,175.334z M471.69,183.368v5.57h-4.294l0.381,0.658c1.745,3.017,5.008,5.048,8.74,5.048
       s6.995-2.031,8.74-5.048l0.381-0.658h-4.294v-5.57l-4.827,4.889L471.69,183.368z M472.568,185.505l3.949,4l3.949-4v4.31h0.439
       h3.088c-1.667,2.363-4.361,3.95-7.477,3.95s-5.809-1.587-7.477-3.95h3.527V185.505z"/>
</g>
<g class="t1">
   <circle fill="#D31F3D" cx="517.959" cy="264.589" r="17.699"/>
   <g>
       <path fill="#FFFFFF" d="M510.685,264.533l7.877-12.378l7.877,12.378l-7.877,4.502L510.685,264.533z"/>
       <path fill="#FFFFFF" d="M518.562,252.155l7.877,12.378l-7.877,4.502V252.155z"/>
       <path fill="#FFFFFF" d="M510.685,266.222l7.877,4.501l7.877-4.501l-7.877,10.69L510.685,266.222z"/>
       <path fill="#FFFFFF" d="M518.562,270.723l7.877-4.501l-7.877,10.69V270.723z M510.685,264.533l7.877-3.376l7.877,3.376
           l-7.877,4.502L510.685,264.533z"/>
       <path fill="#FFFFFF" d="M518.562,261.157l7.877,3.376l-7.877,4.502V261.157z"/>
   </g>
</g>
<g class="t1">
   <circle fill="#F78E1E" cx="476.672" cy="344.089" r="17.699"/>
   <path fill="#FFFFFF" d="M479.976,355.619c-0.874,0-1.746-0.228-2.525-0.684c-1.526-0.894-2.438-2.547-2.438-4.423
       c0-1.114,0.439-2.079,0.77-2.709c0.344-0.655,0.107-1.463-0.537-1.84c-1.045-0.614-1.71,0.396-1.782,0.514
       c-0.531,0.862-1.145,1.478-1.933,1.939c-1.532,0.897-3.518,0.897-5.05,0c-1.578-0.925-2.521-2.542-2.521-4.328
       c0-1.8,0.918-3.37,2.52-4.309c0.757-0.441,1.618-0.679,2.491-0.685c0.908-0.013,1.783,0.23,2.56,0.685
       c0.802,0.471,1.415,1.08,1.933,1.921c0.402,0.652,1.168,0.873,1.782,0.513c0.909-0.532,0.749-1.437,0.537-1.84
       c-0.33-0.63-0.77-1.597-0.77-2.709c0-1.876,0.911-3.53,2.438-4.424c1.557-0.911,3.492-0.912,5.05,0
       c1.555,0.911,2.521,2.605,2.521,4.424s-0.966,3.514-2.52,4.424c-0.939,0.55-1.952,0.651-2.729,0.679
       c-0.735,0.026-1.311,0.606-1.311,1.321c0,1.238,1.176,1.315,1.31,1.32c0.778,0.027,1.79,0.13,2.729,0.679
       c1.555,0.91,2.521,2.605,2.521,4.424s-0.966,3.514-2.521,4.424C481.722,355.392,480.849,355.619,479.976,355.619z"/>
</g>
<g class="t1">
   <circle fill="#006838" cx="432.716" cy="409.813" r="17.699"/>
   <path fill="#FFFFFF" d="M432.658,398.668c-6.113,0-11.088,4.973-11.088,11.087s4.975,11.087,11.088,11.087
       s11.086-4.973,11.086-11.087S438.771,398.668,432.658,398.668z M437.584,413.086c-0.426,1.158-1.552,2.452-1.552,2.452
       s0.481-1.445,0.481-2.409c-0.018-2.847-1.822-5.394-6.267-7.231c3.113,1.854,4.496,4.717,4.339,7.231
       c-0.053,0.842-0.055,1.434-0.482,2.357c-0.162,0.025-0.323,0.043-0.482,0.052c-3.055,0.179-5.301-2.564-5.301-5.649v-5.919
       C436.092,404.257,439.089,408.922,437.584,413.086z"/>
</g>
<g class="t1">
   <circle fill="#1A3F71" cx="423.57" cy="114.089" r="17.699"/>
   <path fill="#F7941E" d="M429.854,110.746c0-2.603-2.11-4.712-4.712-4.712h-0.674v-0.897c0-0.763-0.582-1.346-1.346-1.346
       c-0.763,0-1.348,0.583-1.348,1.346v0.897h-3.141c-0.764,0-1.347,0.583-1.347,1.347c0,0.583,0.36,1.077,0.897,1.256v10.905
       c-0.537,0.179-0.897,0.673-0.897,1.257c0,0.762,0.583,1.346,1.347,1.346h3.141v0.897c0,0.762,0.585,1.346,1.348,1.346
       c0.764,0,1.346-0.584,1.346-1.346v-0.897h0.674c2.602,0.045,4.712-2.065,4.712-4.667c0-1.302-0.54-2.513-1.437-3.366
       C429.314,113.258,429.854,112.047,429.854,110.746z M425.142,119.497h-4.265v-4.039h4.265c1.122,0,2.019,0.897,2.019,2.02
       S426.264,119.497,425.142,119.497z M425.142,112.765h-4.265v-4.039h4.265c1.122,0,2.019,0.898,2.019,2.02
       C427.161,111.868,426.264,112.765,425.142,112.765z"/>
</g>
<rect x="348.999" y="184.464" fill="#22BCB9" width="104.001" height="3.625"/>
<rect x="380.657" y="262.686" fill="#D31F3D" width="104.001" height="3.625"/>
<rect x="346.652" y="344.276" fill="#BE1E2D" width="100.599" height="3.625"/>
<circle fill="#FFFFFF" cx="347.374" cy="186.464" r="3.625"/>
<circle fill="#FFFFFF" cx="379.657" cy="263.914" r="3.625"/>
<circle fill="#FFFFFF" cx="346.624" cy="344.558" r="3.625"/>
<circle fill="#FFFFFF" cx="291.777" cy="376.203" r="3.625"/>
<g class="t1">
   <path fill="#010101" d="M299.58,213.058c-1.345,0.022-33.097,0.726-46.365,20.212l-23.362,41.646
       c-1.72,3.042-0.772,6.918,2.145,8.818l28.896,19.176c1.134,0.748,2.436,1.105,3.727,1.105c1.988,0,3.958-0.851,5.27-2.462
       l30.309-37.056c0.042-0.049,0.082-0.099,0.117-0.151c4.864-7.132,6.36-15.617,6.327-23.554c-0.058-13.581-4.653-25.549-4.962-26.33
       C301.342,213.605,300.463,213.137,299.58,213.058z M276.673,237.464c2.35-0.005,4.728,0.666,6.825,2.076
       c5.593,3.761,7.081,11.343,3.32,16.936s-11.342,7.08-16.936,3.319s-7.081-11.342-3.32-16.936
       C268.913,239.363,272.755,237.473,276.673,237.464z M237.064,253.018c-11.515,0.289-20.571,4.927-27.604,14.157
       c-0.51,0.688-0.576,1.573-0.221,2.327c0.377,0.754,1.155,1.244,1.998,1.244h3.883c3.106,0,7.121,0.31,11.137,1.508L237.064,253.018
       z M287.073,287.474c-7.455,9.074-14.645,17.817-15.133,18.283c3.018,4.371,4.707,8.898,5.837,11.961l0.156,0.398
       c0.289,0.754,0.952,1.31,1.75,1.421c0.111,0.022,0.223,0.022,0.334,0.022c0.688,0,1.355-0.313,1.776-0.867
       c4.971-6.567,7.099-12.935,7.099-21.321C288.894,293.71,288.116,290.358,287.073,287.474z M232.146,289.146
       c-4.771,7.854-8.454,24.303-1.46,29.1c1.278,0.874,2.798,1.317,4.542,1.317c0.752,0,1.547-0.085,2.379-0.247
       c6.836-1.342,15.327-8.095,19.245-13.755l-4.602-3.06c-4.302,4.156-10.828,7.696-14.691,5.109
       c-3.863-2.604-3.16-9.972-0.984-15.522L232.146,289.146z"/>
   <circle fill="#2E3192" cx="276.325" cy="249.175" r="6.825"/>
</g>
<text class="txt" transform="matrix(1 0 0 1 445.502 123.3208)" fill="#1A3F71" font-family="'MyriadPro-Regular'" font-size="24.2242">BITCOIN</text>
</svg>

SVG ANIMATION CSS

<style>
    *
{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
    background: #3784da;
}


.logo
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes circle1 {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

.logo .t1
{
    animation: circle 2s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.logo .txt
{
  animation-name: wiggleWiggle;
  animation-duration: 1.25s;
  animation-direction: alternate;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}


    
</style>

How to Export SVG image From Illustrator

First Of all create your shape or image in illustrator.

After that click on file tab, and under file tab just click on save as button.

And in the end select svg formate in dropdown and click on save.

Leave a Reply

avatar
  Subscribe  
Notify of