<div id="container">
  <a id="redo" class="animate">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
      <path id="redo" d="M11 1.833V4.75a.4.4 0 0 1-.124.292.4.4 0 0 1-.293.124H7.667c-.183 0-.31-.086-.385-.26a.37.37 0 0 1 .09-.45l.9-.898c-.642-.594-1.4-.89-2.272-.89a3.24 3.24 0 0 0-1.292.263A3.31 3.31 0 0 0 2.93 4.71 3.24 3.24 0 0 0 2.666 6c0 .45.088.88.264 1.29.176.41.414.767.713 1.065.3.3.654.537 1.065.713.41.177.84.266 1.292.266a3.27 3.27 0 0 0 1.465-.34c.46-.225.848-.544 1.165-.957.03-.043.08-.07.15-.077.064 0 .12.02.162.058l.892.898c.04.035.06.08.063.134a.214.214 0 0 1-.05.146 4.9 4.9 0 0 1-1.718 1.332A4.964 4.964 0 0 1 6 11a4.877 4.877 0 0 1-1.94-.397 5.05 5.05 0 0 1-1.595-1.067c-.447-.448-.803-.98-1.068-1.596S1 6.677 1 6c0-.676.132-1.324.397-1.94a5.057 5.057 0 0 1 1.068-1.595A5.07 5.07 0 0 1 4.06 1.397 4.86 4.86 0 0 1 6 1a5.055 5.055 0 0 1 3.445 1.38l.846-.84c.127-.135.28-.165.456-.09a.39.39 0 0 1 .254.383"/>
    </svg>
  </a>
  <svg id="calligraphy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="265" viewBox="0 0 440 265">
    <g id="hi" class="animate">
      <defs>
        <path id="h1-shape" d="M154.23 27.21c-1.946 2.415-5.418 1.835-7.25-.73-3.312-4.63-15.134 14.07-27.182 50.23-16.137 48.435-43.945 153.282-52.153 177.263-4.452 13.008-42.214 13.06-39.107.076 4.723-19.737 25.042-95.183 45.608-155.64 21.5-63.195 41.05-115.997 74.105-90.7 2.215 1.696 3.91 4.136 5.112 7.183 0 0 3.283 9.318.867 12.318z"/>
        <path id="h2-shape" d="M148.252 7.71C172.246 26.075 135.064 131.9 76.598 150.9c-61.904 20.12-92.495-25.09-64.125-58.523 1.787-2.106 2.77-1.513 2.257 1.2-6.865 36.437 27.307 57.933 59.72 49.134 45.86-12.448 71.094-72.394 73.253-110.464.242-4.26-.442-6.37-1.824-6.488-1.15-.1-4.985-2.38-3.9-10.463 1.367-10.205 6.272-7.584 6.272-7.584z"/>
        <path id="h3-shape" d="M84.368 165.916s59.68-65.286 89.193-55.538c22.418 7.403 16.916 29.663 13.853 41.583-3.063 11.923-27.62 98.25.38 98.25 18.126 0 30.977-17.702 39.165-33.84 1.604-3.16 3.916-2.097 2.79.91-7.433 19.86-21.853 43.18-47.61 43.18-92.826 0-8.473-139-30.973-139-19.932 0-55.715 45.538-63.365 63.464l-3.432-19.008z"/>
        <path id="i1-shape" d="M239.86 132.225c-20.05 61.736-37.11 128.236 26.68 128.236 25.755 0 40.177-23.32 47.61-43.18 1.125-3.007-1.188-4.07-2.79-.91-8.19 16.138-21.04 33.84-39.165 33.84-28 0-5.045-81.433 5.967-122.44 3.975-14.798-31.394-16.82-38.302 4.455z"/>
        <path id="i2-shape" d="M297.783 65.637c.81-17.168-9.244-20.64-22.246-11.51-12.88 9.043-30.12 42.117-1.533 41.374 21.957-.572 23.35-20.764 23.78-29.863z"/>
        <path id="x1-shape" d="M438.123 21.947c-.305-4.894-1.727-8.658-4.484-10.973-15.265-12.8-40.37-2.787-60.302 46.255-18.078 44.472-22.916 112.883-20.94 124.904 1.33 8.104 16.927 10.385 19.145-1.125 4.346-22.53 7.945-49.74 28.006-99.218 14.612-36.035 27.903-55.557 31.11-52.232.74.768 2.4 1.15 5.15.15s2.313-7.763 2.313-7.763z"/>
        <path id="x2-shape" d="M430.36 29.332c.98.522 1.298 2.57.8 6.257-4.195 31.095-36.408 88.557-60.523 111.66-3.928 3.525-14.355 12.992-10.215 18.99 2.018 2.924 6.244 1.69 8.17-.672 32.852-43.364 74.844-119.99 69.053-147.25-.283-1.338-3.03-7.42-8.084-1.795-6.062 6.75.362 12.575.8 12.81z"/>
        <path id="x3-shape" d="M343.582 231.3c5.338-12.433 20.797-24.77 28.55-8.722s-1.845 38.654-15.67 36.742c-13.823-1.914-17.433-17.42-12.88-28.02z"/>
      </defs>
      <clipPath id="h1-clip">
        <use xlink:href="#h1-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="h2-clip">
        <use xlink:href="#h2-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="h3-clip">
        <use xlink:href="#h3-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="i1-clip">
        <use xlink:href="#i1-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="i2-clip">
        <use xlink:href="#i2-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="x1-clip">
        <use xlink:href="#x1-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="x2-clip">
        <use xlink:href="#x2-shape" overflow="visible"/>
      </clipPath>
      <clipPath id="x3-clip">
        <use xlink:href="#x3-shape" overflow="visible"/>
      </clipPath>
      <path id="h-stroke-1" clip-path="url(#h1-clip)" class="stroke" d="M41.812 278.21C53.102 228.9 87.475 89.605 118.98 30.046c17.73-33.518 35.767-11.984 35.383 13.342"/>
      <path id="h-stroke-2" clip-path="url(#h2-clip)" class="stroke--thin" d="M138.312 10.71c29.333 3.335 2.448 93-39.938 124.743C61.978 162.71-24.356 159.045 24.31 64.71"/>
      <path id="h-bleed-1" class="bleed" d="M106.128 121.018c-1.877 5.943 1.122 2.383 1.122 2.383l-3.67 4.144 2.548-6.526z"/>
      <path id="h-bleed-2" class="bleed" d="M103.305 135.453s-1.326.338-2.61 4.22l.004-2.712 2.605-1.507z"/>
      <path id="h-bleed-3" class="bleed" d="M55.174 144.48s3.888.508 5.145-3.28l-.8 3.97-4.346-.69z"/>
      <path id="h-bleed-4" class="bleed" d="M53.1 155.682s2.96-.525 2.328 1.568l1.133-2.58-3.46 1.012z"/>
      <path id="h-stroke-3" clip-path="url(#h3-clip)" class="stroke" d="
      M73,193c0,0,20.383-44.539,40.351-67.169C133.319,103.2,147.208,97.582,163.5,107c23.409,13.532,2.324,65.971,0.478,71.711
      c-13.354,41.532-11.978,76.327,13.672,76.327c28.698,0,41.669-16.749,48.993-33.978"/>
      <path id="h-bleed-5" class="bleed" d="M97.61 150.404s-1.042 3.105.764 1.37l-2.223 2.685 1.46-4.056z"/>
      <path id="i-stroke-1" clip-path="url(#i1-clip)" class="stroke" d="M266.645 109.386s-56.992 142.325-4.66 145.15c48.03 2.595 55.994-57.49 55.994-57.49"/>
      <path id="i-bleed-1" class="bleed" d="M219.64 228.898l5.608-4.875-3.53-5.498c.105 7.686-2.077 10.373-2.077 10.373z"/>
      <path id="i-bleed-2" class="bleed" d="M221.823 234.092l2.3-5.193v5.192s-.34-3.154-2.3 0z"/>
      <path id="i-stroke-2" clip-path="url(#i2-clip)" class="stroke" d="M269.742 99.378s10.236-47 35.236-59.667"/>
      <path id="x-stroke-1" clip-path="url(#x1-clip)" class="stroke" d="M359.467 199.38c2.592-31.778 12.95-111.002 39.36-156.67C423.48.08 438.31 12.38 432.643 43.38"/>
      <path id="x-stroke-2" clip-path="url(#x2-clip)" class="stroke--thin" d="M422.31 14.178c38-.8-25.65 125.494-73.33 162.533"/>
      <path id="x-bleed-1" class="bleed" d="M377.82 152.857l-1.66 1.432.05 2.31s.542-2.207 1.61-3.743z"/>
      <path id="x-bleed-2" class="bleed" d="M381.656 133.845l-.87 2.63 1.39-2.064s-.944.98-.52-.565z"/>
      <path id="x-stroke-3" clip-path="url(#x3-clip)" class="stroke" d="M382.176 212.71c-6.53-2.665-52.53 24.478-9.197 59.335"/>
    </g>
    <g id="erase">
      <path id="e-stroke" class="stroke--eraser" d="
  M41.561,5.901C83.374,35.171-16.165,140.336,17.5,174C50.903,209.251,109.982-24.907,156.772,5.901
  C193.028,29.774,9.713,237.518,53.856,261.759S198.502-4.589,238.961,7.41c48.415,14.359-126.37,231.579-81.753,256.349
  S294.786-11.417,338.5,7.41c43.714,18.827-138.181,227.095-81.833,253.09C324.948,292,367.176,3.5,415.5,25.901
  c36.36,16.855-79.5,202.998-45.538,236.494"/>
    </g>
  </svg>
