How to embed a codepen snippet on your Ghost blog?

Result

var c = new Sketch.create({autoclear: false}),
    bigCircle = 50,
    littleCircle = 5,
    // The velocity value determines how much to move the spinner head (in radians).
    velocity = 0.105,
    hue = 0,
    // The alpha value below determines the length of the spinner's tail.
    bg = 'rgba(40,40,40,.075)';
    Spinner = function() {};
Spinner.prototype.setup = function() {

this.x = c.width / 2;

this.y = c.height / 2 - bigCircle;

this.rotation = 0;

}

Spinner.prototype.update = function() {

this.rotation += velocity;

this.rotation = this.rotation % TWO_PI;

this.x = c.width /2 + cos(this.rotation) * bigCircle;

this.y = c.height / 2 + sin(this.rotation) * bigCircle;

}

Spinner.prototype.draw = function() {

c.fillStyle = 'hsl('+hue+',50%,50%)';

c.beginPath();

c.arc(this.x, this.y, littleCircle, 0, TWO_PI);

c.fill();

c.closePath();

}

c.setup = function() {

spinner = new Spinner();

spinner.setup();

}

c.update = function() {

spinner.update();

hue = ++hue % 360;

}

c.draw = function() {

spinner.draw();

c.fillStyle = bg;

c.fillRect(0,0,c.width,c.height);

}

Source

<div data-height="268" data-theme-id="0" data-slug-hash="bcqhe" data-default-tab="js" data-user="rglazebrook" class='codepen'><pre><code>var c = new Sketch.create({autoclear: false}),
    bigCircle = 50,
    littleCircle = 5,
    // The velocity value determines how much to move the spinner head (in radians).
    velocity = 0.105,
    hue = 0,
    // The alpha value below determines the length of the spinner&#39;s tail.
    bg = &#39;rgba(40,40,40,.075)&#39;;
    Spinner = function() {};

Spinner.prototype.setup = function() {
  this.x = c.width / 2;
  this.y = c.height / 2 - bigCircle;
  this.rotation = 0;
}
Spinner.prototype.update = function() {
  this.rotation += velocity;
  this.rotation = this.rotation % TWO_PI;
  this.x = c.width /2 + cos(this.rotation) * bigCircle;
  this.y = c.height / 2 + sin(this.rotation) * bigCircle;
}
Spinner.prototype.draw = function() {
  c.fillStyle = &#39;hsl(&#39;+hue+&#39;,50%,50%)&#39;;
  c.beginPath();
  c.arc(this.x, this.y, littleCircle, 0, TWO_PI);
  c.fill();
  c.closePath(); 
}
c.setup = function() {
  spinner = new Spinner();
  spinner.setup();
} 
c.update = function() {
  spinner.update();
  hue = ++hue % 360;
}
c.draw = function() {
  spinner.draw();
  c.fillStyle = bg;
  c.fillRect(0,0,c.width,c.height);
}
</code></pre>
<p>See the Pen <a href='http://codepen.io/rglazebrook/pen/bcqhe/'>Simple Rotating Spinner</a> by Rob Glazebrook (<a href='http://codepen.io/rglazebrook'>@rglazebrook</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
</div><script async src="//codepen.io/assets/embed/ei.js"></script>