Working with “SVG Path” and Creating Yudiz logo with SVG
Now a days svg graphics take a vital place in design element like website, here we are discuss about “Path” which is one of the element of svg.
Basically path is working with (x,y) axis coordinate respectively .
There are some other tool(sub-command) to create and give some styling to path like,
Following are some basic element to create, shaping and styling the path.
For Create and Shaping Path
M = moveto
L = lineto
H = horizontal lineto (Case sensitive element)
V = vertical lineto (Case sensitive element)
C = curveto (Case sensitive element)
S = smooth curveto (Case sensitive element)
Z = closepath
For “Case sensitive element”
A lowercase element take positioning relative from point of origin. And an uppercase element take positioning absolute.
For Styling Path
stroke-width
stroke
stroke-dasharray
stroke-dashoffset
stroke-linejoin (miter- for angular cornering, round- for bound cornering, bevel- for two parallel new angular).
Following “Yudiz Logo” example indicate the actual work with path (without curve) design.
First decide origin point where you want to actually start,
I divided yudiz logo in four path. You can also create using only one path, it is based on your understanding and flexibility.
Cross right hand section
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path1" d="M95 120 L145 120 L120 70 L170 70 L145 20" />
</g>
</svg>
</div>
Cross left hand section
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path2" d="M95,120 L45,120 70,70 20,70" />
</g>
</svg>
</div>
Cross bottom section
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path3" d="M95,120 L120,170 70,170 95,220" />
</g>
</svg>
</div>
All over border to origin point
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path4" d="M95,120 L120,70 145,20 195,20 170,70 145,120 120,170 95,220 45,220 70,170 45,120 20,70 45,20 70,70 95,120 70,170" />
</g>
</svg>
</div>
Step by Step path indication
step 1:
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path1" d="M95 120 L145 120 L120 70 L170 70 L145 20" />
<path class="path2" d="M95,120 L45,120 70,70 20,70" />
</g>
</svg>
</div>
step 2:
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path1" d="M95 120 L145 120 L120 70 L170 70 L145 20" />
<path class="path2" d="M95,120 L45,120 70,70 20,70" />
</g>
</svg>
</div>
step 3:
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path1" d="M95 120 L145 120 L120 70 L170 70 L145 20" />
<path class="path2" d="M95,120 L45,120 70,70 20,70" />
<path class="path3" d="M95,120 L120,170 70,170 95,220" />
</g>
</svg>
</div>
step 4:
<div style="text-align: center;">
<svg width="200" height="270" >
<g stroke="#ffffff" stroke-width="2" fill="none">
<path class="path1" d="M95 120 L145 120 L120 70 L170 70 L145 20" />
<path class="path2" d="M95,120 L45,120 70,70 20,70" />
<path class="path3" d="M95,120 L120,170 70,170 95,220" />
<path class="path4" d="M95,120 L120,70 145,20 195,20 170,70 145,120 120,170 95,220 45,220 70,170 45,120 20,70 45,20 70,70 95,120 70,170" />
</g>
</svg>
</div>
For additional add coloured triangle using path
You can take one group under another like “ ”
<g> <path class="fill fill1" d="M45,20 L20,70 70,70 45,20" fill="#139579"/> <path class="fill fill2" d="M20,70 L70,70 45,120 20,70" fill="#23AF8E"/> <path class="fill fill3" d="M45,120 L70,70 95,120 45,120" fill="#7D4192"/> <path class="fill fill4" d="M95,120 L45,120 70,170 95,120" fill="#A26EAB"/> <path class="fill fill5" d="M70,170 L95,120 120,170 70,170" fill="#E04134"/> <path class="fill fill6" d="M70,170 L45,220 95,220 70,170" fill="#EBBB17"/> <path class="fill fill7" d="M70,170 L120,170 95,220 70,170" fill="#EE8F1D"/> <path class="fill fill8" d="M120,170 L95,120 145,120 120,170" fill="#B63226"/> <path class="fill fill9" d="M95,120 L145,120 120,70 95,120" fill="#338ACD"/> <path class="fill fill10" d="M120,70 L145,120 170,70 120,70" fill="#2576AE"/> <path class="fill fill11" d="M120,70 L145,20 170,70 120,70" fill="#353F59"/> <path class="fill fill12" d="M145,20 L195,20 170,70 145,20" fill="#0E1A35"/> </g>
finally we created a full logo with pure svg path.
Now its a time to give some animation for the svg path.
First: you have to use jquery.easing and jquery.drawsvg.js for get same effect like as Demo link which mentioned below.
Second: Just add some script for get effect like draw svg path as your origin to end point.
<script>
var $svg = $("svg").drawsvg({
duration: 6000
}).drawsvg("animate");
</script>Now your logo get a fill-up effect.
Its turn for colour triangle to randomly fade in with minor blink effect. In this portion we will add some css to stylesheet to fade in functionality and time interval, you can also give any other animation using css.
For animation declaration:
@keyframes fill {
0% { opacity: 0;}
90% { opacity: 0;}
95% { opacity: 0.1}
100% { opacity: 1;}
}common class for every triangle to link up with animation effect.
.fill { animation-name: fill; }individual separate classes for random time animation.
.fill1{animation-duration: 22s;}
.fill2{animation-duration: 17s;}
.fill3{animation-duration: 15s;}
.fill4{animation-duration: 12s;}
.fill5{animation-duration: 19s;}
.fill6{animation-duration: 16s;}
.fill7{animation-duration: 11s;}
.fill8{animation-duration: 21s;}
.fill9{animation-duration: 18s;}
.fill10{animation-duration: 13s;}
.fill11{animation-duration: 14s;}
.fill12{animation-duration: 20s;}Bingo your logo using svg path with animation is completed.
BONUS (Yoat in SVG)
Below some bonus for you, if you found any relevant work with it.
<svg width="700" height="500" > <g stroke="#ffffff" stroke-width="2" fill="none"> <path d="M150,370 C140,350 130,330 125,300 C125,300 123,290 135,295 C135,295 350,320 523,310 C523,310 530,308 535,325 C535,325 540,360 525,370 M120,283 C220,298 430,310 525,300"/> <g> <path d=" "/> <path d="M135,295 v-10" /> <path d="M230,304 v-10" /> <path d="M325,310 v-10" /> <path d="M420,313 v-10" /> <path d="M520,310 v-10" /> </g> <g> <path d="M180,300 C182,302 215,330 250,306 C250,306 290,335 330,310 C330,310 365,345 420,312 C420,312 460,345 500,311 "/> <circle cx="250" cy="315" r="9"/> <circle cx="250" cy="315" r="4" stroke-width="1"/> <path d="M245,309 L248,312 M258,310 L253,313 M256,323 L252,318 M243,322 L248,318" stroke-width="1"/> <circle cx="330" cy="321" r="9"/> <circle cx="330" cy="321" r="4" stroke-width="1"/> <path d="M324,314 L328,318 M337,317 L333,319 M337,328 L333,324 M322,326 L327,323" stroke-width="1"/> <circle cx="420" cy="324" r="9"/> <circle cx="420" cy="324" r="4" stroke-width="1"/> <path d="M413,317 L417,321 M427,318 L423,322 M427,331 L423,327 M413,330 L417,326 " stroke-width="1"/> </g> <g> <path d="M260,306 C290,265 295,263 320,263 L475,265 C490,265 495,270 500,311"/> <path d="M271,292 C315,295 328,295 332,283 L338,268 h-45" /> <g> <path d="M345,310 L350,278 355,273 h12 L372,279 372,311 M365,290 L370,290"/> </g> <rect x="385" y="278" width="11" height="11"/> <rect x="405" y="278" width="11" height="11"/> <rect x="425" y="278" width="11" height="11"/> <rect x="445" y="278" width="11" height="11"/> <rect x="465" y="278" width="11" height="11"/> </g> <g> <path d="M315,263 C323,233 330,232 335,232 L455,232 C465,233 470,242 473,265"/> <rect x="335" y="240" width="11" height="11"/> <rect x="357" y="240" width="11" height="11"/> <rect x="379" y="240" width="11" height="11"/> <rect x="400" y="240" width="11" height="11"/> <rect x="421" y="240" width="11" height="11"/> <rect x="442" y="240" width="11" height="11"/> </g> <g> <path d="M420,233 v-26 h28 v26 M420,207 v-8 h28 v8"/> </g> </g> </svg>
DEMO
Logo : http://myappstore.download/html/svg-demo/logo.html
Yoat : http://myappstore.download/html/svg-demo/yoat.html
Hope that you will find it useful.
