<div id="app">
<svg width="200" height="200" viewBox="0 0 200 200">
  <line x1="10" y1="10" x2="180" y2="10" fill="none" stroke-width="12" stroke="#666" stroke-linecap="round" />
  <line x1="10" y1="10" x2="180" y2="10" fill="none" stroke-width="12" stroke="#FC4D04" stroke-dasharray="170" :stroke-dashoffset="dashOffsetLine" stroke-linecap="round" id="lineInner" />
  <circle cx="10" cy="10" r="3" fill="none" stroke="green" stroke-width="6" id="circle" style="transform: translateX(80px);" id="circle"/>
  
  
  <circle cx="100" cy="120" r="74" fill="none" stroke="#666" stroke-width="12" />
  <circle cx="100" cy="120" r="74" fill="none" stroke="#FC4D04" stroke-width="12" stroke-dasharray="465" :stroke-dashoffset="dashOffsetCircle" stroke-linecap="round" />
  <circle cx="100" cy="120" r="74" fill="none" stroke="green" stroke-width="12" stroke-dashoffset="464.5" stroke-dasharray="465" stroke-linecap="round" id="circleInner" style="transform:rotate(.8783783783783784rad); transform-origin: 100px 120px;"/>
  
  
</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="170" step="1" @input="moveLine">
  </div>
  <div class="circle">
    <label>circle:stroke-dashoffset = "{{dashOffsetCircle}}"</label> 
    <input type="range" name="points" min="0" value="{{dashOffsetCircle}}" v-model="dashOffsetCircle" max="465" step="1" @input="moveCircle">
  </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: 400,
      dashOffsetLine: 90,
    }
  },
  methods: {
    moveLine: function (e){
      let circleLine = document.getElementById('circle')
      let lineInnerLen = document.getElementById('lineInner').getTotalLength()
      circleLine.style.transform="translateX(" + (lineInnerLen - e.target.value) + "px)"
    },
    moveCircle: function(e) {
      let circleInner = document.getElementById('circleInner')
      let circleInnerLen = Math.ceil(document.getElementById('circleInner').getTotalLength())
      let arcLen = circleInnerLen - this.dashOffsetCircle
      let rad = arcLen / 74
      circleInner.style.transform="rotate(" + rad + "rad)"
    }
  }
 })