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?

<div style="text-align:center">
  <svg style="margin-top: 100px" width="300" height="300">
    <linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#01E400"></stop>
       <stop offset="100%" stop-color="#FEFF01"></stop>
    </linearGradient>
    <linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
       <stop offset="0%" stop-color="#FEFF01"></stop>
       <stop offset="100%" stop-color="#FF7E00"></stop>
    </linearGradient>
    <linearGradient id="linearColors3" x1="1" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#FF7E00"></stop>
       <stop offset="100%" stop-color="#FB0300"></stop>
    </linearGradient>
    <linearGradient id="linearColors4" x1="1" y1="1" x2="0" y2="0">
       <stop offset="0%" stop-color="#FB0300"></stop>
       <stop offset="100%" stop-color="#9B004A"></stop>
    </linearGradient>
    <linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
       <stop offset="0%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
    <linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
       <stop offset="0%" stop-color="#7D0022"></stop>
       <stop offset="100%" stop-color="#01E400"></stop>
    </linearGradient>
   <path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearColors1)" stroke-width="20" />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke-width="20" />
  <path d="M253.9230 190 a120 120 0 0 1 -103.9230 60"
        fill="none" stroke="url(#linearColors3)" stroke-width="20" />
  <path d="M150 250 a120 120 0 0 1 -103.9230 -60"
        fill="none" stroke="url(#linearColors4)" stroke-width="20" />
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke-width="20" />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke-width="20" />
</svg>
</div>

Hi Stan, remove the `width` and `height` from the `
` can determine the size of the SVG. Make the parent `div` any size and the SVG sizes with it....(` — Rene van der Lende, May 31 '20 at 00:42
With the bigger raidus thanks, it`s works! With more parts not working. — Stan Marsh, May 31 '20 at 01:22
Yeah, I guessed that (tested, actually). Involves some trigonometry => 360/6 = 60, 360/12 = 30 (polar to cartesian stuff). I'm really bad at math and can't focus at 3:30am...after a few glasses of ...milk ;-). There are a few solutions for 'SVG colorwheel' using that math (using it myself, just can't find it). Will get back at it later today (unless someone else came up with a solution). Here's link a with more on that: [A simple pie chart in SVG](https://medium.com/hackernoon/a-simple-pie-chart-in-svg-dbdd653b6936) Sorry for now! — Rene van der Lende, May 31 '20 at 01:41

score 1 · Answer 1 · answered May 31 '20 at 08:35

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;
}

<div class="box"></div>

<div class="box" style="width:150px;"></div>

<div class="box" style="width:100px;"></div>

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

enxaneta · Accepted Answer · 2020-05-31T08:50:43.433

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<n; i++){
  let use = document.createElementNS(SVG_NS, 'use');
  use.setAttributeNS(SVG_XLINK, 'xlink:href', '#thepath');
  use.setAttribute("stroke",`url(#linearColors${i})`)
  use.setAttribute("transform",`rotate(${a*i})`);
  svg.appendChild(use);
}

use{stroke-width:20px;}

<svg id="svg" style="margin-top: 100px" viewBox="-150 -150 300 300" width="300">
<defs id="theDefs">
<linearGradient id="linearColors0" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors1" x1="0.5" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors2" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E00"></stop>
<stop offset="100%" stop-color="#FB0300"></stop>
</linearGradient>
<linearGradient id="linearColors3" x1="1" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors4" x1="0.5" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors5" x1="0" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
<linearGradient id="linearColors6" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#01E400"></stop>
<stop offset="100%" stop-color="#FEFF01"></stop>
</linearGradient>
<linearGradient id="linearColors7" x1="0.5" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FEFF01"></stop>
<stop offset="100%" stop-color="#FF7E00"></stop>
</linearGradient>
<linearGradient id="linearColors8" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF7E00"></stop>
<stop offset="100%" stop-color="#FB0300"></stop>
</linearGradient>
<linearGradient id="linearColors9" x1="1" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#FB0300"></stop>
<stop offset="100%" stop-color="#9B004A"></stop>
</linearGradient>
<linearGradient id="linearColors10" x1="0.5" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<linearGradient id="linearColors11" x1="0" y1="1" x2="0" y2="1">
<stop offset="0%" stop-color="#7D0022"></stop>
<stop offset="100%" stop-color="#01E400"></stop>
</linearGradient>
</defs>
</svg>

Make bigger svg circle

2 Answers2