Animated line drawing in SVG

Developer
Iharosi
Size
7,408 Kb
Views
4,048
  1. Animated line drawing in SVG Previews
  2. Animated line drawing in SVG HTML Codes
  3. Animated line drawing in SVG JS Codes

How do I make an animated line drawing in svg?

Animated line drawing in SVG via http://jakearchibald.com/2013/animated-line-drawing-svg/. What is a animated line drawing in svg? How do you make a animated line drawing in svg? This script and codes were developed by Iharosi on 16 January 2023, Monday.

Animated line drawing in SVG Previews
IQ Test

Animated line drawing in SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated line drawing in SVG</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <svg width="100%" height="100%" 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="566.93px" height="566.93px" viewBox="0 0 566.93 566.93" enable-background="new 0 0 566.93 566.93" xml:space="preserve"> <g> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M169.779,386.453l9.212-25.42l-23.202,25.42h-5.886l-4.692-25.42 l-9.212,25.42h-16.378l16.463-45.211h20.643l4.351,22.691l20.898-22.691h20.643l-16.463,45.211H169.779z"/> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M256.02,341.242c-0.398,0.798-1.066,1.834-2.004,3.113 c-0.939,1.281-1.935,2.547-2.986,3.797c-1.053,1.251-2.076,2.332-3.071,3.24c-0.995,0.912-1.72,1.366-2.175,1.366H219.51 l-4.862,13.392l8.104-7.848h19.704l-12.198,11.516h-16.975l-1.876,5.119h32.67c-0.057,0.114-0.199,0.355-0.426,0.725 c-0.228,0.37-0.456,0.754-0.682,1.151c-0.228,0.398-0.457,0.768-0.683,1.109c-0.228,0.341-0.37,0.54-0.426,0.597 c-0.511,0.684-1.208,1.48-2.089,2.389c-0.883,0.91-1.749,1.777-2.602,2.602c-0.854,0.826-1.608,1.522-2.261,2.09 c-0.655,0.569-1.011,0.853-1.067,0.853h-42.907l16.463-45.211H256.02z"/> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M246.637,365.555c0-2.73,0.597-5.545,1.791-8.445 c1.194-2.9,2.814-5.516,4.862-7.848c2.047-2.332,4.407-4.252,7.08-5.76c2.673-1.505,5.516-2.26,8.53-2.26h35.23 c-1.65,2.162-3.314,4.195-4.99,6.1c-1.678,1.906-3.512,3.711-5.502,5.417H271.46c-0.74,0-1.522,0.242-2.346,0.726 c-0.825,0.482-1.621,1.123-2.389,1.918c-0.768,0.798-1.465,1.693-2.089,2.688c-0.627,0.996-1.109,1.977-1.45,2.943 c-0.456,1.478-0.683,2.644-0.683,3.496c0,1.082,0.284,2.233,0.853,3.455c0.568,1.224,1.293,2.346,2.175,3.369 c0.881,1.024,1.848,1.877,2.901,2.561c1.051,0.682,2.06,1.023,3.027,1.023h20.386c-1.309,1.934-2.785,3.91-4.435,5.928 c-1.649,2.02-3.555,3.881-5.715,5.588h-6.825c-3.527,0-6.967-0.312-10.321-0.938c-3.357-0.627-6.37-1.721-9.042-3.285 c-2.674-1.565-4.82-3.682-6.44-6.355c-1.621-2.672-2.431-6.057-2.431-10.15V365.555z"/> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M329.977,372.122v-0.512c0-0.454-0.084-0.925-0.256-1.407 c-0.17-0.483-0.482-0.726-0.939-0.726h-17.06c-1.707,0-3.242-0.411-4.607-1.237c-1.364-0.824-2.545-1.876-3.539-3.156 c-0.996-1.278-1.75-2.686-2.26-4.223c-0.514-1.535-0.77-3.041-0.77-4.521c0-1.364,0.398-2.913,1.195-4.648 c0.795-1.734,1.82-3.383,3.071-4.948c1.249-1.563,2.672-2.871,4.265-3.924c1.591-1.051,3.184-1.578,4.777-1.578h43.504 c-1.309,1.935-2.801,3.868-4.479,5.801c-1.678,1.934-3.541,3.868-5.588,5.801h-28.148c-0.627,0-1.167,0.427-1.621,1.279 c-0.456,0.854-0.683,1.535-0.683,2.047v0.428c0,0.057,0.113,0.185,0.341,0.383c0.227,0.2,0.398,0.356,0.512,0.47 c0.227,0.228,0.555,0.441,0.98,0.64c0.428,0.199,0.668,0.299,0.726,0.299h16.208c1.877,0,3.468,0.44,4.776,1.322 c1.308,0.883,2.374,1.99,3.198,3.326c0.824,1.336,1.422,2.772,1.791,4.309c0.37,1.535,0.555,2.957,0.555,4.265v0.512 c0,1.479-0.34,3.058-1.023,4.734c-0.682,1.677-1.578,3.228-2.686,4.649c-1.109,1.422-2.39,2.602-3.84,3.539 c-1.449,0.938-2.943,1.408-4.479,1.408h-43.504c0.284-0.568,0.865-1.478,1.748-2.729c0.881-1.251,1.82-2.517,2.816-3.796 c0.994-1.279,1.918-2.416,2.771-3.412c0.854-0.995,1.365-1.494,1.535-1.494h29.003c0.855,0,1.351-0.255,1.493-0.767 c0.143-0.513,0.213-1.052,0.213-1.621V372.122z"/> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M410.842,341.242c-0.398,0.798-1.066,1.834-2.004,3.113 c-0.939,1.281-1.934,2.547-2.985,3.797c-1.052,1.251-2.077,2.332-3.07,3.24c-0.996,0.912-1.722,1.366-2.176,1.366h-26.272 l-4.863,13.392l8.104-7.848h19.704l-12.197,11.516h-16.976l-1.876,5.119h32.67c-0.059,0.114-0.199,0.355-0.426,0.725 c-0.228,0.37-0.457,0.754-0.684,1.151c-0.228,0.398-0.455,0.768-0.682,1.109c-0.228,0.341-0.371,0.54-0.426,0.597 c-0.514,0.684-1.21,1.48-2.092,2.389c-0.881,0.91-1.748,1.777-2.602,2.602c-0.853,0.826-1.606,1.522-2.26,2.09 c-0.654,0.569-1.011,0.853-1.066,0.853h-42.906l16.463-45.211H410.842z"/> <path fill="#707171" stroke="#6D6E70" stroke-miterlimit="10" d="M415.535,341.242h16.377l-7.42,20.303l28.234-20.303h18.254 l-29.514,22.605l16.377,22.605H439.59l-16.721-20.303l-7.42,20.303h-16.378L415.535,341.242z"/> </g> <g> <path fill="#EF6946" d="M365.826,204.002c-29.734,0-53.84,24.104-53.84,53.839s24.105,53.839,53.84,53.839 c29.734,0,53.84-24.104,53.84-53.839S395.56,204.002,365.826,204.002z M365.826,301.494c-24.109,0-43.653-19.544-43.653-43.653 s19.544-43.654,43.653-43.654c24.109,0,43.654,19.545,43.654,43.654S389.935,301.494,365.826,301.494z"/> <path fill="#38BDBB" d="M219.219,276.459c-11.854,0-22.987-5.802-29.793-15.523c-5.314-5.615-12.487-8.706-20.207-8.706 c-7.72,0-14.893,3.091-20.206,8.706c-6.807,9.721-17.939,15.523-29.793,15.523s-22.987-5.802-29.793-15.523 c-4.143-4.377-9.455-7.238-15.367-8.277l-1.717-0.301l7.166-7.166l0.523,0.163c7.64,2.377,14.379,7.306,18.983,13.881 c5.313,5.614,12.486,8.704,20.205,8.704c7.719,0,14.893-3.09,20.207-8.705c6.807-9.722,17.939-15.523,29.793-15.523 c11.855,0,22.987,5.802,29.794,15.523c5.314,5.615,12.487,8.705,20.206,8.705c7.719,0,14.893-3.09,20.207-8.705 c6.807-9.722,17.939-15.523,29.793-15.523c9.721,0,18.863,3.8,25.738,10.7l0.639,0.642l-6.023,6.023l-0.642-0.644 c-5.266-5.289-12.266-8.202-19.711-8.202c-7.72,0-14.893,3.091-20.207,8.706C242.206,270.657,231.074,276.459,219.219,276.459z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#973292" d="M300.957,164.681c-0.02,4.472-3.551,7.395-7.906,6.158 c-9.263-2.631-18.464-5.485-27.684-8.263c-3.087-0.93-3.374-0.783-4.408,2.334c-2.803,8.445-5.585,16.896-8.45,25.32 c-1.253,3.684-3.834,5.334-7.262,4.897c-3.581-0.457-5.842-4.761-4.463-8.925c3.068-9.268,6.262-18.495,9.419-27.733 c0.859-2.514,1.733-5.025,2.667-7.512c1.545-4.11,4.592-5.662,8.734-4.239c11.687,4.015,23.35,8.103,35.003,12.214 C299.623,159.998,300.969,161.911,300.957,164.681z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#973292" d="M306.062,177.061c1.373,2.762,2.633,5.292,3.889,7.825 c0.62,1.252,1.273,2.489,1.838,3.767c0.766,1.735,1.898,1.974,3.533,1.159c7.684-3.83,15.371-7.648,23.097-11.389 c1.652-0.8,3.427-1.539,5.222-1.813c2.695-0.412,4.853,1.091,6.005,3.655c1.087,2.42,0.642,4.838-1.473,6.697 c-1.136,0.998-2.446,1.867-3.809,2.526c-9.94,4.81-19.902,9.573-29.879,14.306c-5.915,2.806-8.078,2.101-11.399-3.584 c-2.402-4.109-2.78-8.32-0.883-12.784C303.595,184.151,304.699,180.755,306.062,177.061z"/> <path fill-rule="evenodd" clip-rule="evenodd" fill="#973292" d="M299.509,141.155c0.013-8.513,6.518-15.027,15.028-15.046 c8.391-0.019,15.25,6.456,15.152,14.505c-0.111,9.207-7.549,15.668-15.22,15.436C305.996,155.794,299.496,149.523,299.509,141.155z "/> <path fill="#C4CD2E" d="M269.219,264.369c-2.373,0-4.608,0.482-6.66,1.391c-3.726,20.327-21.519,35.734-42.923,35.734 c-21.251,0-38.932-15.191-42.829-35.302c-2.296-1.201-4.855-1.823-7.588-1.823c-1.018,0-2.01,0.096-2.975,0.266 c3.341,26.525,25.961,47.046,53.392,47.046c27.366,0,49.945-20.423,53.371-46.856C271.778,264.536,270.512,264.369,269.219,264.369 z"/> <path fill="#C4CD2E" d="M182.403,235.052c7.675-12.514,21.477-20.864,37.233-20.864c15.673,0,29.403,8.268,37.101,20.673 c3.491-0.949,7.104-1.505,10.785-1.637c-8.938-17.352-27.022-29.222-47.885-29.222c-20.872,0-38.963,11.881-47.896,29.247 C175.383,233.442,178.956,234.058,182.403,235.052z"/> </g> <g> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M145.877,422.711l5.042-13.912l-12.698,13.912H135l-2.568-13.912 l-5.043,13.912h-8.962l9.01-24.742h11.297l2.381,12.419l11.438-12.419h11.297l-9.01,24.742H145.877z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M179.91,422.711l-0.98-5.276 c-0.062,0.186-0.289,0.546-0.677,1.075c-0.389,0.529-0.825,1.089-1.307,1.681c-0.483,0.59-0.957,1.136-1.424,1.634 c-0.466,0.499-0.809,0.794-1.027,0.887h-19.747c0.062-0.25,0.093-0.357,0.093-0.327v-0.141l16.807-21.475 c0.093-0.186,0.28-0.434,0.56-0.745c0.28-0.312,0.584-0.615,0.911-0.91c0.328-0.295,0.654-0.562,0.98-0.794 c0.328-0.233,0.6-0.35,0.818-0.35h7.842c0.312,0,0.599,0.171,0.864,0.513c0.264,0.344,0.49,0.764,0.677,1.26 c0.186,0.499,0.35,1.02,0.49,1.565c0.139,0.544,0.256,1.005,0.35,1.378l3.081,20.026H179.91z M169.453,416.454h9.477l-1.634-10.969 l-7.842,10.503V416.454z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M197.041,397.969h20.822c1.12,0,2.022,0.233,2.706,0.699 c0.685,0.469,1.206,1.06,1.564,1.773c0.357,0.718,0.591,1.495,0.7,2.335c0.108,0.84,0.163,1.618,0.163,2.335 c0,1.588-0.389,2.895-1.167,3.921c-0.778,1.028-1.751,1.845-2.918,2.451c-1.166,0.607-2.458,1.044-3.874,1.307 c-1.417,0.265-2.747,0.443-3.991,0.537l9.149,9.384h-9.989l-9.617-8.87l-0.513,0.372l-3.082,8.498h-8.963L197.041,397.969z M213.942,405.111c0-0.25-0.047-0.459-0.141-0.631c-0.093-0.17-0.326-0.257-0.7-0.257h-9.384l-2.66,7.282l4.107-4.154h7.469 c0.467,0,0.801-0.209,1.004-0.63c0.202-0.42,0.304-0.785,0.304-1.097V405.111z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M243.118,422.711l-0.98-5.276 c-0.063,0.186-0.288,0.546-0.677,1.075c-0.39,0.529-0.825,1.089-1.307,1.681c-0.483,0.59-0.958,1.136-1.424,1.634 c-0.467,0.499-0.811,0.794-1.027,0.887h-19.747c0.062-0.25,0.093-0.357,0.093-0.327v-0.141l16.807-21.475 c0.092-0.186,0.28-0.434,0.559-0.745c0.28-0.312,0.584-0.615,0.91-0.91c0.327-0.295,0.654-0.562,0.981-0.794 c0.327-0.233,0.599-0.35,0.817-0.35h7.843c0.311,0,0.599,0.171,0.863,0.513c0.265,0.344,0.491,0.764,0.677,1.26 c0.187,0.499,0.35,1.02,0.491,1.565c0.14,0.544,0.256,1.005,0.351,1.378l3.081,20.026H243.118z M232.662,416.454h9.476 l-1.633-10.969l-7.843,10.503V416.454z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M259.737,404.272h-8.823v-0.048 c0.031-0.124,0.257-0.466,0.677-1.029c0.42-0.557,0.918-1.18,1.494-1.865c0.575-0.684,1.166-1.347,1.773-1.983 c0.607-0.637,1.127-1.097,1.564-1.377h23.389c-0.217,0.436-0.583,1.005-1.096,1.703c-0.515,0.701-1.059,1.395-1.634,2.078 c-0.576,0.685-1.137,1.276-1.681,1.774c-0.544,0.498-0.941,0.747-1.19,0.747H268.7l-6.723,18.439h-8.963L259.737,404.272z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M303.269,414.354c-0.932,1.618-2.084,3.043-3.455,4.272 c-1.368,1.23-2.915,2.217-4.643,2.966c-1.728,0.746-3.526,1.119-5.393,1.119h-5.464c-1.711,0-3.298-0.142-4.762-0.421 c-1.462-0.279-2.722-0.754-3.78-1.424c-1.058-0.669-1.891-1.579-2.498-2.73c-0.607-1.151-0.91-2.599-0.91-4.342 c0-0.373,0.015-0.763,0.046-1.166c0.031-0.404,0.078-0.826,0.14-1.262c0.218-1.681,0.778-3.323,1.682-4.925 c0.902-1.603,2.022-3.034,3.36-4.295c1.338-1.261,2.816-2.271,4.435-3.033c1.619-0.763,3.253-1.145,4.902-1.145h6.957 c1.774,0,3.36,0.162,4.764,0.489c1.398,0.327,2.596,0.834,3.593,1.518c0.995,0.685,1.757,1.58,2.287,2.686 c0.528,1.105,0.795,2.42,0.795,3.944c0,0.436-0.018,0.873-0.049,1.307c-0.029,0.435-0.092,0.904-0.187,1.399 C304.81,411.056,304.203,412.736,303.269,414.354z M281.282,411.039v0.282c0,0.559,0.109,1.143,0.327,1.751 c0.217,0.605,0.513,1.158,0.887,1.655c0.373,0.499,0.809,0.903,1.306,1.214c0.498,0.312,1.028,0.468,1.589,0.468h3.874 c0.279,0,0.701-0.133,1.261-0.398c0.561-0.264,1.159-0.614,1.797-1.051c0.639-0.436,1.245-0.925,1.821-1.471 c0.575-0.543,1.004-1.081,1.284-1.61c0.279-0.435,0.45-0.776,0.514-1.026l0.186-0.466c0.06-0.312,0.093-0.451,0.093-0.422 c0.031-0.247,0.055-0.504,0.071-0.77c0.015-0.265,0.023-0.536,0.023-0.818c0-0.496-0.046-0.994-0.141-1.493 c-0.094-0.497-0.281-0.94-0.561-1.33c-0.279-0.39-0.662-0.701-1.144-0.934c-0.482-0.233-1.112-0.35-1.892-0.35h-4.574 c-0.497,0-1.035,0.132-1.61,0.396c-0.575,0.263-1.144,0.614-1.704,1.05c-0.561,0.436-1.082,0.926-1.564,1.472 c-0.483,0.544-0.862,1.081-1.143,1.609c-0.157,0.374-0.297,0.724-0.421,1.05c-0.124,0.329-0.202,0.615-0.232,0.863 C281.297,410.744,281.282,410.853,281.282,411.039z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M309.525,397.969h11.298l2.66,13.911l5.088-13.911h8.869 l-9.008,24.742h-11.299l-2.613-13.912l-5.041,13.912h-8.965L309.525,397.969z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M354.714,404.272h-8.822v-0.048 c0.029-0.124,0.256-0.466,0.677-1.029c0.42-0.557,0.917-1.18,1.492-1.865c0.576-0.684,1.168-1.347,1.775-1.983 c0.607-0.637,1.126-1.097,1.562-1.377h23.39c-0.219,0.436-0.583,1.005-1.097,1.703c-0.515,0.701-1.059,1.395-1.635,2.078 c-0.576,0.685-1.137,1.276-1.682,1.774c-0.545,0.498-0.94,0.747-1.19,0.747h-5.509l-6.722,18.439h-8.964L354.714,404.272z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M401.444,397.969c-0.218,0.436-0.583,1.005-1.097,1.703 c-0.516,0.701-1.06,1.395-1.637,2.078c-0.573,0.685-1.134,1.276-1.679,1.774c-0.544,0.498-0.942,0.747-1.19,0.747h-14.378 l-2.661,7.329l4.434-4.296h10.785l-6.676,6.302h-9.29l-1.027,2.803h17.88c-0.031,0.062-0.109,0.194-0.232,0.395 c-0.126,0.204-0.25,0.414-0.374,0.631c-0.125,0.219-0.249,0.421-0.374,0.607c-0.124,0.189-0.203,0.296-0.233,0.328 c-0.279,0.372-0.661,0.81-1.143,1.306c-0.482,0.498-0.958,0.976-1.424,1.426c-0.468,0.451-0.881,0.832-1.237,1.142 c-0.358,0.312-0.554,0.468-0.584,0.468h-23.482l9.012-24.742H401.444z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M416.99,422.711l-0.98-5.276 c-0.064,0.186-0.287,0.546-0.677,1.075c-0.392,0.529-0.824,1.089-1.309,1.681c-0.482,0.59-0.956,1.136-1.423,1.634 c-0.467,0.499-0.81,0.794-1.026,0.887h-19.748c0.062-0.25,0.094-0.357,0.094-0.327v-0.141l16.806-21.475 c0.093-0.186,0.28-0.434,0.561-0.745c0.279-0.312,0.582-0.615,0.91-0.91c0.325-0.295,0.652-0.562,0.98-0.794 c0.326-0.233,0.598-0.35,0.817-0.35h7.843c0.309,0,0.598,0.171,0.862,0.513c0.265,0.344,0.491,0.764,0.676,1.26 c0.188,0.499,0.35,1.02,0.491,1.565c0.14,0.544,0.257,1.005,0.349,1.378l3.084,20.026H416.99z M406.532,416.454h9.478 l-1.635-10.969l-7.843,10.503V416.454z"/> <path fill="#BDBCBC" stroke="#BBBDBF" stroke-miterlimit="10" d="M452.562,422.711l5.041-13.912l-12.698,13.912h-3.22 l-2.566-13.912l-5.043,13.912h-8.966l9.012-24.742h11.298l2.38,12.419l11.439-12.419h11.297l-9.011,24.742H452.562z"/> </g> </svg> <script src="js/index.js"></script>
</body>
</html>

