2D items
========

.. toctree::
	:hidden:
	:maxdepth: 1

	demo_2d_line
	demo_2d_path
	demo_2d_circle
	demo_2d_ellipse
	demo_2d_rectangle
	demo_2d_polygon
	demo_2d_text
	demo_2d_image_array
	demo_2d_image_file
	demo_2d_arrow

.. raw:: html

   <style>
   .demo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin: 24px 0 40px 0;
   }
   .demo-card {
     background: #2a2d3a;
     border-radius: 8px;
     overflow: hidden;
     transition: background 0.2s;
   }
   .demo-card:hover { background: #1a2744; }
   .demo-card a {
     display: block;
     text-decoration: none;
     color: inherit;
     padding: 12px 12px 14px 12px;
   }
   .demo-card img {
     width: 100%;
     display: block;
     border-radius: 4px;
     object-fit: cover;
     aspect-ratio: 1 / 1;
   }
   .demo-card-title {
     margin-top: 10px;
     text-align: center;
     font-size: 0.9em;
     color: #ccc;
     font-weight: 500;
   }
   </style>

   <div class="demo-grid">
     <div class="demo-card">
       <a href="demo_2d_line.html">
         <img src="../media/thumbnails/2d_line.png"
              onmouseover="this.src='../media/2d_line.gif'"
              onmouseout="this.src='../media/thumbnails/2d_line.png'">
         <div class="demo-card-title">Line</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_path.html">
         <img src="../media/thumbnails/2d_path.png"
              onmouseover="this.src='../media/2d_path.gif'"
              onmouseout="this.src='../media/thumbnails/2d_path.png'">
         <div class="demo-card-title">Path</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_circle.html">
         <img src="../media/thumbnails/2d_circle.png"
              onmouseover="this.src='../media/2d_circle.gif'"
              onmouseout="this.src='../media/thumbnails/2d_circle.png'">
         <div class="demo-card-title">Circle</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_ellipse.html">
         <img src="../media/thumbnails/2d_ellipse.png"
              onmouseover="this.src='../media/2d_ellipse.gif'"
              onmouseout="this.src='../media/thumbnails/2d_ellipse.png'">
         <div class="demo-card-title">Ellipse</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_rectangle.html">
         <img src="../media/thumbnails/2d_rectangle.png"
              onmouseover="this.src='../media/2d_rectangle.gif'"
              onmouseout="this.src='../media/thumbnails/2d_rectangle.png'">
         <div class="demo-card-title">Rectangle</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_polygon.html">
         <img src="../media/thumbnails/2d_polygon.png"
              onmouseover="this.src='../media/2d_polygon.gif'"
              onmouseout="this.src='../media/thumbnails/2d_polygon.png'">
         <div class="demo-card-title">Polygon</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_text.html">
         <img src="../media/thumbnails/2d_text.png"
              onmouseover="this.src='../media/2d_text.gif'"
              onmouseout="this.src='../media/thumbnails/2d_text.png'">
         <div class="demo-card-title">Text</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_image_array.html">
         <img src="../media/thumbnails/2d_image_array.png"
              onmouseover="this.src='../media/2d_image_array.gif'"
              onmouseout="this.src='../media/thumbnails/2d_image_array.png'">
         <div class="demo-card-title">Image Array</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_image_file.html">
         <img src="../media/thumbnails/2d_image_file.png"
              onmouseover="this.src='../media/2d_image_file.gif'"
              onmouseout="this.src='../media/thumbnails/2d_image_file.png'">
         <div class="demo-card-title">Image File</div>
       </a>
     </div>
     <div class="demo-card">
       <a href="demo_2d_arrow.html">
         <img src="../media/thumbnails/2d_arrow.png"
              onmouseover="this.src='../media/2d_arrow.gif'"
              onmouseout="this.src='../media/thumbnails/2d_arrow.png'">
         <div class="demo-card-title">Arrow</div>
       </a>
     </div>
   </div>