diff --git a/demo/graph layout.html b/demo/graph layout.html
index eee8b77..cb0ecd4 100644
--- a/demo/graph layout.html	
+++ b/demo/graph layout.html	
@@ -22,6 +22,10 @@
         background-color: rgba(100, 100, 100, 0.5);
         border: 2px solid rgba(0, 0, 0, 0.5);
       }
+
+      folk-rope {
+        pointer-events: none;
+      }
     </style>
   </head>
   <body>
@@ -34,18 +38,19 @@
       <folk-shape id="shape6" x="180" y="250" width="65" height="55" rotation="-40"></folk-shape>
       <folk-shape id="shape7" x="420" y="150" width="110" height="25" rotation="10"></folk-shape>
       <folk-shape id="shape8" x="280" y="380" width="75" height="95" rotation="-50"></folk-shape>
-      <folk-arrow source="#shape1" target="#shape2"></folk-arrow>
-      <folk-arrow source="#shape1" target="#shape3"></folk-arrow>
-      <folk-arrow source="#shape2" target="#shape3"></folk-arrow>
-      <folk-arrow source="#shape3" target="#shape4"></folk-arrow>
-      <folk-arrow source="#shape4" target="#shape8"></folk-arrow>
-      <folk-arrow source="#shape5" target="#shape8"></folk-arrow>
+      <folk-rope source="#shape1" target="#shape2"></folk-rope>
+      <folk-rope source="#shape1" target="#shape3"></folk-rope>
+      <folk-rope source="#shape2" target="#shape3"></folk-rope>
+      <folk-rope source="#shape3" target="#shape4"></folk-rope>
+      <folk-rope source="#shape4" target="#shape8"></folk-rope>
+      <folk-rope source="#shape5" target="#shape8"></folk-rope>
     </folk-graph>
 
     <script type="module">
       import '../src/standalone/folk-shape.ts';
       import '../src/standalone/folk-graph.ts';
       import '../src/standalone/folk-arrow.ts';
+      import '../src/standalone/folk-rope.ts';
     </script>
   </body>
 </html>
