<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:600);
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Source Code Pro";
  color: #c1c1c1;
}

.attr-wrap {
  margin-left: 1rem;
}

.length {
  margin-bottom: 1.5em;
}

.attr-type {
  margin-bottom: 1em;
}
.attr-type > div {
  margin-bottom: 0.5rem;
}

label {
  font-size: 0.8em;
  color: #a9a9a9;
  display: block;
  margin-bottom: 1rem;
}

span {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 5px;
  font-size: 0.8em;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <div class="attr-wrap">
    <div class="attr-type">
     <label>
      stroke-dasharray = "{{dashArrayLength}}  {{dashArraySpacing}}"
     </label>
     <div>
      <input class="dash1" max="1040" min="0" name="points" type="range" v-model="dashArrayLength" value="{{dashArrayLength}}"/>
      <span>
       length
      </span>
     </div>
     <div>
      <input class="dash2" max="1040" min="0" name="points" type="range" v-model="dashArraySpacing" value="{{dashArraySpacing}}"/>
      <span>
       spacing
      </span>
     </div>
    </div>
    <div class="attr-type">
     <label>
      stroke-dashoffset = "{{dashOffset}}";
     </label>
     <input max="1040" min="0" name="points" type="range" v-model="dashOffset" value="{{dashOffset}}"/>
    </div>
    <div class="attr-type">
     <label>
      stroke-width = "{{strokeWidth}}";
     </label>
     <input max="20" min="0" name="points" type="range" v-model="strokeWidth" value="{{strokeWidth}}"/>
    </div>
    <div class="attr-type">
     <label>
      stroke = "{{stroke}}";
     </label>
     <input type="color" v-model="stroke" value="{{stroke}}"/>
    </div>
    <div class="attr-type">
     <label>
      fill = "{{fillColor}}";
     </label>
     <input type="color" v-model="fillColor" value="{{fillColor}}"/>
    </div>
   </div>
  </div>
 </body>
</html>
