Chaos Envision is an independent 3D visualization software for photorealistic real-time rendering with rapid animation capabilities. It is a partner to Chaos Enscape and is the endpoint for creating photorealistic animated visualizations. Chaos Envision supports very large scenes, realistic crowds, object manipulation, and unlimited variations for design exploration and creative animations.




Envision User Interface: Click on the highlighted panels to read more about Envision's user interface components.


.map-area {
  fill: transparent;
  stroke:  rgb(196, 58, 95);
  stroke-width: 2;
}

.map-area:hover {
  fill: rgba(196, 58, 95, 0.2); 
}

.tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      display: none;
      pointer-events: none;
      z-index: 10;
    } 


<div class="tooltip" id="tooltip"></div>

 <svg width="1000" height="600">
  <image href="https://docs.chaos.com/download/attachments/162202143/Envision_Scheme.png?version=4&modificationDate=1747125225793&api=v2" width="1000" />  

<a href="https://docs.chaos.com/display/ENVISION/Menu+Bar">
         <rect x="2" y="2" width="996" height="20" class="map-area" data-tooltip="Menus"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Home+Screen" title="Chaos Envision Home">
         <rect x="7" y="28" width="18" height="17" class="map-area" data-tooltip="Chaos Envision Home"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Toolbar" title="Toolbar">
         <rect x="305" y="26" width="400" height="26" class="map-area" data-tooltip="Toolbar"/>
</a>

  <a href="https://docs.chaos.com/display/ENVISION/Left+Side+Panel" title="Left Side Panel">
      <rect x="2" y="55" width="208" height="510" class="map-area" data-tooltip="Left Side Panel" />
  </a>

  <a href="https://docs.chaos.com/display/ENVISION/Right+Side+Panel" title="Right Side Panel">
    <rect x="790" y="55" width="208" height="510" class="map-area" data-tooltip="Right Side Panel"/>
  </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Bottom+Panel" title="Bottom Panel">
    <rect x="205" y="570" width="590" height="20" class="map-area"  data-tooltip="Bottom Panel"/>
 </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="213" y="56" width="163" height="55" class="map-area" data-tooltip="Current View Quick Settings"/>
  </a>

   <a href="https://docs.chaos.com/display/ENVISION/Full+Screen+Viewport">
    <rect x="691" y="56" width="24" height="23" class="map-area" data-tooltip="Full Scree Mode"/>
  </a>  </svg>  
<script>
    const tooltip = document.getElementById('tooltip');

    document.querySelectorAll('rect').forEach(rect => {
      rect.addEventListener('mouseenter', (e) => {
        const tooltipText = rect.getAttribute('data-tooltip');
        tooltip.innerText = tooltipText;
        tooltip.style.display = 'block';
      });

      rect.addEventListener('mousemove', (e) => {
        tooltip.style.left = `${e.pageX + 10}px`;
        tooltip.style.top = `${e.pageY + 10}px`;
      });

      rect.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
      });
    });
  </script>