</div>
/*                                    */
/*  Styles for Calligraphy Animation  */
/*                                    */

// Variables
$background-color: #F3F3F3
$stroke-color: #222833
$stroke-length: 120%
$stroke-duration: 1s
$animation-delay: 0.5s
$compression: 1

// Mixins
@mixin stroke($delay)
  animation: stroke ($stroke-duration * $compression) ease ($animation-delay + ($delay * $compression)) forwards
@mixin bleed($delay)
  animation: bleed 1ms ease ($animation-delay + ($delay * $compression)) forwards

// Keyframes
@keyframes stroke
  from
    stroke-dashoffset: $stroke-length
  to
    stroke-dashoffset: 0
@keyframes bleed
  from
    opacity: 0
  to
    opacity: 1

// Styles
#container
  position: relative
  display: flex
  width: 100vw
  height: 100vh
  align-items: center
  justify-content: center
  background: $background-color
#calligraphy
  width: 100vmin
  height: auto
  padding: 0 10vw
.stroke
  fill: none
  stroke: $stroke-color
  stroke-width: 45
  stroke-linecap: round
  stroke-linejoin: round
  stroke-miterlimit: 10
  stroke-dasharray: $stroke-length
  stroke-dashoffset: $stroke-length
  &--thin
    @extend .stroke
    stroke-width: 20
