Reference

addRing()

addArc()

The arc is a part of a circle. The arc is defined by the radius r, the start angle x0 and the end angle x1.

Here are all the properties of the arc:

• r - the radius of the arc as a line
• r0 - the inner radius of the arc
• r1 - the outer radius of the arc
• x0 - the start angle of the arc
• x1 - the end angle of the arc
• fill - the fill color of the arc
• stroke - the stroke color of the arc
• strokeWidth - the width of the stroke
• rounded - if true, the arc will be rounded

If you specify the r property (instead of r0 and r1), the arc will be a line.

let arc1 = new Badge();
arc1.addArc({
  r: 1,
  x0: -0.2,
  x1: 0.1,
  stroke: "#aaccdd",
  strokeWidth: 2,
});
display(arc1.show());

If you instead of r specify r0 and r1, the arc will be an arc area.

let arc1 = new Badge();
arc1.addArc({
  r0: 0.6,
  r1: 0.8,
  x0: -0.2,
  x1: 0.4,
  fill: "#aaccdd",
  rounded: true,
});
display(arc1.show());

A new example with other properties.

let arc2 = new Badge();
arc2.addArc({
  r0: 0.2,
  r1: 0.8,
  x0: -0.2,
  x1: 0.2,
  fill: "#ee99aa",
  stroke: "black",
});
display(arc2.show());

let arc3 = new Badge();
arc3.addArc({
  r0: 0.4,
  r1: 0.8,
  x0: 0.2,
  x1: 0.3,
  fill: "#ff9999",
  stroke: "black",
  strokeWidth: 4,
});
display(arc3.show());

The default direction of the arc is clock-wise. If the x1 is a negative number, the arc will be counter-clockwise.

let arc4 = new Badge();
arc4.addArc({
  r0: 0.4,
  r1: 0.8,
  x0: 0.2,
  x1: -0.7,
  fill: "#ff9999",
  stroke: "black",
  strokeWidth: 4,
});
display(arc4.show());

addRipple()

let r1 = new Badge();
r1.addRipple({
  stroke: "black",
  fill: "#abcbdb",
  no: 36,
  r0: 0.3,
  r1: 0.6,
  curve: "sun",
});
display(r1.show());

addText()

addTextArc()

addIcon()