JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="demo">

	<input type="range" v-model="progress" min="20" max="80" />

	<svg width="400" height="400">
	
    <!-- LEFT SIDE -->
	  <circle :cx="rlo_x" :cy="rlo_y" :r="rlo_r" class="wheel"></circle>
    <circle :cx="rli_x" :cy="rli_y" :r="rli_r" class="wheel"></circle>
  
	  <circle :cx="gl_x" :cy="gl_y" :r="gl_r"></circle>
	
	  <polygon v-if="show_working" :points="t1" stroke="red" />
	  <polygon v-if="show_working" :points="t2" stroke="red" />
	  <!-- <polygon v-if="show_working" :points="t3" stroke="red" /> -->
	
	  <line :x1="lineCoords.x1" :y1="lineCoords.y1" :x2="lineCoords.x2" :y2="lineCoords.y2" class="tape" />
	    
      
	    <!-- RIGHT SIDE -->
	    
	  <circle :cx="rro_x" :cy="rro_y" :r="rro_r" class="wheel"></circle>
	  <circle :cx="rri_x" :cy="rri_y" :r="rri_r" class="wheel"></circle>
	    
	   
	  <circle :cx="gr_x" :cy="gr_y" :r="gr_r"></circle>
    
    
	  <polygon v-if="show_working" :points="t3" stroke="red" />
	  <polygon v-if="show_working" :points="t4" stroke="red" />
    
    
	  <line :x1="lineCoords2.x1" :y1="lineCoords2.y1" :x2="lineCoords2.x2" :y2="lineCoords2.y2" class="tape" />
	    
	</svg>

</div>

CSS

circle,
polygon,
line {
    fill: transparent;
    stroke: red;
}

circle.wheel {
	/* fill: black; */
	stroke: black;
}

line.tape {
	stroke: black;
}

JavaScript

// bootstrap the demo
new Vue({

  el: '#demo',
  
	data: {
    
    progress: 40,
    
    rlo_r: 80,
    rlo_x: 81,
    rlo_y: 81,
		
	
    rli_x: 81,
    rli_y: 81,

		// guide, left
    gl_r: 10,
    gl_x: 125,
    gl_y: 200,
   	
    // reel, right outer
    rro_x: 320,
    rro_y: 81,
    rro_r: 80,
       
    // reel, right inner
    rri_x: 320,
    rri_y: 81,
    
    // guide, right
    gr_r: 10,
    gr_x: 275,
    gr_y: 200,
   
    show_working: true
        
	},
  
 	computed: {
  
				rli_r() {
        	return this.progress;
        },
        
        rri_r() {
        	return 100 - this.progress;
        },
  		
        // triangle 1
        t1() {
        
        	let coords = [];
            
            coords.push(this.rli_x + ' ' + this.rli_y);
            coords.push(this.gl_x + ' ' + this.rli_x);
            coords.push(this.gl_x + ' ' + this.gl_y);
        
        	return coords.join(', ');
            
        },
        
                t3() {
        
        	let coords = [];
            
            coords.push(this.rri_x + ' ' + this.rri_y);
            coords.push(this.gr_x + ' ' + this.rri_y);
            coords.push(this.gr_x + ' ' + this.gr_y);
        
        	return coords.join(', ');
            
        },
        
        // triangle 1
        t2() {
        
        	let coords = [];
            
         // calculate the x and y diffs
          let x_diff = this.gl_x - this.rli_x;
          let y_diff = this.gl_y - this.rli_y;
      
      
          // determine the length between centers
          let centers_length = Math.sqrt(Math.pow(x_diff, 2) + Math.pow(y_diff, 2));
          let adj = this.rli_r - this.gl_r;
          
          let opp = Math.sqrt(Math.pow(centers_length, 2) - Math.pow(adj, 2));
      
      
          let t = this.toDegrees(Math.atan(opp / adj));
          
          // get the y angle
          let y = this.toDegrees(Math.atan(y_diff / x_diff));

          let x = 180 - t - y;
          
     ...