im using svg for circular progress bar , i want to make one end curve not the both end . how is this possible ?
how can i implement one end curve in svg?
[![enter image description here](https://i.stack.imgur.com/jQgnL.png)](https://i.stack.imgur.com/jQgnL.png)

```css
svg {
  height: 80vh;
  margin: 10vh auto;
  border: 1px solid red;
  display: block;
  transform: rotate(-90deg);
}

svg circle {
  stroke-width: 10;
  fill: transparent;
}

#outer {
  stroke: lightgrey;
}

#inner {
  stroke: blue;
  animation: value 2.5s linear forwards;
  stroke-linecap: round;
}

@keyframes value {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 90 100;
  }
}
```

```html
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle id="outer" cx="50" cy="50" r="40" />

  <circle id="inner" pathLength="100" cx="50" cy="50" r="40" />
</svg>
```