Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <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>
              
            
!

CSS

              
                /*                                    */
/*  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
              
            
!

JS

              
                // 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)
});
              
            
!
999px

Console