title: How to get a variable?
body: <p>I want to insert a variable ttl into this conclusion: 'rotate ('".c1", 150, 100, "blue", 60, "30 628", -90);" instead of the number 628</p>
  
  <p>after I insert the variable into the generation, the code stops working </p>
  
  <p>I inserted it that way.</p>
  
  <pre><code>1) rotate(".c1", 150, 150, 100, "blue", 60, "30 ttl", -90);
  2) rotate(".c1", 150, 150, 100, "blue", 60, "30 `${ttl}`", -90);
  3) rotate(".c1", 150, 150, 100, "blue", 60,  `30  ${ttl}`, -90);
  </code></pre>
  
  <p>after that, the code didn't work </p>
  
  <p>on the way out after the code works should get a segment that I'll show how to svg</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       width="300" 
       height="300" 
       viewBox="0 0 300 300" &gt;
    &lt;circle 
            fill="none" 
            stroke="red" 
            stroke-width="30" 
            cx="150" 
            cy="150" 
            r="100"
            stroke-dasharray="30 628"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and that's the result I expect to get.</p>
  
  <p>how can you fix a situation that would put a variable in function?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let obj = document.querySelector("circle");
  let ttl = Math.round(obj.getTotalLength());
  
  function rotate(obj, cx, cy, r, stroke, w, da, rad) {
    let item = document.querySelector(obj);
  
    this.cx = item.setAttribute("cx", cx);
    this.cy = item.setAttribute("cy", cy);
    this.r = item.setAttribute("r", r);
    this.stroke = item.setAttribute("stroke", stroke);
    this.w = item.setAttribute("stroke-width", w);
    this.da = item.setAttribute("stroke-dasharray", da);
    this.rad = item.style.transform = `rotate(${rad}deg)`;
  }
  
  rotate(".c1", 150, 150, 100, "blue", 60, "30 628", -90);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    border: 1px solid red;
  }
  
  circle {
    tranform-box: fill-box;
    transform-origin: center;
    fill: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"&gt;
    &lt;circle class="c1" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>how to insert a variable inside the finished function, how to replace the 628 on the variable ttl?</p>