.bleed
  fill: $stroke-color
  opacity: 0

// Animations
.animate
  #h-stroke-1
    @include stroke(0)
  #h-stroke-2
    @include stroke(0.36)
  #h-bleed-1, #h-bleed-2
    @include bleed(0.57)
  #h-bleed-3, #h-bleed-4
    @include bleed(0.61)
  #h-stroke-3
    @include stroke(1)
  #h-bleed-5
    @include bleed(1.04)
  #i-stroke-1
    @include stroke(1.7)
  #i-bleed-1
    @include bleed(1.88)
  #i-bleed-2
    @include bleed(1.9)
  #i-stroke-2
    @include stroke(2.1)
  #x-stroke-1
    @include stroke(2.5)
  #x-stroke-2
    @include stroke(2.76)
  #x-bleed-1
    @include bleed(2.98)
  #x-bleed-2
    @include bleed(3)
  #x-stroke-3
    @include stroke(3.2)
      
      
      
/*                                                  */
/*  Extra Styles for Redo Button & Animation Reset  */
/*                                                  */

// Variables
$redo: #3EC3A3
$eraser-length: 1000%
$eraser-duration: $stroke-duration * 5

// Mixins
@mixin eraser($delay)
  animation: eraser ($eraser-duration * $compression) ease 0s 1
@mixin btn($delay)
  animation: btn 400ms ease ($animation-delay + ($delay * $compression)) forwards
@mixin clickable($bool)
  @if $bool == 1
    opacity: 1
    cursor: pointer
    pointer-events: auto
  @else
    opacity: 0
    cursor: auto
    pointer-events: none

// Keyframes
@keyframes redo
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)
@keyframes btn
  from
    @include clickable(0)
  to
    @include clickable(1)
@keyframes fadeout
  from
    opacity: 1
  to
    opacity: 0
@keyframes eraser
  from
    stroke-dashoffset: $eraser-length
  99%
    opacity: 1
  to
    stroke-dashoffset: 0
    opacity: 0

// Styles
.stroke--eraser
  @extend .stroke
  stroke: $background-color
  stroke-width: 50
  stroke-dasharray: $eraser-length
  stroke-dashoffset: $eraser-length
#redo
  position: absolute
  top: 20px
  left: 20px
  height: 40px
  width: 40px
  // transition: opacity 400ms ease, transform 400ms ease
  svg
    width: 100%
    height: auto
    &:hover, &:focus
      animation: redo 800ms ease infinite
  path
    fill: $redo
  &.animate
    @include btn(4)
    @include clickable(0)
  &.hidden
    @include clickable(0)
    animation: fadeout 400ms ease forwards
.animate #e-stroke
  @include eraser(0)



// Styles to make the lettering
// look better in IE & Edge
@mixin ieStyles
  .stroke, .bleed
    stroke-dasharray: 0
    stroke-dashoffset: 0
    opacity: 1
    animation: none
  #redo, .stroke--eraser
    opacity: 0
@media screen\0
  @include ieStyles
@supports (-ms-ime-align:auto)
  @include ieStyles
View Compiled 
// Reset the Animation on Button Click:
const r = $('#redo'),
      e = $('#erase'),
      h = $('#hi'),
      he = $('#hi, #erase')
r.on('click', function(event) {
  event.preventDefault();
  r.toggleClass('animate hidden');
  setTimeout(function() {
    e.addClass('animate');
    setTimeout(function() {
      he.removeClass('animate');
      setTimeout(function() {
        h.addClass('animate');
        r.toggleClass('animate hidden');
      }, 100)
    }, 2400)
  }, 300)
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js