Animated line drawing in SVG - Script Codes JS Codes

(function() { 'use strict'; var selector = [ '#Layer_1>g:nth-child(1)>path', '#Layer_1>g:nth-child(3)>path' ]; for (var i = 0; i < selector.length; i = i + 1) { var paths = document.querySelectorAll(selector[i]); var j = 0; Object.keys(paths).forEach(function(key) { if (key >= 0) { j = j + 1; var path = paths[key]; var length = path.getTotalLength(); // Clear any previous transition path.style.transition = path.style.WebkitTransition = 'none'; // Set up the starting positions path.style.fill = 'transparent'; path.style.strokeDasharray = length + ' ' + length; path.style.strokeDashoffset = length; // Trigger a layout so styles are calculated & the browser // picks up the starting position before animating path.getBoundingClientRect(); // Define our transition path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset .5s ' + (0.2 * j) + 's ease-in-out, ' + 'fill .5s ' + ((0.2 * j) + 0.5) + 's ease-in-out'; // Go! path.style.strokeDashoffset = '0'; path.style.fill = '#707171'; } }); }
}());
Animated line drawing in SVG - Script Codes
Animated line drawing in SVG - Script Codes
Home Page Home
Developer Iharosi
Username iharosi
Uploaded January 16, 2023
Rating 3
Size 7,408 Kb
Views 4,048
Do you need developer help for Animated line drawing in SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Iharosi (iharosi) Script Codes
Name
Pseudo style
SVG morph anim with Snap.svg
Hyphenation
Img srcset attribute test
A Pen by iharosi
Crafting link underlines
Paper like css box shadow
Backdrop Filters with Safari 9
Highlight selected dom
Close shade example
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!