<div id="app">
<svg width="200" height="200" viewBox="0 0 200 200">
  <line x1="10" y1="10" x2="110" y2="10" fill="none" stroke-width="12" stroke="#666" stroke-linecap="round" />
  <line x1="10" y1="10" x2="110" y2="10" fill="none" stroke-width="12" stroke="#FC4D04" stroke-dasharray="100" :stroke-dashoffset="dashOffsetLine" stroke-linecap="round" />
  <circle cx="60" cy="80" r="54" fill="none" stroke="#666" stroke-width="12" />
  <circle cx="60" cy="80" r="54" fill="none" stroke="#FC4D04" stroke-width="12" stroke-dasharray="339" :stroke-dashoffset="dashOffsetCircle" stroke-linecap="round" />
</svg>
<div class="action">
  <div class="line">
    <label for="">line: stroke-dashoffset = "{{dashOffsetLine}}"</label>
    <input type="range" name="points" min="0" value="{{dashOffsetLine}}" v-model="dashOffsetLine" max="100" step="1">
  </div>
  <div class="circle">
    <label>circle:stroke-dashoffset = "{{dashOffsetCircle}}"</label> 
    <input type="range" name="points" min="0" value="{{dashOffsetCircle}}" v-model="dashOffsetCircle" max="339" step="1">
  </div>
</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

$colour:hsla(350,100%,25%,1);
$grey:desaturate($colour,90%);

body {
  background:lighten($grey,30%);
  background-image:
    linear-gradient(40deg,transparentize($grey,0.95),transparentize($colour,0.95)),

    linear-gradient(135deg,
        lighten($grey,18%) 0%,
        lighten($grey,18%) 10%,
        lighten($grey,25%) 11%,
        lighten($grey,25%) 40%,
        lighten($grey,35%) 41%,
        lighten($grey,35%) 50%,
        lighten($grey,18%) 51%,
        lighten($grey,18%) 60%,
        lighten($grey,25%) 61%,
        lighten($grey,25%) 90%,
        lighten($grey,35%) 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: .5rem;
  min-width: 300px;
}

input {
  margin-bottom: 2rem;
  width: 240px;
}

let app = new Vue({
  el: '#app',
  data () {
    return {
      dashOffsetCircle: 310,
      dashOffsetLine: 90,
    }
  }
 })