diff --git a/examples/style-rules.html b/examples/style-rules.html
new file mode 100644
index 0000000000..aebef4be82
--- /dev/null
+++ b/examples/style-rules.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style type="text/css">
+      html, body, #map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #text {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          z-index: 20000;
+          background-color: white;
+          padding: 0 0.5em 0.5em 0.5em;
+          border-radius: 4px;
+      }
+      @media only screen and (max-width: 600px) {
+        #text {
+          display: none;
+        }
+      }
+    </style>
+    <title>Vector Layer Example</title>
+  </head>
+  <body>
+    <div id="map">
+      <div id="text">
+        <h1 id="title">Style rules example</h1>
+        <div id="shortdesc">Draws features with rule based styles.</div>
+        <div id="docs">
+          <p>See the
+          <a href="style-rules.js" target="_blank">style-rules.js source</a>
+          to see how this is done.</p>
+        </div>
+      </div>
+    </div>
+    <div id="tags">vector, feature, canvas</div>
+    <script src="loader.js?id=style-rules" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/examples/style-rules.js b/examples/style-rules.js
new file mode 100644
index 0000000000..b2c0e1bd01
--- /dev/null
+++ b/examples/style-rules.js
@@ -0,0 +1,102 @@
+goog.require('ol.Collection');
+goog.require('ol.Coordinate');
+goog.require('ol.Expression');
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.filter.Filter');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Vector');
+goog.require('ol.projection');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Line');
+goog.require('ol.style.Rule');
+goog.require('ol.style.Style');
+
+
+var source = new ol.source.Vector({
+  projection: ol.projection.getFromCode('EPSG:3857')
+});
+
+source.addFeatures([
+  new ol.Feature({
+    g: new ol.geom.LineString([[-10000000, -10000000], [10000000, 10000000]]),
+    'color': '#BADA55',
+    'where': 'inner'
+  }),
+  new ol.Feature({
+    g: new ol.geom.LineString([[-10000000, 10000000], [10000000, -10000000]]),
+    'color': '#BADA55',
+    'where': 'inner'
+  }),
+  new ol.Feature({
+    g: new ol.geom.LineString([[-10000000, -10000000], [-10000000, 10000000]]),
+    'color': '#013',
+    'where': 'outer'
+  }),
+  new ol.Feature({
+    g: new ol.geom.LineString([[-10000000, 10000000], [10000000, 10000000]]),
+    'color': '#013',
+    'where': 'outer'
+  }),
+  new ol.Feature({
+    g: new ol.geom.LineString([[10000000, 10000000], [10000000, -10000000]]),
+    'color': '#013',
+    'where': 'outer'
+  }),
+  new ol.Feature({
+    g: new ol.geom.LineString([[10000000, -10000000], [-10000000, -10000000]]),
+    'color': '#013',
+    'where': 'outer'
+  })
+]);
+
+var style = new ol.style.Style({
+  rules: [
+    new ol.style.Rule({
+      filter: new ol.filter.Filter(function(feature) {
+        return feature.get('where') == 'outer';
+      }),
+      symbolizers: [
+        new ol.style.Line({
+          strokeStyle: new ol.Expression('color'),
+          strokeWidth: 4,
+          opacity: 1
+        })
+      ]
+    }),
+    new ol.style.Rule({
+      filter: new ol.filter.Filter(function(feature) {
+        return feature.get('where') == 'inner';
+      }),
+      symbolizers: [
+        new ol.style.Line({
+          strokeStyle: '#013',
+          strokeWidth: 4,
+          opacity: 1
+        }),
+        new ol.style.Line({
+          strokeStyle: new ol.Expression('color'),
+          strokeWidth: 2,
+          opacity: 1
+        })
+      ]
+    })
+  ]
+});
+
+var vector = new ol.layer.Vector({
+  source: source,
+  style: style
+});
+
+var map = new ol.Map({
+  layers: new ol.Collection([vector]),
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: new ol.Coordinate(0, 0),
+    zoom: 2
+  })
+});
