diff --git a/examples/filter/map.filter.oilpaint.html b/examples/filter/map.filter.oilpaint.html
index cb2d542b..c4d01244 100644
--- a/examples/filter/map.filter.oilpaint.html
+++ b/examples/filter/map.filter.oilpaint.html
@@ -31,209 +31,15 @@
   <!-- filesaver-js -->
   <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
 
-  <style>
-    #map {
-      position: fixed;
-      top: calc(3em + 40px);
-      left: 40px;
-      bottom: 40px;
-      right: 40px;
-      margin: 0;
-    }
-    h1 {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 1em;
-    }
-    h2 {
-      margin: 1em 0 0;
-    }
-    small {
-      display: block;
-    }
-    .fa-times {
-      font-size: 1.5em;
-      position: absolute;
-      top: .5em;
-      right: .5em;
-    }
-    .fa-download {
-      font-size: 1.5em;
-      margin: 0 .3em;
-      vertical-align: middle;
-    }
-    .wait {
-      position: fixed;
-      top: 50%;
-      left: 0;
-      right: 0;
-      transform: translateY(-50%);
-      z-index: 100;
-      font-size: 6em;
-      opacity: .8;
-      display: none;
-      text-align: center;
-      pointer-events: none;
-      color: #fff;
-    }
-    .wait i {
-      color: #fff;
-    }
-    .waiting .wait {
-      display: block;
-    }
-    .options {
-      position: fixed;
-      top: -100%;
-      left: 50%;
-      transform: translate(-50%, -30%);
-      background: #fff;
-      box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,.5);
-      max-width: 90%;
-      margin: 0;
-      z-index: 1001;
-      transition: .5s;
-    }
-    .options.visible {
-      top: 30%;
-    }
-    .options ul {
-      margin: 0;
-    }
-    .options label {
-      display: inline-block;
-      width: 5em;
-      text-align: right;
-      margin-right: .5em;
-    }
-    .options button {
-      display: block;
-      font-size: 1em;
-      margin: 1em auto;
-      min-width: 5em;
-      background: #369;
-      color: #fff;
-      border: 0;
-      padding: .5em;
-    }
-    .ol-search {
-      left: .5em!important;
-    }
-    .ol-search {
-      max-width: calc(100% - 1em);
-    }
-    .ol-search > * {
-      max-width: 100%;
-    }
-    .ol-button {
-      top: .5em;
-      left: 3em;
-    }
-    .ol-touch .ol-button {
-      left: 3.5em;
-    }
-    .ol-zoom {
-      display: none;
-    }
-    #map .ol-bookmark {
-      left: .5em;
-      top: 3em;
-    }
-    #map .ol-touch .ol-bookmark {
-      top: 3.5em;
-    }
-    .ol-print {
-      display: none;
-    }
-
-    .frame > img {
-      position: absolute;
-      z-index: 1;
-      pointer-events: none;
-    }
-    #map .ol-control button {
-      background-color: transparent!important;
-      color: #333;
-    }
-    #map .ol-control button:before {
-      color: #333;
-    }
-    .ol-search button {
-      background: none;
-    }
-    .ol-search button:before {
-      content: "\f002";
-      font-family: FontAwesome;
-    }
-    .ol-control.ol-bookmark > button::before {
-      content: "\f02e";
-      font-family: FontAwesome;
-      border: 0;
-      height: auto;
-    }
-    .ol-control.ol-bookmark li {
-      color: #333;
-    }
-    .ol-control a {
-      color: #333;
-    }
-    .ol-control,
-    .ol-attribution:not(.ol-collapsed),
-    .frame h2 {
-      background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 20%,#FCCD69 40%,#B07024 70%,#8E4E08 85%,#492004);
-      box-shadow: inset 2px 2px 1px #100, 0 0 0.5em #100;
-      text-shadow: 1px 1px 1px rgba(255,187,120,.6);
-      border: .1em solid #FCCD69;
-      color: #100;
-    }
-    .frame h2 {
-      position: absolute;
-      bottom: 3px;
-      left: 50%;
-      z-index: 101;
-      transform: translateX(-50%);
-      text-align: center;
-      padding: .35em 1.7em .25em;
-      max-width: 100%;
-      letter-spacing: -.035em;
-      font-weight: 700;
-      white-space: nowrap;
-    }
-    .frame h2:after, .frame h2:before {
-      content: "";
-      position: absolute;
-      width: .3em;
-      height: .3em;
-      top: 50%;
-      transform: translateY(-50%);
-      background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 44%,#FCCD69 45%,#FCCD69 55%,#B07024 56%,#8E4E08 85%,#492004);
-      z-index: 1000;
-      box-shadow: -0.5px -0.5px 1px #FCCD69, 0.05em 0.05em 0.05em 0.05em #492004;
-      border-radius: 50%;
-    }
-    .frame h2:after {
-      left: .5em;
-    }    
-    .frame h2:before {
-      right: .5em;
-    }
-  </style>
+  <link rel="stylesheet" href="./paint.css" />
 
 </head>
 <body >
   <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
 
   <div class="frame">
