PIXI Graphics – Advanced Shapes
let graphics: PIXI.Graphics = new PIXI.Graphics
graphics.lineStyle(1, 0xFFFFFF, 1);
graphics.arc(75, 75, 50, 0, Math.PI*2, false); // Outer circle
graphics.moveTo(110, 75);
graphics.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
graphics.moveTo(65, 65);
graphics.arc(60, 65, 5, 0, Math.PI*2, false); // Left eye
graphics.moveTo(95, 65);
graphics.arc(90, 65, 5, 0, Math.PI*2, false); // Right eye
let graphics: PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);
graphics.moveTo(75,25);
graphics.quadraticCurveTo(25,25,25,62.5);
graphics.quadraticCurveTo(25,100,50,100);
graphics.quadraticCurveTo(50,120,30,125);
graphics.quadraticCurveTo(
graphics.quadraticCurveTo(125,100,125,62.5);
graphics.quadraticCurveTo(125,25,75,25);
A little note for using quadratic curves, they function exactly the same except for accepting an additional parameters for the control point. You can read a very good tutorial on how quadratic curves work here.
let graphics:PIXI.Graphics = new PIXI.Graphics();
graphics.lineStyle(1, 0xFFFFFF, 1);
graphics.moveTo(75,40);
graphics.bezierCurveTo(75,37,70,25,50,25);
graphics.bezierCurveTo(20,25,20,62.5,20,62.5);
graphics.bezierCurveTo(20,80,40,102,75,120);
graphics.bezierCurveTo(110,102,130,80,130,62.5);
graphics.bezierCurveTo(130,62.5,130,25,100,25);
graphics.bezierCurveTo(85,25,75,37,75,40);
Bezier curves are very similar to quadratic curves. There is another very good tutorial on how bezier curves work here.