diff --git a/resources/public/style.css b/resources/public/style.css
index 3e79d69..d47cae6 100644
--- a/resources/public/style.css
+++ b/resources/public/style.css
@@ -17,4 +17,19 @@ body {
   font-family: sans-serif;
   font-size: 14px;
   line-height: 1.2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+svg {
+  display: block;
+  width: 500px;
+  height: 500px;
+}
+
+rect {
+  fill: transparent;
+  stroke-width: 1;
+  stroke: coral
 }
diff --git a/src/heyarne/rect_packing/core.cljs b/src/heyarne/rect_packing/core.cljs
index 7661020..a9fe044 100644
--- a/src/heyarne/rect_packing/core.cljs
+++ b/src/heyarne/rect_packing/core.cljs
@@ -1,14 +1,60 @@
 (ns heyarne.rect-packing.core
   (:require [reagent.core :as r]
-            [reagent.dom :as dom]))
+            [reagent.dom :as dom]
+            [thi.ng.geom.core :as geom]
+            [thi.ng.geom.rect :as rect]
+            [thi.ng.geom.vector :as v]))
+
+(defonce state (r/atom {:rects []
+                        :frame (rect/rect 500 500)}))
+
+(comment
+
+  (swap! state update :rects empty)
+  (swap! state update :rects conj (rect/rect 200 200))
+
+  ;; fill with random rectangles
+  (swap! state assoc :rects
+         (repeatedly 20 #(rect/rect (+ 50 (rand-int 50)) (+ 50 (rand-int 50)))))
+
+  )
+
+(defn pack-rects-naive
+  "Sorts all rectangles by height and places them next to each other into frame,
+  starting at the top left."
+  [frame rects]
+  (let [rects (sort-by (comp - geom/height) rects)]
+    (reduce (fn [result rect]
+              (let [last-placed (last result)]
+                (conj result (geom/translate rect [(if last-placed
+                                                     (rect/right last-placed)
+                                                     0)
+                                                   0]))))
+            [] rects)))
+
+#_(pack-rects-naive (:frame @state) (:rects @state))
 
 (defn main []
-  [:main
-   [:h1 "Hello world"]
-   [:p "This is a starting point"]])
+  (let [{:keys [frame rects]} @state
+        sorted (pack-rects-naive frame rects)]
+    [:main
+     [:h1 "Visualization"]
+     [:svg {:viewBox "-1 -1 501 501" :xmlns "http://www.w3.org/2000/svg"}
+      [:rect {:width (geom/width frame)
+              :height (geom/height frame)}]
+      (for [rect sorted]
+        [:rect {:width (geom/width rect) :height (geom/height rect)
+                :x (-> rect :p :x)
+                :y (-> rect :p :y)}])]
+     [:h2 "Rectangles"]
+     [:ul
+      (for [rect sorted]
+        [:li [:pre (pr-str rect)]])]]))
 
 (defn ^:dev/after-load init []
   (println "Initializing…")
   (dom/render [main] (.querySelector js/document "#app")))
 
 (defonce app (init))
+
+(+ 1 2)