-    <img style="top:3em; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-t.png" />
-    <img style="bottom:0; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-b.png" />
-    <img style="top: 3em; bottom:0; right:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-r.png" />
-    <img style="top: 3em; bottom:0; left:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-l.png" />
-    <img style="top:3em; left:0;" src="../img/frame-tl.png" />
-    <img style="top:3em; right:0;" class="top" src="../img/frame-tr.png" />
-    <img style="bottom:0; right:0;" class="top" src="../img/frame-br.png" />
-    <img style="bottom:0; left:0;" class="top" src="../img/frame-bl.png" />
+    <div class="top"></div>
+    <div class="bottom"></div>
     <h2>ol-ext</h2>
   </div>
 
diff --git a/examples/filter/paint.css b/examples/filter/paint.css
new file mode 100644
index 00000000..009369cb
--- /dev/null
+++ b/examples/filter/paint.css
@@ -0,0 +1,290 @@
+#map {
+  position: fixed;
+  top: calc(3em + 40px);
+  left: 40px;
+  bottom: 40px;
+  right: 40px;
+  margin: 0;
+}
+h1 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1em;
+}
+h2 {
+  margin: 1em 0 0;
+}
+small {
+  display: block;
+}
+.fa-times {
+  font-size: 1.5em;
+  position: absolute;
+  top: .5em;
+  right: .5em;
+}
+.fa-download {
+  font-size: 1.5em;
+  margin: 0 .3em;
+  vertical-align: middle;
+}
+.wait {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 100;
+  font-size: 6em;
+  opacity: .8;
+  display: none;
+  text-align: center;
+  pointer-events: none;
+  color: #fff;
+}
+.wait i {
+  color: #fff;
+}
+.waiting .wait {
+  display: block;
+}
+.options {
+  position: fixed;
+  top: -100%;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  background: #fff;
+  box-shadow: 0.3em 0.3em 0.6em rgba(0,0,0,.5);
+  max-width: 90%;
+  margin: 0;
+  z-index: 1001;
+  transition: .5s;
+}
+.options.visible {
+  top: 30%;
+}
+.options ul {
+  margin: 0;
+}
+.options label {
+  display: inline-block;
+  width: 5em;
+  text-align: right;
+  margin-right: .5em;
+}
+.options button {
+  display: block;
+  font-size: 1em;
+  margin: 1em auto;
+  min-width: 5em;
+  background: #369;
+  color: #fff;
+  border: 0;
+  padding: .5em;
+}
+.ol-search {
+  left: .5em!important;
+}
+.ol-search {
+  max-width: calc(100% - 1em);
+}
+.ol-search > * {
+  max-width: 100%;
+}
+.ol-button {
+  top: .5em;
+  left: 3em;
+}
+.ol-touch .ol-button {
+  left: 3.5em;
+}
+.ol-zoom {
+  display: none;
+}
+#map .ol-bookmark {
+  left: .5em;
+  top: 3em;
+}
+#map .ol-touch .ol-bookmark {
+  top: 3.5em;
+}
+.ol-print {
+  display: none;
+}
+
+#map .ol-control button {
+  background-color: transparent!important;
+  color: #333;
+}
+#map .ol-control button:before {
+  color: #333;
+}
+.ol-search button {
+  background: none;
+}
+.ol-search button:before {
+  content: "\f002";
+  font-family: FontAwesome;
+}
+.ol-control.ol-bookmark > button::before {
+  content: "\f02e";
+  font-family: FontAwesome;
+  border: 0;
+  height: auto;
+}
+.ol-control.ol-bookmark li {
+  color: #333;
+}
+.ol-control a {
+  color: #333;
+}
+.ol-control,
+.ol-attribution:not(.ol-collapsed),
+.frame h2 {
+  background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 20%,#FCCD69 40%,#B07024 70%,#8E4E08 85%,#492004);
+  box-shadow: inset 2px 2px 1px #100, 0 0 0.5em #100;
+  text-shadow: 1px 1px 1px rgba(255,187,120,.6);
+  border: .1em solid #FCCD69;
+  color: #100;
+}
+.frame h2 {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  z-index: 101;
+  transform: translateX(-50%);
+  text-align: center;
+  padding: .35em 1.7em .25em;
+  max-width: 100%;
+  letter-spacing: -.035em;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.frame h2:after, .frame h2:before {
+  content: "";
+  position: absolute;
+  width: .3em;
+  height: .3em;
+  top: 50%;
+  transform: translateY(-50%);
+  background-image: linear-gradient(45deg,#492004,#8E4E08 15%,#B07024 44%,#FCCD69 45%,#FCCD69 55%,#B07024 56%,#8E4E08 85%,#492004);
+  z-index: 1000;
+  box-shadow: -0.5px -0.5px 1px #FCCD69, 0.05em 0.05em 0.05em 0.05em #492004;
+  border-radius: 50%;
+}
+.frame h2:after {
+  left: .5em;
+}    
+.frame h2:before {
+  right: .5em;
+}
+
+
+.frame {
+  position: fixed;
+  top: 3em;
+  left: 0;
+  right: 0;
+  bottom:0;
+  z-index: 1;
+  pointer-events: none;
+}
+.frame > * {
+  position: absolute;
+  z-index: 1;
+}
+.frame:before,
+.frame:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 43px;
+}
+.frame:before {
+  background-repeat: repeat-y;
+  background-image: 
+    linear-gradient(#492004 50px, transparent 180px),
+    linear-gradient(0deg, #492004, transparent 130px),
+    url(../img/frame-l.png);
+  left: 0;
+}
+.frame:after {
+  background-repeat: repeat-y;
+  background-image: 
+    linear-gradient(#492004, transparent 130px),
+    linear-gradient(0deg, #492004, transparent 130px),
+    url(../img/frame-r.png);
+  right: 0;
+}
+
+.frame .top,
+.frame .bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 43px;
+}
+.frame .top {
+  background-repeat: repeat-x;
+  background-image: 
+    linear-gradient(90deg, transparent 25%, rgba(252, 205, 105, .5), transparent 70%),
+    linear-gradient(90deg, #492004, transparent 180px),
+    linear-gradient(270deg, #492004, transparent 130px),
+    url(../img/frame-t.png);
+  top: 0;
+}
+.frame .bottom {
+  background-repeat: repeat-x;
+  background-image: 
+    linear-gradient(90deg, transparent 30%, rgba(252, 205, 105, .5), transparent 75%),
+    linear-gradient(90deg, #492004, transparent 130px),
+  linear-gradient(270deg, #492004, transparent 130px),
+    url(../img/frame-b.png);
+  bottom: 0;
+}
+
+.frame .top:before,
+.frame .top:after,
+.frame .bottom:before,
+.frame .bottom:after {
+  content: "";
+  position: absolute;
+  width: 90px;
+  height: 90px;
+}
+.frame .top:before {
+  background: url(../img/frame-tl.png);
+  top: 0;
+  left: 0; 
+}
+.frame .top:after {
+  background: url(../img/frame-tr.png);
+  top: 0;
+  right: 0; 
+}
+.frame .bottom:before {
+  background: url(../img/frame-bl.png);
+  bottom: 0;
+  left: 0; 
+}
+.frame .bottom:after {
+  background: url(../img/frame-br.png);
+  bottom: 0;
+  right: 0; 
+}
+
+
+
+/*
+    <img style="top:3em; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-t.png" />
+    <img style="bottom:0; left:0; right:0; width:100%; height: 43px;" class="top" src="../img/frame-b.png" />
+    <img style="top: 3em; bottom:0; right:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-r.png" />
+    <img style="top: 3em; bottom:0; left:0; height:calc(100% - 3em); width: 43px;" class="top" src="../img/frame-l.png" />
+    <img style="top:3em; left:0;" src="../img/frame-tl.png" />
+    <img style="top:3em; right:0;" class="top" src="../img/frame-tr.png" />
+    <img style="bottom:0; right:0;" class="top" src="../img/frame-br.png" />
+    <img style="bottom:0; left:0;" class="top" src="../img/frame-bl.png" />
+*/
\ No newline at end of file
diff --git a/examples/img/frame-b.png b/examples/img/frame-b.png
index 552db527..1f2e804a 100644
Binary files a/examples/img/frame-b.png and b/examples/img/frame-b.png differ
diff --git a/examples/img/frame-bl.png b/examples/img/frame-bl.png
index e202a0b6..6d51ac6e 100644
Binary files a/examples/img/frame-bl.png and b/examples/img/frame-bl.png differ
diff --git a/examples/img/frame-br.png b/examples/img/frame-br.png
index 7c347ebc..093a9abf 100644
Binary files a/examples/img/frame-br.png and b/examples/img/frame-br.png differ
diff --git a/examples/img/frame-l.png b/examples/img/frame-l.png
index 97cbcd76..0b19888a 100644
Binary files a/examples/img/frame-l.png and b/examples/img/frame-l.png differ
diff --git a/examples/img/frame-r.png b/examples/img/frame-r.png
index 6c699edb..ffc6ed4e 100644
Binary files a/examples/img/frame-r.png and b/examples/img/frame-r.png differ
diff --git a/examples/img/frame-t.png b/examples/img/frame-t.png
index a421b700..26e67928 100644
Binary files a/examples/img/frame-t.png and b/examples/img/frame-t.png differ
diff --git a/examples/img/frame-tl.png b/examples/img/frame-tl.png
index d23638c1..8c584757 100644
Binary files a/examples/img/frame-tl.png and b/examples/img/frame-tl.png differ
diff --git a/examples/img/frame-tr.png b/examples/img/frame-tr.png
index 9dd68638..b6bd4ab8 100644
Binary files a/examples/img/frame-tr.png and b/examples/img/frame-tr.png differ