DrawSVGText

DrawSVGText.markdown

DrawSVGText

Drawing text animation using embedded SVG font path

SVG path from Ubuntu-mono font : converted using batik-ttf2svg; CSS animation from https://github.com/dboudro/AnimateSVGText

A Pen by Taewook Kang on CodePen.

License.

index.html

<center><input type="text" id="svgText" value="CG2016" size="6" maxlength="6" /><input type="button" id="redraw" value="Redraw" /></center>

<div id="svg-container">
  <svg id='svg-canvas' class="svg-panel">
  <g transform="translate(10, 125), scale(0.17, -0.17)">
  <path id="digit0" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  <g transform="translate(100, 125), scale(0.17, -0.17)">
  <path id="digit1" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  <g transform="translate(190, 125), scale(0.17, -0.17)">
  <path id="digit2" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  <g transform="translate(280, 125), scale(0.17, -0.17)">
  <path id="digit3" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  <g transform="translate(370, 125), scale(0.17, -0.17)">
  <path id="digit4" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  <g transform="translate(460, 125), scale(0.17, -0.17)">
  <path id="digit5" class="title" fill-opacity="0" stroke="#FFF" stroke-width="23" d="" />
  </g>
  </svg>
</div>

script.js

var digits = [
"M465 311Q465 147 410 67T250 -13Q145 -13 90 67T35 311Q35 473 91 553T250 633Q355 633 410 554T465 311ZM354 311Q354 417 328 472T250 528Q200 528 173 473T146 311Q146 204 173 149T250 93Q301 93 327 148T354 311ZM306 321Q306 294 291 275T251 255Q225 255 210 274T195 321Q195 348 210 368T251 388Q275 388 290 368T306 321Z",
"M213 102V448Q185 428 149 413T88 388L48 490Q72 499 100 513T156 544T209 580T252 619H336V102H459V0H83V102H213Z",
"M434 456Q434 424 422 395T390 337T345 283T294 233Q281 221 264 205T232 171T207 135T196 102H462V0H58Q55 10 55 25T56 46Q56 96 74 138T121 215T182 281T243 340T290 394T309 447Q309 485 286 505T228 526Q199 526 167 512T104 465L43 551Q83 593 135 613T240 633Q278 633 313 622T375 589T418 534T434 456Z",
"M213 -13Q190 -13 165 -10T116 -1T72 10T41 21L65 124Q88 114 124 103T212 92Q275 92 300 119T326 186Q326 235 287 254T188 274H150V376H196Q215 376 234 380T268 393T292 417T302 455Q302 489 282 508T225 528Q190 528 156 517T96 488L52 578Q79 596 123 614T224 633Q276 633 314 620T378 584T415 528T427 459Q427 422 406 388T350 336Q398 316 424 277T451 184Q451 141 437 105T394 43T320 2T213 -13Z",
"M285 465Q267 442 248 416T211 362T176 304T145 247H285V465ZM408 619V247H475V146H408V0H285V146H27V236Q46 275 76 324T142 426T218 528T298 619H408Z",
"M321 182Q321 208 313 229T279 266T206 290T83 299Q93 383 99 463T108 619H424V517H211Q209 485 206 450T201 393Q325 385 386 333T447 187Q447 144 432 108T386 44T309 2T202 -13Q178 -13 153 -10T105 -3T64 8T35 19L60 121Q82 110 116 101T201 92Q237 92 260 100T297 120T316 149T321 182Z",
"M241 294Q222 294 202 290T169 279Q168 270 168 261T167 242Q167 213 171 187T185 139T212 106T256 93Q277 93 292 103T316 128T330 161T335 196Q335 243 314 268T241 294ZM257 396Q311 396 348 380T410 337T444 274T455 198Q455 162 444 125T408 57T347 7T259 -13Q155 -13 101 51T46 253Q46 343 72 412T148 528T266 599T419 623L426 518Q386 517 348 510T278 487T223 444T188 379Q207 387 225 391T257 396Z",
"M132 0Q135 64 153 135T196 277T252 409T309 517H49V619H453V526Q426 495 394 439T334 312T284 161T257 0H132Z",
"M446 472Q446 429 425 388T359 318Q416 285 439 246T463 160Q463 130 452 99T415 44T348 3T247 -13Q200 -13 162 -2T96 31T53 84T38 155Q38 202 60 243T129 317Q85 347 69 381T53 453Q53 483 63 515T97 574T158 617T252 634Q341 634 393 590T446 472ZM347 162Q347 182 340 197T316 224T273 249T211 276Q183 253 168 225T153 170Q153 130 181 110T249 89Q294 89 320 110T347 162ZM250 532Q218 532 194 514T169 461Q169 426 192 404T273 358Q304 381 317 408T330 462Q330 497 307 514T250 532Z",
"M261 329Q280 329 301 333T335 344Q336 352 336 363T337 386Q337 411 333 436T318 483T290 517T246 530Q224 530 209 522T184 499T170 466T165 426Q165 379 187 354T261 329ZM245 227Q191 227 153 242T91 285T56 347T45 424Q45 460 57 497T94 565T156 615T243 635Q347 635 402 565T457 370Q457 280 431 211T357 94T240 23T87 -2L83 104Q163 105 226 138T315 244Q276 227 245 227Z",
"M359 0L330 143H165L137 0H9Q53 183 98 333T185 619H319Q363 483 406 331T491 0H359ZM249 499Q239 464 231 433T215 371T201 309T188 245H309Q303 278 297 309T284 370T268 432T249 499Z",
"M469 187Q469 131 450 94T399 34T322 2T226 -8Q185 -8 141 -4T54 10V611Q89 617 131 621T214 626Q284 626 328 612T397 574T431 521T440 463Q440 419 419 385T361 331Q424 308 446 269T469 187ZM177 271V103Q190 101 205 100T236 99Q257 99 277 102T312 115T338 142T348 187Q348 232 320 251T243 271H177ZM225 373Q272 373 296 393T320 450Q320 472 313 485T294 506T266 516T233 519Q219 519 204 518T177 515V373H225Z",
"M296 -13Q165 -13 96 71T27 310Q27 387 48 447T106 548T195 611T308 633Q341 633 367 628T414 615T447 600T468 588L436 490Q413 505 381 515T306 526Q277 526 250 516T201 481T166 415T152 313Q152 207 188 151T308 94Q356 94 387 105T438 127L469 30Q443 14 399 1T296 -13Z",
"M177 100Q182 99 188 99T199 99Q241 99 269 115T315 159T340 225T348 310Q348 350 342 388T321 455T280 501T213 519Q205 519 195 519T177 516V100ZM473 310Q473 224 452 164T392 65T302 10T186 -8Q153 -8 122 -5T54 7V611Q96 620 133 623T202 626Q263 626 313 608T399 552T453 454T473 310Z",
"M63 0V619H438V517H186V378H405V276H186V102H460V0H63Z",
"M63 0V619H442V517H186V367H410V265H186V0H63Z",
"M312 526Q268 526 238 510T189 466T161 398T152 310Q152 199 187 147T290 94Q301 94 314 95T338 98V324H461V15Q439 7 393 -3T280 -13Q222 -13 176 7T96 68T45 169T27 310Q27 389 48 449T105 551T190 612T295 633Q331 633 359 628T409 615T443 600T464 588L432 490Q410 504 378 515T312 526Z",
"M455 619V0H332V273H168V0H45V619H168V375H332V619H455Z",
"M54 0V102H189V517H54V619H447V517H313V102H447V0H54Z",
"M438 207Q438 162 427 122T389 52T320 5T218 -13Q155 -13 113 3T42 42L89 140Q114 124 144 109T207 94Q255 94 284 119T314 214V517H107V619H438V207Z",
"M350 0Q339 35 319 75T273 154T221 226T168 283V0H45V619H168V362Q190 390 214 424T259 492T299 559T329 619H468Q454 592 435 558T390 486T337 409T277 334Q308 304 340 265T400 182T452 91T489 0H350Z",
"M460 0H71V619H195V102H460V0Z",
"M161 619Q168 598 178 565T201 494T225 417T248 345Q260 382 273 421T298 497T320 566T338 619H440Q447 538 453 461T464 309T472 157T477 0H364L370 481L294 219H204L131 481L136 0H23Q26 76 29 158T37 321T46 478T59 619H161Z",
"M355 0Q313 103 264 205T157 411V0H46V619H145Q173 575 201 524T255 421T304 322T343 238V619H454V0H355Z",
"M152 310Q152 265 155 226T169 157T199 111T250 94Q281 94 300 111T330 157T344 226T348 310Q348 355 345 394T331 463T301 509T250 526Q218 526 199 509T170 463T156 394T152 310ZM27 310Q27 470 86 551T250 633Q359 633 416 552T473 310Q473 150 415 69T251 -13Q142 -13 85 68T27 310Z",
"M224 626Q342 626 407 578T472 419Q472 308 407 259T221 209H177V0H54V611Q72 615 94 618T140 622T185 625T224 626ZM238 519Q227 519 208 519T177 516V316H227Q286 316 316 339T346 420Q346 474 317 496T238 519Z",
"M27 307Q27 467 86 548T250 630Q359 630 416 549T473 307Q473 167 428 87T298 -11Q309 -36 351 -52T468 -82L442 -170Q325 -154 266 -117T195 -9Q114 11 71 90T27 307ZM152 307Q152 262 155 223T169 155T199 108T250 91Q281 91 300 108T330 154T344 223T348 307Q348 352 345 391T331 460T301 506T250 523Q218 523 199 506T170 460T156 391T152 307Z",
"M214 626Q267 626 310 614T384 577T431 514T448 423Q448 369 426 325T353 258Q370 232 389 201T426 135T460 66T489 0H360Q337 60 307 115T241 228H177V0H54V610Q72 614 93 617T137 622T179 625T214 626ZM323 424Q323 473 293 496T214 519Q207 519 197 519T177 516V330H204Q267 330 295 354T323 424Z",
"M232 90Q263 90 283 96T316 114T332 140T337 170Q337 189 326 204T298 230T260 251T218 269Q190 279 160 292T106 325T65 374T49 448Q49 535 105 584T261 633Q318 633 360 620T432 591L396 496Q371 510 341 520T270 530Q172 530 172 459Q172 441 182 428T207 404T242 385T281 370Q310 359 341 346T399 310T443 254T460 169Q460 82 404 35T232 -13Q155 -13 109 3T40 34L76 134Q103 118 140 104T232 90Z",
"M475 619V517H312V0H188V517H25V619H475Z",
"M248 -13Q188 -13 148 3T83 51T49 126T39 224V619H163V232Q163 193 167 167T180 124T207 101T250 94Q276 94 293 101T320 124T334 167T338 233V619H461V224Q461 170 451 126T416 51T350 4T248 -13Z",
"M186 0Q162 69 135 156T84 329T41 493T13 619H143Q149 571 161 508T187 377T218 244T251 126Q267 177 283 242T313 375T339 507T359 619H488Q476 559 459 485T419 330T369 164T313 0H186Z",
"M296 400Q300 381 308 353T325 291T346 218T369 138Q369 190 368 249T366 371T364 496T363 619H477Q474 543 471 463T464 303T455 146T442 0H340Q318 63 296 135T252 274Q230 211 206 137T162 0H60Q52 69 46 146T36 303T28 463T23 619H137Q136 560 135 497T133 372T131 250T130 138Q139 170 150 208T172 283T192 351T206 400H296Z",
"M356 0Q337 51 310 113T252 237Q223 178 194 115T144 0H11Q21 27 40 65T83 147T133 237T183 327L21 619H154L252 421L355 619H479L321 330Q348 287 374 240T422 149T462 66T489 0H356Z",
"M254 336Q265 359 279 394T308 468T336 547T361 619H488Q469 568 450 520T410 425T365 332T313 236V0H189V235Q134 332 93 424T13 619H145Q168 547 196 473T254 336Z",
"M445 533Q402 467 366 409T299 299T241 198T188 102H454V0H46V71Q68 114 93 161T149 263T216 380T297 517H59V619H445V533Z"];

function setPath() {
  var s = $("#svgText").val();
  $(s.split('')).each(
    function(intIndex, c ){
      if (c >= "0" && c <= "9") {
        $("#digit" + intIndex).attr("d", digits[c.charCodeAt(0) - 48]);
      }
      else if (c >= "A" && c <= "Z") {
        $("#digit" + intIndex).attr("d", digits[c.charCodeAt(0) - 55]);
      }
    }
  );
}

$(document).ready(function() {
  setPath();
  
  $("#redraw").click(function() {
    setPath();
    var el = $("#svg-canvas"),  
    newone = el.clone(true);
    el.before(newone);
    $("." + el.attr("class") + ":last").remove();
  })
});

style.css

body {
  background-color: #212A3F;
}
#svg-container {
  text-align: center;
 
}
#svg-canvas {
  display: inline-block;
  width: 550px;
  height: 150px;
  background-color: #AA3939;
}
.title {
  stroke-dasharray: 6200;
  stroke-dashoffset: 6200;
  animation: draw 3s linear forwards;
  -webkit-animation: draw 3s linear forwards;
  -moz-animation: draw 3s linear forwards;
  -o-animation: draw 3s linear forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}