<div class="line debug" id="js-line">
  <span class="S"></span>
  <span class="T"></span>
  <span class="A"></span>
  <span class="R"></span>
  <span class="T"></span>
</div>

<button id="js-debug">Debug</button>

:root {
  // Primary stroke width, ex. in Cap H
  --width-1: 35px;
  // Priamry stroke height, ex. in Cap H
  --height-1: 150px;
  // Text color
  --color: white;
  --background: #4B384C;
}

// All letters
span {
  display: block;
  float: left;
}

.S {
  // Spacing
  margin-left: 80px;
  margin-right: 40px;
  margin-top: 25px; // Optically lower S
  
  width: calc(var(--width-1) * 1.1);
  height: 110px;
  display: block;
  transform: rotate(-45deg) skew(4deg);
  border-radius: 4em 0;
  background-color: var(--color);
  position: relative;
  
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  
  &::before {
    top: 0;
    right: 0;
    transform: translate(72px, 1px) skew(14deg) rotate(200deg);
    
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 35px solid var(--color);
    border-radius: 50%;
  }
  
  &::after {
    bottom: 0;
    left: 0;
    transform: translate(-72px, -8px) rotate(-150deg) skew(0deg);
    
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 25px solid var(--color);
    border-radius: 50%;
  }
}

.T {
  // Spacing
  --spacing-t: 40px;
  margin-left: var(--spacing-t);
  margin-right: var(--spacing-t);

  width: var(--width-1);
  height: 150px;
  height: 0;
  position: relative;

  border-bottom: 150px solid var(--color);
  border-left: calc(var(--width-1)/10) solid transparent;
  border-right: calc(var(--width-1)/10) solid transparent;
  
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  
  &::before {
    width: 0;
    height: 0;
    left: calc(-112% - 5px);
    border-top: 60px solid var(--color);
    border-right: 40px solid transparent;
  }

  &::after {
    width: 0;
    height: 0;
    left: calc(112% + -5px + 5px);
    border-top: 60px solid var(--color);
    border-left: 40px solid transparent;
  }
}

.A {
  // Spacing
  margin-left: -25px;
  margin-right: 65px;
  
  width: calc(var(--width-1) * 1.25);
  height: var(--height-1);
  background-color: var(--color);
  position: relative;
  transform: translate(80px) skew(25deg);

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  
  /* 
  &::after {
    border-radius: 50%;
    bottom: 0;
    left: -100px;
    transform: skew(-20deg);
    width: calc(var(--width-1) * 1.33);
    height: calc(var(--width-1) * 1.33);
    background-color: var(--color);
  }
  */

  &::after {
    width: 0;
    height: 0;
    bottom: 0;
    left: -80px;
    transform: skew(-32deg);
    border-left: calc(var(--width-1)/1.55) solid transparent;
    border-right: calc(var(--width-1)/1.55) solid transparent;
    border-bottom: calc(var(--height-1) / 2.15) solid var(--color);
  }
  
  // &::before {
  //   transform: translate(-47px, 89px) skew(-23deg);
  //   width: 60px;
  //   height: 3px;
  //   background-color: var(--color);
  // }

  &::before {
    width: 20px;
    height: 80px;
    top: -10px;
    left: -20px;
    background-color: var(--background);
    transform: rotate(10deg) skew(-20deg);
  }
}

.R {
  // Spacing
  margin-left: 65px;
  margin-right: 100px;

  width: var(--width-1);
  height: 150px;
  height: 0;
  position: relative;
  z-index: 2;
  
  border-bottom: 150px solid var(--color);
  border-left: calc(var(--width-1)/10) solid transparent;
  // border-right: calc(var(--width-1)/10) solid transparent;
  
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  
  &::before {
    left: -20px;
    width: calc(var(--width-1) * 3);
    height: calc(var(--width-1) * 3);
    border-radius: 50%;
    box-shadow: calc(var(--width-1) * 0.9) 0 0 0 var(--color), 40px 15px 0 0 var(--background);
    z-index: 1;
  }
  
  &::after {
    width: calc(var(--width-1) * 1.1);
    height: calc(var(--height-1) / 3.5);
    background-color: var(--color);
    transform: translate(calc(var(--width-1) * 1.9), calc(var(--height-1) - calc(var(--height-1) / 3.5))) skew(40deg);
  }
}

html,
body { background-color: var(--background); }

button {
  cursor: pointer;
  display: block;
  clear: left;
  margin: 0 auto;
  margin-top: 3em;
  background: transparent;
  color: #E2A9E5;
  border: 1px solid #E2A9E5;
  border-radius: 3px;
  padding: 1em 2em;
  transition: all 0.25s ease-in-out 0.2s;
}

.debug + button {
  background: #632C65;
  color: #E2A9E5;
  border-color: #632C65;
}

.line {
  // Remove the left sidebearing from the first letter
  & > span:first-child {
    margin-left: 0;
  }
  width: 610px;
  height: 200px;
  margin: 10% auto 0 auto;
}

/* Debug */

.line span {
  --duration: 0.125s;
  --easing: ease-in;

  &::before {
    outline: 2px dashed rgba(0, 0, 0, 0);
    transition: background-color var(--duration) var(--easing) 0.25s, outline-color var(--duration) var(--easing) 0.25s, box-shadow var(--duration) var(--easing) 0.25s;
  }
  &::after {
    outline: 1px dashed rgba(0, 0, 0, 0);
transition: background-color var(--duration) var(--easing) 0.125s, outline-color var(--duration) var(--easing) 0.125s, box-shadow var(--duration) var(--easing) 0.125s;
  }
  outline: 3px dashed rgba(0, 0, 0, 0);
transition: background-color var(--duration) var(--easing) 0s, outline-color var(--duration) var(--easing) 0s;
}

.debug.line span {
  --background: #E2A9E5;
  
  &::before {
    outline-color: #E2A9E5;
    background: #632C65;
  }

  &::after {
    outline-color: #E2A9E5;
    background: #632C65;
  }

  outline-color: #E2A9E5;
  // background: #632C65;
}

var button = document.getElementById('js-debug')
var container = document.getElementById('js-line')
var duration = 2000
var timeout

var toggleClass = function () {
  container.classList.toggle('debug')  
}

var prepTimeout = function () {
  timeout = window.setTimeout(function () {
    toggleClass()
    prepTimeout()
  }, duration)
}

window.setTimeout(function () {
  prepTimeout()  
}, duration)

button.onclick = (function (e) {
  window.clearTimeout(timeout)
  toggleClass()
})