diff --git a/sources/links/main.css b/sources/links/main.css
index 42cca9a..30d042c 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -31,3 +31,5 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px;
 
 #interface.hidden { display: none;opacity: 0 }
 #interface.visible { display: block; opacity: 1 }
+
+#preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4 }
\ No newline at end of file
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 864a3eb..e7151aa 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -99,6 +99,22 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.fill = "none";
     this.svg_el.style.strokeLinecap = this.linecap;
     this.element.appendChild(this.svg_el);
+    // Preview
+    this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.preview_el.id = "preview"
+    this.preview_el.setAttribute("class","vector fh");
+    this.preview_el.setAttribute("width",this.width+"px");
+    this.preview_el.setAttribute("height",this.height+"px");
+    this.preview_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
+    this.preview_el.setAttribute("baseProfile","full");
+    this.preview_el.setAttribute("version","1.1");
+    this.preview_el.style.width = this.width;
+    this.preview_el.style.height = this.height;
+    this.preview_el.style.stroke = "#72dec2";
+    this.preview_el.style.strokeWidth = 2;
+    this.preview_el.style.fill = "none";
+    this.preview_el.style.strokeLinecap = "round";
+    this.element.appendChild(this.preview_el);
 
     this.offset_el.appendChild(this.path)
     this.svg_el.appendChild(this.offset_el);
@@ -149,6 +165,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     if(dotgrid.translation){ dotgrid.translation.to = pos; }
 
+    var o = e.target.getAttribute("ar");
+    dotgrid.preview(o);
+
     dotgrid.move_cursor(pos)
     dotgrid.guide.update();
   }
@@ -223,6 +242,32 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     dotgrid.draw();
   }
 
+  this.preview = function(operation)
+  {
+    if(from && to && operation == "line"){
+      var d = new Path_Line(from.mirror(),to.mirror(),end.mirror()).to_segment();
+      this.preview_el.innerHTML = "<path d='"+d+"'></path>"
+      console.log(d);
+      return;
+    }
+    if(from && to && operation == "arc_c"){
+      var d = new Path_Arc(from.mirror(),to.mirror(),"0,1",end.mirror()).to_segment();
+      this.preview_el.innerHTML = "<path d='"+d+"'></path>"
+      return;
+    }
+    if(from && to && operation == "arc_r"){
+      var d = new Path_Arc(from.mirror(),to.mirror(),"0,0",end.mirror()).to_segment();
+      this.preview_el.innerHTML = "<path d='"+d+"'></path>"
+      return;
+    }
+    if(from && to && operation == "bezier"){
+      var d = new Path_Bezier(from.mirror(),to.mirror(),end.mirror()).to_segment();
+      this.preview_el.innerHTML = "<path d='"+d+"'></path>"
+      return;
+    }
+    this.preview_el.innerHTML = "";
+  }
+
   // Setters
 
   this.set_from = function(pos)
diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js
index 294b50f..40d5252 100644
--- a/sources/scripts/interface.js
+++ b/sources/scripts/interface.js
@@ -25,7 +25,7 @@ function Interface()
       ["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
     ]
     path_arr.forEach(function(a) {
-      html+='<svg id="'+a[0]+'" ar="'+a[0]+'" title="hello" viewBox="0 0 300 300" class="icon" style="'+a[3]+'"><path class="icon_path" d="'+a[2]+'" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="'+a[0]+'" width="300" height="300" opacity="0"><title>'+a[1]+'</title></rect></svg>'
+      html += '<svg id="'+a[0]+'" ar="'+a[0]+'" title="hello" viewBox="0 0 300 300" class="icon" style="'+a[3]+'"><path class="icon_path" d="'+a[2]+'" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="'+a[0]+'" width="300" height="300" opacity="0"><title>'+a[1]+'</title></rect></svg>'
     }, this);
     this.el.innerHTML = html
   }
diff --git a/sources/scripts/theme.js b/sources/scripts/theme.js
index 0b8d6e3..eb36f59 100644
--- a/sources/scripts/theme.js
+++ b/sources/scripts/theme.js
@@ -57,6 +57,7 @@ function Theme()
     html += ".icon { color:"+theme.f_high+" !important; stroke:"+theme.f_high+" !important }\n";
 
     html += "#dotgrid svg.vector { fill:"+theme.f_high+" }\n";
+    html += "#dotgrid #preview { stroke:"+theme.f_low+" !important} \n";
     html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
     html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
     html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";