<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
  background: #988185;
  background-image: linear-gradient(40deg, rgba(70, 57, 60, 0.05), rgba(128, 0, 21, 0.05)), linear-gradient(135deg, #796366 0%, #796366 10%, #8c7377 11%, #8c7377 40%, #a38f92 41%, #a38f92 50%, #796366 51%, #796366 60%, #8c7377 61%, #8c7377 90%, #a38f92 91%);
  background-size: 7px 7px, 4px 4px;
  font-family: montserrat;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-blend-mode: hard-light, multiply;
}

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  min-width: 300px;
}

input {
  margin-bottom: 2rem;
  width: 240px;
}
  </style>
 </head>
 <body translate="no">
  <div id="app">
   <div class="action">
    <div class="line">
     <label for="">
      line: stroke-dashoffset = "{{dashOffsetLine}}"
     </label>
     <input @input="moveLine" max="170" min="0" name="points" step="1" type="range" v-model="dashOffsetLine" value="{{dashOffsetLine}}"/>
    </div>
    <div class="circle">
     <label>
      circle:stroke-dashoffset = "{{dashOffsetCircle}}"
     </label>
     <input @input="moveCircle" max="465" min="0" name="points" step="1" type="range" v-model="dashOffsetCircle" value="{{dashOffsetCircle}}"/>
    </div>
   </div>
  </div>
 </body>
</html>
