Make bigger svg circle

Question

I have an example of svg circle. But I dont know how to make bigger it in radius. I need this example cuz there are border-gradient with transperent inside. And I need not six parts, I need 12 parts. Please can somebody help me with it?

user_8620333 · Answer

You can achieve the same using only CSS but the support isn't very good since I will rely on conic-gradient:

.box {
  display:inline-block;
  width:200px;
  border-radius:50%;
  background:conic-gradient(red,blue,orange,yellow,green,red);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 21px),#fff calc(100% - 20px)); 
          mask:radial-gradient(farthest-side,transparent calc(100% - 21px),#fff calc(100% - 20px)); 
}
.box::before {
  content:"";
  display:inline-block;
  padding-top:100%;
}

body {
  background:#f2f2f3;
}

Related for more examples: CSS Only Pie Chart - How to add spacing/padding between slices?

user_7897395 · Answer

This is how I would do it using svg: I am creating a arc representing the 12th part of a circle. Next I'm using the arc 12 times every time using a different gradient for the stroke.

In order to make a bigger circle you can either change the width of the svg element or in javascript change the r.

Of coarse you'll have to write the gradients you want for the arcs 7 to 11

const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let r = 120;
let n = 12;
let a = 360/n;
let arad = 2*Math.PI/n
let points = []
let p1={
    x:r*Math.cos(0),
    y:r*Math.sin(0)
}
let p2={
    x:r*Math.cos(arad),
    y:r*Math.sin(arad)
}

  let path = document.createElementNS(SVG_NS, 'path');
  let d = `M${p1.x},${p1.y}A${r},${r} 0 0 1 ${p2.x},${p2.y}`;
  path.setAttributeNS(null,"d",d);
  path.setAttribute("id","thepath");
  theDefs.appendChild(path);

for(let i=0; i


use{stroke-width:20px;}

Make bigger svg circle

2 Answers