diff --git a/README.md b/README.md
index 9250168..5902579 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,26 @@
 
 A web component for drawing patterns with css.
 
+![circles](screenshot/circles.png)
+
+```html
+<css-doodle grid="5">
+  :doodle {
+    border-radius: 50%;
+    overflow: hidden;
+    background: #f1ffd9;
+  }
+
+  --size: @rand(200%);
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  background-color: hsla(
+    @rand(100), 80%, 50%, @rand(.8)
+  );
+</css-doodle>
+```
+
 ## Usage
 
 include css-doodle.js in your html:
diff --git a/screenshot/circles.png b/screenshot/circles.png
new file mode 100644
index 0000000..5efc727
Binary files /dev/null and b/screenshot/circles.png differ