From 9deaf271726b65a580135552a25b31465f56f5cb Mon Sep 17 00:00:00 2001
From: Preet <preet@sevogle.com>
Date: Fri, 13 Jan 2017 00:44:23 -0800
Subject: [PATCH] Update README.md

---
 docs/README.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index 7c2366a..0fb4cee 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,7 +30,10 @@ var rough = new RoughCanvas(document.getElementById('myCanvas'), 400, 200);
 rough.rectangle(10, 10, 200, 200); // x, y, width, height
 ```
 
-### Drawing lines and shapes
+### Drawing lines and ellipses
+
+![Rough,js ellipses](https://pshihn.github.io/rough/images/cap_ellipse.png)
+
 ``` javascript
 rough.circle(80, 120, 50); // centerX, centerY, radius
 rough.ellipse(300, 100, 150, 80); // centerX, centerY, radiusX, radiusY
@@ -39,6 +42,8 @@ rough.line(80, 120, 300, 100); // x1, y1, x2, y2
 
 ### Filling
 
+![Rough,js fill examples](https://pshihn.github.io/rough/images/cap_fill.png)
+
 ``` javascript
 rough.fill = "red";
 rough.circle(50, 50, 40);
@@ -59,6 +64,8 @@ r3.hachureGap = 8;
 
 ### Sketching style
 
+![Rough,js styles examples](https://pshihn.github.io/rough/images/cap_styles.png)
+
 ``` javascript
 var r1 = rough.rectangle(15,15,80,80);
 r1.roughness = 0.5;
@@ -74,6 +81,8 @@ r3.strokeWidth = 3;
 
 ### Arcs and Curves
 
+![Rough,js curve](https://pshihn.github.io/rough/images/cap_curve.png)
+
 ``` javascript
 // arc(centerX, centerY, radiusX, radiusY, startAngle, endAngle, closePath)
 var arc1 = rough.arc(200, 100, 200, 180, -Math.PI + (Math.PI / 3), -Math.PI / 2, true);
@@ -83,12 +92,16 @@ var openArc = rough.arc(200, 100, 150, 130, -0.2 * Math.PI, 0.6 * Math.PI, false
 openArc.strokeWidth = 10;
 ```
 
+![Rough,js curve](https://pshihn.github.io/rough/images/cap_curve.png)
+
 ``` javascript
 var curve = rough.curve([[10, 10], [150, 65], [180, 165], [300, 20], [400, 200]]);
 ```
 
 ### SVG Paths
 
+![Rough,js svg](https://pshihn.github.io/rough/images/cap_svg.png)
+
 ``` javascript
 var path = rough.path("M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z");
 path.fill = "#424242";
@@ -97,6 +110,8 @@ path.hachureAngle = 90;
 
 ### Dynamic shapes
 
+![Rough,js animating rectangle](https://pshihn.github.io/rough/images/rect_animation.gif)
+
 ``` javascript
 var rect = rough.rectangle(10,10,20,100);
 var increaseWidth = function() {