.blackboard
  .frame.topframe
  .frame.botframe
  .frame.leftframe
  .frame.rightframe
  
svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 300 91.8')
  path.st0(d='M41.2 50.6c6.7 5.8 21.4 10.7 26.3.1 4.3-9.2-6.6-18-14.7-12.1-8.9 6.5-8.2 24-1.6 31.7 5.7 6.7 21.1 7.3 26.5-.2.5-.7-.6-1.3-1.1-.6-4.8 6.7-19.3 5.7-24.3.1-5.1-5.7-5.8-16-3.5-23 1.5-4.6 4.9-8.5 10-8.5 5.7 0 9.8 5.5 8 11.1-3.5 11.1-18.6 6-24.8.6-.5-.6-1.4.3-.8.8zM76.4 46.3c3.2 8.8 5.8 17.8 7.8 26.9.2.7 1.3.5 1.2-.2-.3-4.9-.6-9.8-.8-14.8-.3-5.4-1.8-12.4 5.3-14.2 4.3-1 8.7-.4 11.3 3.7 1.2 1.9 1.8 4.4 2.5 6.5 1.8 4.9 3.4 9.9 5 14.9.2.8 1.4.4 1.2-.3-2.2-7-3.9-15.3-7.6-21.7C99.9 43 95.6 42 91 42.6c-4.3.6-7.4 2.8-7.9 7.2-.8 7.4.8 15.8 1.2 23.2.4-.1.8-.1 1.2-.2-2.1-9.1-4.7-18.1-7.8-26.9-.3-.7-1.5-.4-1.3.4zM130.7 44c-6.8-3.3-15.1-.4-16.8 7.4-1.9 8.3 5.5 14.2 12.9 15.7 2.4.5 7.3 1.7 9.4-.1 2.8-2.4 1.1-8.4.5-11.5-2.9-14.1-4.6-27.9-3.7-42.4 0-.8-1.2-.8-1.3 0-.8 14.2.6 27.9 3.5 41.8.9 4.3 2.2 11.9-4.3 11.5-3.7-.3-7.6-1-10.7-3.2-10.9-7.4-2.4-24.1 9.8-18.1.8.3 1.4-.7.7-1.1zM143.7 39.4c3.1 10.2 6.9 20.4 15.6 27.3.6.5 1.5-.4.9-.9C151.7 59 148 49.1 144.9 39c-.2-.7-1.4-.4-1.2.4zM144.2 18.1c-.5 1.4-.5 2.9 0 4.3.3.8 1.5.4 1.2-.3-.4-1.2-.4-2.4 0-3.6.3-.8-1-1.1-1.2-.4zM161.8 17.2c3.9 16.2 8.1 32.2 12.6 48.2.2.8 1.4.4 1.2-.3-4.5-16-8.7-32.1-12.6-48.2-.2-.8-1.4-.4-1.2.3z')
  path.st0(d='M170.3 44.7C177.8 35 185 25 191.6 14.6c.4-.7-.6-1.3-1.1-.6-6.6 10.3-13.7 20.2-21.2 29.8-.4.6.5 1.5 1 .9z')
  path.st0(d='M171.2 41.6c5.9-3.4 25.6-14.6 29.1-3.2 1.2 4 .5 9.3.2 13.4-.4 5.5-1.4 10.9-2.7 16.3-.2.8 1 1.1 1.2.3 1.6-6.7 2.7-13.5 2.9-20.3.2-4.3 1-10.6-2.5-13.9-3-2.8-7.4-2.1-11-1.2-6.3 1.6-12.3 4.4-17.9 7.6-.6.3 0 1.4.7 1zM229.3 41.2c-.6-6.8-7.5-9.8-13.7-9.5-7.9.5-8.3 8.5-7.4 14.8.6 4.4 3.6 16 10 14.8 6.9-1.3 9.1-14.3 10.9-19.4h-1.2c2.4 6.5 4.1 14.1 8.6 19.6.5.6 1.4-.3.9-.9-4.3-5.3-6-12.7-8.3-19.1-.2-.6-1-.6-1.2 0-1.6 4.4-2.8 9.1-4.9 13.2-1.8 3.6-4.6 7.5-9.2 3.1-1.5-1.4-2.5-4.4-3.1-6.2-1.4-4.1-2.6-10-1.1-14.3 3.2-8.7 17.7-4 18.4 3.8.1.9 1.3.9 1.3.1z')

View Compiled
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

*{
  font-family: 'Indie Flower', cursive;
}

*:focus{
  outline: none;
}

html, body{
  height: 100%;
  width: 100%;
  margin: 0px;
}

body{
  background: linear-gradient(45deg, rgba(74,20,140,1) 0%,rgba(244,67,54,1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blackboard{
  position: relative;
  width: 800px;
  height: 500px;
  background: url('http://www.thebridgelive.org/wp-content/uploads/2014/12/Chalkboard.jpg');
  background-size: cover;
  border-radius: 2px;
}

.frame{
  z-index: 600;
  position: absolute;
  height: 12px;
  width: 100%;
  background: url('http://bgfons.com/uploads/wood/wood%20_texture3171.jpg');
}

.topframe{
  top: 0;
  border-top-right-radius: 2px;
  border-top-left-radius:2px;
}

.botframe{
  bottom:0;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:2px;
}

.leftframe{
  width: 12px;
  height: 100%;
  border-top-left-radius:2px;
  border-bottom-left-radius:2px;
}

.rightframe{
  width: 12px;
  height: 100%;
  right: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

svg{
  width: 500px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
}

.st0{
  fill: none;
  stroke-miterlimit: 10;
  stroke-dasharray: 830;
  stroke-dashoffset: -830;
  stroke: white;
  animation: anime 10s alternate infinite linear;
}

@keyframes anime{
  from{
    stroke-dashoffset: 830;
  }
    
  to{
    stroke-dashoffset: -830;
  }
}
var shape = document.querySelector('.st0');
var shapeLength = shape.getTotalLength();

console.log(shapeLength);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.