<div class="opt_1">
  <label>boxs </label>
  <input type="range" min="0" max="10" step="1" value="0" class="step" oninput="fun_1()">
</div>
<div class="opt_2">
  <label>clock</label>
  <input type="range" min="0" max="10" step="1" value="0" class="factor" oninput="fun_2()">
</div>
<div class="opt_3">
  <label>parm</label>
  <input type="range" min="0" max="10" step="1" value="0" class="coner" oninput="fun_3()">
</div>


 <div class="por"></div>


<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.69 605.5"><defs><style>.a{fill:#ff0;stroke:#000;stroke-miterlimit:10;}</style></defs><title>1</title>
   
   
<polygon class="point" fill="red" stroke="blue" stroke-width="10" 
points="10,10,250,10,350,100,250,200,10,200,-100,100" />


</svg>

//Функция чтения куки
function readCookie(name) {var name_cook = name+"=";var spl = document.cookie.split(";");for(var i=0; i<spl.length; i++) {var c = spl[i];while(c.charAt(0) == " ") {c = c.substring(1, c.length);}if(c.indexOf(name_cook)==0){return c.substring(name_cook.length, c.length);}}return null;}
// начальное значение шести угольник
var pos_start = [10,10,250,10,350,100,250,200,10,200,-100,100];
//Конечная точка

//boxs
var pos_step = [50,10,190,10,190,100,190,200,50,200,50,100];
//clock
var pos_factor = [40,5,200,5,120,100,200,205,40,205,120,100];
//parm
var pos_coner = [20,5,200,5,230,50,230,205,40,205,20,150];


//Общая функция
function funs(
arr_start,
arr_end,
name_svg,
name_opt
){
 // переключатель
var pointE1 = document.querySelector(".por"); 
// Получить свойста ползунка
var rangeEl = document.querySelector("."+name_opt);  //range
//Получить текущие значения
var pol = document.querySelector("."+name_svg); 
var pol_atr = pol.getAttribute("points");
//Превратить строку в масив 
var pos_now = pol_atr.split(',');






//Узнать уменьшается или уееличивается
var num_step =  Number(readCookie(name_opt)); 
  
  
  
 //Превратить масив в строку
var arr_tes = pos_start.join(',');
//Условие одинаковости
if(arr_tes == pol_atr){
  num_step = 0;
}   
  
 //Ползунок
var ran_start = num_step; // 2
var ran_end = rangeEl.max;  // 10  
var ran_now = rangeEl.value; // 3

  
  
  
  
  

  
  
  
  
//Условие
if (num_step < rangeEl.value){ 
  
  
  
  //Масив
arr_up = [];  
//ID масива
var star_id = 0 ;
//Перебор массива
pos_now.forEach(function(val){
    
//Кординаты
var start_x = arr_start[star_id]; // 1 = ran_start 
var now_x = Number(val);
var end_x = arr_end[star_id]; // 10 = ran_end 
//Деление
var run_stap_x = (end_x-start_x)/ran_end; //1  

var now_x = now_x+run_stap_x*(ran_now-ran_start);  
//Добавить в масив
//arr_up.push(now_x);
arr_up[star_id] = now_x;
   
//Обновить id
star_id++; 
});
//Превратить масив в строку
var arr_jo = arr_up.join(',');
  

//Обновить текущие значения
pol.setAttribute('points', arr_jo);
//Обновить куки 
pointE1.innerHTML="up";
document.cookie = encodeURIComponent(name_opt) + '=' + encodeURIComponent(rangeEl.value);
} else if (num_step > rangeEl.value) {
  
    //Масив
arr_up = [];  
//ID масива
var star_id = 0 ;
//Перебор массива
pos_now.forEach(function(val){
//Кординаты
var start_x = arr_start[star_id]; // 1 = ran_start 
var now_x = Number(val);
var end_x = arr_end[star_id]; // 10 = ran_end 
//Деление
var run_stap_x = (end_x-start_x)/ran_end; //1 
 
var now_x = now_x-run_stap_x*(ran_start-ran_now);  
//Добавить в масив
//arr_up.push(now_x);
arr_up[star_id] = now_x;
//Обновить id
star_id++; 
});
//Превратить масив в строку
var arr_jo = arr_up.join(',');
  
 
//Обновить текущие значения
pol.setAttribute('points', arr_jo);
//Обновить значение
pointE1.innerHTML="down";
document.cookie = encodeURIComponent(name_opt) + '=' + encodeURIComponent(rangeEl.value);
}
}


function fun_1(){
funs(
pos_start,
pos_step,
"point",
"step"
);  
}


function fun_2(){
funs(
pos_start,
pos_factor,
"point",
"factor"
);  
}

function fun_3(){
funs(
pos_start,
pos_coner,
"point",
"coner"
);  
}