Creating a SVG circle with a perimetral gradient in JavaScript

( function( ) {
	const numberOfSteps = 12;
	const theta = 2 * Math.PI / numberOfSteps;
	const sequence = new Array( numberOfSteps );
	for ( let s = numberOfSteps - 1; s >= 0; s = s - 1 ) {
		const angle = theta * s;
		sequence[ s ] = Math.round( Math.sin( angle ) * 127.5 + 127 );
	}
	console.log( sequence.join( " " ) );
} )( );

/**
 * Generate a sequence of colours in which the chromatic progression is 
 * continuous even if looped.
 * It is achieved using three 120° out-of-phase sine waves to produce colours 
 * such that their hue travels around the circle of a colour wheel.
 * @see {@link https://krazydad.com/tutorials/makecolors.php|"Tutorial: Making annoying rainbows and other color cycles in Javascript" by Jim Bumgardner}
 * @param   {number}		numberOfColours 
 * @returns {string[]}
 */
function generateColourCycle( numberOfColours ) {
	const twoPi = 2 * Math.PI;
	const colours = new Array( numberOfColours ); 
	const theta = twoPi / numberOfColours ;
	const phase1 = 0;					   //   0°
	const phase2 = twoPi / 3;	   // 120°
	const phase3 = 2 * phase2;  // 240°
	for ( let c = numberOfColours - 1; c >= 0; c = c - 1 ) {
			const frequency = theta * c;
			const r = Math.round( Math.sin( frequency + phase1 ) * 127.5 + 127 );
			const g = Math.round( Math.sin( frequency + phase2 ) * 127.5 + 127 );
			const b = Math.round( Math.sin( frequency + phase3 ) * 127.5 + 127 );
			// Convert to integer, using the corresponding powers of 16, then to hex
			const hexColour = ( r * 65536 + g * 256 + b ).toString( 16 );
			// Add zero padding and number sign prefix
			colours[ c ] = "#" + ( "00000" + hexColour ).slice( -6 );
	}
	return colours;
}

<svg 
	xmlns="http://www.w3.org/2000/svg" 
	width="200" height="200" viewBox="-5 -5 110 110"
>
	<circle 
		cx="50" cy="50" r="50" fill="none" stroke-width="10" 
		stroke-dasharray="104.72 209.44" stroke="green" 
	/>
</svg>

/** 
 * Create a SVG circle with a colour gradient along its perimeter.
 * @param	   {string}			[id]									The unique identifier to assign.
 * @param	   {number}			[size=200]					  Width (and height) of the SVG.
 * @param	   {number}			[numberOfColours=360]   Number of colours to use. 
 *																						  @see generateColourCycle
 * @param	   {string}			[title]							 A descriptive title.
 * @param	   {bool}			  [stacked=false]			 How the arcs are built.
 * @returns {SVGElement}
 */
function createColourCircle( 
	id = "",
	size = 200, 
	numberOfColours = 360,
	title = "A circle with a colour gradient along its perimeter",
	stacked = false
) {

	if ( !id ) { 
		// Generate a random (unused) identifier
		do {
			id = ""
				+ "colour-circle-" 
				+ ( "00000" + Math.round( Math.random() * 1e6 ) ).slice( -6 )
			; 
		} while( document.querySelector( "#" + id ) );
	}

	// These could be function params
	const radius = 50;
	const strokeWidth = 10;
	
	const sVGNameSpace = "http://www.w3.org/2000/svg";
	// The viewBox must be adjusted, considering cx and cy will be equal to r
	const offset = -strokeWidth / 2; 
	const viewBoxSize = 2 * radius + strokeWidth;
	const viewBox = offset + " " + offset + " " + viewBoxSize + " " + viewBoxSize;

	// Create SVG and define basic attributes and elements
	const circle = document.createElementNS( sVGNameSpace, "svg" );
	circle.setAttribute( "id", id );
	// Geometry and layout
	circle.setAttribute( "width", size );
	circle.setAttribute( "height", size );
	circle.setAttribute( "viewBox", viewBox );
	// Accessibility
	circle.setAttribute( "role", "img" );
	if ( title ) {
		const titleId = id + "-title";
		const titleElement = document.createElement( "title" );
		titleElement.setAttribute( "id", titleId );
		titleElement.innerText = title;
		circle.appendChild( titleElement );
		circle.setAttribute( "aria-labelledby", titleId );
	}

	const twoPi = 2 * Math.PI;
	const perimeter = twoPi * radius;

	// Define the circles' common style
	const style = document.createElement( "style" );
	style.innerText = ""
		+ "#" + id + " circle{"
			+ "fill:none"
			+ ";stroke-width:" + strokeWidth
	;
	if ( !stacked ) {
		const dashScale = 1 + 0.05 * Math.floor( numberOfColours / 60 );
		const dashLength = ( perimeter / numberOfColours ).toFixed( 2 );
		const emptyLength = ( perimeter - dashLength ).toFixed( 2 );
		style.innerText += ""
			+   ";stroke-dasharray:" 
			+ ( dashLength * dashScale ) + " " + emptyLength
		;
	}
	style.innerText += "}";
	circle.appendChild( style );

	// Create the arcs
	const colours = generateColourCycle( numberOfColours );
	const thetaRadians = twoPi / numberOfColours;
	const thetaDegrees = 360 / numberOfColours;
	for ( let c = 0; c < numberOfColours; c = c + 1 ) {
		// Preserve visual order of colours
		const colourIndex = stacked ? ( numberOfColours - c - 1 ) : c;
		// Create coloured arc
		const arc = document.createElementNS( sVGNameSpace, "circle" );
		arc.setAttribute( "cx", radius );
		arc.setAttribute( "cy", radius );
		arc.setAttribute( "r", radius );
		arc.setAttribute( "stroke", colours[ colourIndex ] );
		// The first arc requires no transformation in any case
		if ( !c ) {
			circle.appendChild( arc );
			continue;
		}
		// Manipulate the arc according to the selected method
		if ( stacked ) {
			const dashLength = ( ( twoPi - thetaRadians * c ) * radius ).toFixed( 2 );
			const emptyLength = ( perimeter - dashLength ).toFixed( 2 );
			const strokeDashArray = dashLength + " " + emptyLength;
			arc.setAttribute( "stroke-dasharray", strokeDashArray );
		} else {
			const angle = thetaDegrees * c;
			const transform = "rotate(" + angle + "," + radius + "," + radius + ")";
			arc.setAttribute( "transform", transform );
		}
		circle.appendChild( arc );
	}

	return circle;

}

createColourCircle( "colour-circle", 600 );