How to change stroke-width without changing inner radius of the circle

I need to change stroke-width dynamically and I need to keep inner radius of the circle unchangeable.

<g fill="none" :stroke-width="brightness * 60" ...

How can I achieve that effect ?

svg that I use is below. I want to create rainbow circle and the width of the circle has to be changed depending on the chosen brightness.

The width changes correctly but I would like to keep inner radius unchangeable.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-35 -35 270 270">
                <defs>
                    <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0%" stop-color="#ff0000" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#ffff00" :stop-opacity="saturation"/>
                    </linearGradient>
                    <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#ffff00" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#00ff00" :stop-opacity="saturation"/>
                    </linearGradient>
                    <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#00ff00" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#00ffff" :stop-opacity="saturation"/>
                    </linearGradient>
                    <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                        <stop offset="0%" stop-color="#00ffff" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#0000ff" :stop-opacity="saturation"/>
                    </linearGradient>
                    <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                        <stop offset="0%" stop-color="#0000ff" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#ff00ff" :stop-opacity="saturation"/>
                    </linearGradient>
                    <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                        <stop offset="0%" stop-color="#ff00ff" :stop-opacity="saturation"/>
                        <stop offset="100%" stop-color="#ff0000" :stop-opacity="saturation"/>
                    </linearGradient>
                </defs>

                <g fill="none" :stroke-width="brightness * 60" transform="translate(100,100)">
                    <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
                    <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
                    <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
                    <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
                    <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
                    <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
                </g>
                <circle cx="100" cy="100" r="65" :fill="hsla"/>

            </svg>