CODEWITHSUNDEEP
javascriptsvggeometryshapes
Kayote
Kayote

Reputation: 15627

Reducing the Path in SVG

I am at a stage where I am thinking of the logic underlying a pomodoro clock I want to create.

I'd like to use SVG so I can learn & practice for this exercise.

svg shape being reduced with time interval

What I have in mind is a SVG circle converted to path. As the time passes, the stroke reduces with each second. 

<path d="m3.9 134c0-71.9 58.2-130.1 130.1-130.1 71.9 0 130.1 58.2 130.1 130.1 0 71.9-58.2 130.1-130.1 130.1 -71.9 0-130.1-58.2-130.1-120.1" style="fill:#F00;stroke-width:5;stroke:#000"/>

https://jsfiddle.net/crggL2h9/

Ive been staring at the SVG code (which was converted from circle to path), however, I have no idea how to go about reducing it. Would appreciate ideas & suggestions.

Upvotes: 0

Views: 288

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

Here's an example that uses Robert Longson's dasharray suggestion and an arc-circle.

<!DOCTYPE HTML>
<html>
<head>
  <title>Tick Path</title>
</head>
<body onload=initArc()>
<center>
<svg width=400 height=400>
<circle cx=200 cy=200 r=180 fill=red stroke="none" />
<path id=clock fill="none" stroke="black" stroke-width=5 />
</svg>
<br>
<button onClick=tick()>tick</button> : <input type="text" style='width:30px;' id=tickValue value=60 />
</center>
<script>
//---onload---
function initArc()
{
    var r=180
    var cx=200
    var cy=200
    var d=
    [
    "M",cx,cy,
    "m",-r,0,
    "a",r,r,
    0,1,0,2*r, 0,
    "a",r,r,
    0,1,0,-2*r, 0
    ]

    clock.setAttribute("d",d.join(" "))

}

var tickCnt=59
function tick()
{
    tickValue.value=tickCnt--
    var length=clock.getTotalLength()
    var strokeDash=(length/60)*tickCnt
    clock.setAttribute("stroke-dasharray",strokeDash+" "+length)
}
</script>
</body>
</html>

Upvotes: 4

Related Questions