Start a Project
Let's discuss your next project.Our Service
We're an integrated agency that uses design and technology, we've remained true to our mission: to help clients succeed between brands and humans.
Our Promise
We give you a peace of mind by taking the hassle out of your digital communication projects and deliver results.
Contact Page
Cara membuat logo animasi SVG
Berikut adalah tutorial pembuatan logo SVG animation.
NEOSIS.SVG
<svg 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"
viewBox="0 0 248 97" style="enable-background:new 0 0 248 97;" xml:space="preserve">
<defs>
<style type="text/css">
.st0{fill:#fff;stroke:#F26460;stroke-width:2;stroke-miterlimit:5;}
.st0 {
stroke-dasharray:1000;
stroke-dashoffset:0;
-webkit-animation: dash 6s linear forwards;
-0-animation: dash 6s linear forwards;
-moz-animation: dash 6s linear forwards;
animation: dash 6s linear forwards;
}
@-webkit-keyframes dash {
from{
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
fill: #F26460;
}
}
</style>
</defs>
<g>
<g>
<path class="st0" d="M3.08,3.584c80.61,0.02,161.22,0.01,241.83,0.01c0.01,30.27-0.02,60.53,0.01,90.8
c-80.61,0.04-161.22,0.01-241.83,0.02C3.08,64.134,3.11,33.864,3.08,3.584z M10.56,11.064c0.03,25.33,0.05,50.67-0.01,76.01
c75.68,0.04,151.35-0.02,227.03,0.03c-0.05-25.35-0.02-50.71-0.02-76.07C161.89,11.094,86.23,11.044,10.56,11.064z"/>
</g>
<g>
<path class="st0" d="M17.15,25.302c3.48-0.03,6.97-0.03,10.46,0c6.56,12.89,12.8,25.97,19.77,38.62
c-0.01-12.88,0.04-25.76-0.03-38.64c2.16,0,4.33,0.01,6.5,0.03c-0.15,15.06-0.02,30.13-0.07,45.2c-3.39-0.04-6.78-0.04-10.16-0.01
c-6.83-12.73-12.77-25.97-19.94-38.5c-0.4,12.83-0.05,25.68-0.17,38.51c-2.11-0.01-4.22-0.02-6.32-0.01
C17.19,55.432,17.26,40.362,17.15,25.302z"/>
<g>
<path class="st0" d="M112.22,25.492c6.19-1.77,13.28-1.23,18.74,2.35c4.27,2.65,6.87,7.33,8.16,12.08
c1.77,7.65,1.25,16.23-3.17,22.93c-7.38,11.25-26.59,11.34-33.96,0.03c-4.1-5.99-4.38-13.62-3.53-20.59
C99.59,34.772,104.77,27.702,112.22,25.492z M115.23,30.352c-3.91,1.29-6.94,4.63-8.28,8.48c-2.36,6.66-2.16,14.39,1.21,20.68
c2.91,5.49,10.22,8.14,15.89,5.42c6.15-2.6,8.63-9.8,8.49-16.04c0.33-6.19-1.12-13.34-6.61-17.01
C122.92,29.512,118.79,29.812,115.23,30.352z"/>
</g>
<path class="st0" d="M154.85,26.842c5.7-3.42,12.68-2.41,18.86-1.09c-0.1,1.95-0.17,3.9-0.24,5.86
c-3.93-1.72-8.32-1.86-12.52-1.36c-4.19,0.8-6.85,6.17-4.15,9.75c4.41,5.02,12.16,5.29,16.39,10.55c4.53,5.8,2.43,15.41-4.17,18.7
c-6.4,3.14-14,2.24-20.56,0.1c0.07-1.96,0.14-3.91,0.22-5.87c5.22,2.09,11.62,4.13,16.79,0.85c3.75-2.2,4.2-8.22,0.86-10.96
c-3.94-3.35-9.26-4.42-13.31-7.6C146.99,41.112,148.11,30.322,154.85,26.842z"/>
<path class="st0" d="M208.27,27.292c5.74-3.96,13.11-2.87,19.53-1.59c-0.06,1.95-0.13,3.91-0.2,5.87
c-3.98-1.71-8.43-1.85-12.66-1.28c-3.92,0.84-6.11,5.41-4.44,9.01c2.63,4.07,7.74,5.05,11.72,7.3c3.98,1.88,7.44,5.66,7.44,10.28
c0.62,5.22-2.34,10.69-7.25,12.71c-6.28,2.74-13.56,1.82-19.89-0.3c0.04-1.82,0.09-3.64,0.14-5.46
c5.01,1.13,10.36,3.54,15.42,1.31c3.01-1.03,5.02-4.11,4.52-7.3c0.19-2.52-1.78-4.4-3.69-5.68c-3.96-2.59-8.77-3.76-12.38-6.91
C201.43,40.442,202.32,31.032,208.27,27.292z"/>
<path class="st0" d="M72.191,65.182V50.017H89.72v-0.345h0c0-0.006,0-0.011,0-0.017v-4.883h-0.069c0-0.007,0-0.013,0-0.02
c-5.823-0.049-11.637,0.006-17.459-0.049V30.415H90.72v-0.102v-5.04V25.17H69.152c0,0-3.981,0-4.063,0
c0.1,15.08-0.368,30.262-0.148,45.342c2.6-0.015,5.188-0.048,7.772-0.086H91.48v-5.245H72.191z"/>
<path class="st0" d="M192.14,25.402c0-0.02,0-0.04,0-0.06c-2.51-0.07-5.01-0.06-7.5,0.06V70.48h7.55V25.402H192.14z"/>
</g>
</g>
</svg>
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<title>SVG Line Animation Demo</title>
<style>
body {
background: #fff;
}
</style>
</head>
<body>
<div style="text-align:center;padding:150px 0;">
<object>
<embed src="neosis.svg" width="20%" height="20%">
</object>
</div>
</body>
</html>
Related posts
Join the discussion