How to Draw a Hollow Circle with Two Different Colors

How to draw a hollow circle with two different colors?

You can try using SKCropNode, this allows you to show only half of each circle. See below code for example of this.

class GameScene: SKScene {
override func didMoveToView(view: SKView) {

    anchorPoint = CGPointMake(0.5, 0.5)

    // Half Circle #1

    let myCrop1 = SKCropNode()

    let myMask1 = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(100, 100))
    myMask1.position.y = -50

    let circle1 = SKShapeNode(circleOfRadius: 50)
    circle1.lineWidth = 0
    circle1.fillColor = UIColor.blueColor()

    myCrop1.addChild(circle1)
    myCrop1.maskNode = myMask1
    addChild(myCrop1)

    // Half Circle #2

    let myCrop2 = SKCropNode()

    let myMask2 = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(100, 100))
    myMask2.position.y = 50

    let circle2 = SKShapeNode(circleOfRadius: 50)
    circle2.lineWidth = 0
    circle2.fillColor = UIColor.redColor()

    myCrop2.addChild(circle2)
    myCrop2.maskNode = myMask2
    addChild(myCrop2)

    }

}

I haven't really used SKCropNode that much before, so I'm not sure how good my code is, but below is the result I got on my iPhone.

EDIT: You should be able to add a 3rd SKCropNode to make the centre of the circle transparent if required.

EDIT: Below for transparent centre

class GameScene: SKScene {
override func didMoveToView(view: SKView) {

    anchorPoint = CGPointMake(0.5, 0.5)

    let transparentCenterMask = SKShapeNode(circleOfRadius: 50)
    transparentCenterMask.lineWidth = 20
    let transparentCenterCrop = SKCropNode()
    transparentCenterCrop.maskNode = transparentCenterMask

    // Half Circle #1

    let myCrop1 = SKCropNode()

    let myMask1 = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(100, 100))
    myMask1.position.y = -50

    let circle1 = SKShapeNode(circleOfRadius: 50)
    circle1.lineWidth = 0
    circle1.fillColor = UIColor.blueColor()

    myCrop1.addChild(circle1)
    myCrop1.maskNode = myMask1
    transparentCenterCrop.addChild(myCrop1)

    // Half Circle #2

    let myCrop2 = SKCropNode()

    let myMask2 = SKSpriteNode(color: UIColor.blackColor(), size: CGSizeMake(100, 100))
    myMask2.position.y = 50

    let circle2 = SKShapeNode(circleOfRadius: 50)
    circle2.lineWidth = 0
    circle2.fillColor = UIColor.redColor()

    myCrop2.addChild(circle2)
    myCrop2.maskNode = myMask2
    transparentCenterCrop.addChild(myCrop2)

    addChild(transparentCenterCrop)

    }

}

How can I draw a circle in SVG with 2 colors?

You can actually create a circle with two colours with only a single path. Simply set two different stop-color. Here, the first stop-color is #00f (blue), and the secnd stop-color is #f0f (purple):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">  <defs>    <linearGradient id="colour" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="1">        <stop offset="0%" stop-color="#00f"/>           <stop offset="100%" stop-color="#f0f"/>       </linearGradient>  </defs>
  <g fill="none" stroke-width="15" transform="translate(100,120)">    <path d="M 0 -100 a 50 50 0 1 0 0.00001 0" stroke="url(#colour)"/>  </g></svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" /></svg> 

.chart {  position: absolute;  width: 0;  height: 0;  border-radius: 60px;  -moz-border-radius: 60px;  -webkit-border-radius: 60px;}
#chart1 {  border-right: 60px solid red;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart2 {  border-right: 60px solid transparent;  border-top: 60px solid green;  border-left: 60px solid transparent;  border-bottom: 60px solid transparent;}
#chart3 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid blue;  border-bottom: 60px solid transparent;}
#chart4 {  border-right: 60px solid transparent;  border-top: 60px solid transparent;  border-left: 60px solid transparent;  border-bottom: 60px solid yellow;}

<div id="chart1" class="chart"></div><div id="chart2" class="chart"></div><div id="chart3" class="chart"></div><div id="chart4" class="chart"></div>