I have a svg grey circle and a red path that follows the circle/overlays.
Does anyone know how to shrink the red circle so that it 100% covers the grey circle?
I cannot for the life of me work out how to shrink the red circle radius…. I know with the circle I can change r="30" to make it bigger or smaller, but for the path, I am stuck.
https://jsfiddle.net/Lwko5emv/
Thank you
.base-timer {
position: relative;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 14%;
stroke: grey;
}
.base-timer__path-remaining {
stroke-width: 14%;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="30"></circle>
<path
id="base-timer-path-remaining"
stroke-dasharray={circleDasharray}
style="color: red;"
class="base-timer__path-remaining"
d=" M 50, 50
m -45, 0
a 45,45 0 1,0 90,0
a 45,45 0 1,0 -90,0"
>
</path>
</g>
</svg>
</div>Tried to play around with the d= variables but could not shrink the circle.
New contributor
Kane Li is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
By default <circle> elements start at “3’o clock” (or 0 degree) and are drawn in a clockwise direction.
The correct path data reproducing the <circle> element – using relative commands with the same starting point would be:
M 80 50
a 30 30 0 0 1 -60 0
a 30 30 0 0 1 60 0
circle{
stroke:red;
stroke-width:2px;
}
path{
stroke:green;
}
circle,
path {
marker-start: url(#markerStart);
}<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30"></circle>
<!--
M: cx+r = 80 | cy
a: rx=r = 30 | ry=r = 30 | x-axis-rotation=0 | large-arc-flag=0/1 | sweep-flag = 1 (clockwise) | x=-r*2 | y=0
a: rx=r = 30 | ry=r = 30 | x-axis-rotation=0 | large-arc-flag=0/1 | sweep-flag = 1 (clockwise) | x=r*2 | y=0
-->
<path
d="M 80 50
a 30 30 0 0 1 -60 0
a 30 30 0 0 1 60 0"
>
</path>
</svg>
<!-- markers to show commands -->
<svg id="svgMarkers" style="width:0; height:0; position:absolute; z-index:-1;float:left;">
<defs>
<marker id="markerStart" overflow="visible" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<circle cx="5" cy="5" r="5" fill="green"></circle>
</marker>
</defs>
</svg>See SVG spec “9.3.8. The elliptical arc curve commands”
M: cx+r = 80 | cy
a: rx=r = 30 | ry=r = 30 | x-axis-rotation=0 | large-arc-flag=0/1 | sweep-flag = 1 (clockwise) | x=-r*2 | y=0
a: rx=r = 30 | ry=r = 30 | x-axis-rotation=0 | large-arc-flag=0/1 | sweep-flag = 1 (clockwise) | x=r*2 | y=0
We’re basically drawing half circles with each a command.
- from the right-center to the left-center coordinates of the circle
- and a closing semi-circle returning to the starting point.
.base-timer {
position: relative;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 14%;
stroke: grey;
}
.base-timer__path-remaining {
stroke-width: 14%;
stroke-linecap: round;
stroke: currentColor;
}<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="30"></circle>
<path
id="base-timer-path-remaining"
stroke-dasharray={circleDasharray}
style="color: red;"
class="base-timer__path-remaining"
d="M 80 50
a 30 30 0 0 1 -60 0
a 30 30 0 0 1 60 0"
>
</path>
</g>
</svg>
</div>Since we’re using relative commands you could easily apply shifts/offsets by adjusting the M command – e.g if you’re moving the <circle> element to another position.
In case of perfect circles you can even further simplify the syntax by omitting the exact rx/ry values
M 80 50
a 1 1 0 0 1 -60 0
a 1 1 0 0 1 60 0
The renderer will auto-adjust the too small radii according to the final on-path coordinates (6. and 7. value)
circle{
stroke:red;
stroke-width:2px;
}
path{
stroke:green;
} <svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="120" cy="90" r="20"></circle>
<path
d="M 140 90
a 1 1 0 0 1 -40 0
a 1 1 0 0 1 40 0"
>
</path>
</svg>1