Interactive Mohr's Circle

An interactive single-page web module for learning stress transformation and principal stress analysis.

What It Is

A self-contained index.html teaching tool covering:

1. Stress element and transformation — live sliders for σx, σy, τxy, and rotation angle θ, with real-time transformed stress equations
2. Mohr's Circle construction — step-by-step build from Points A and B through principal stresses and τmax; click anywhere on the circle to read off stress states
3. Interpretation scenarios — three worked engineering cases (shaft under combined loading, biaxial tension, general stress state)
4. 3D extension — three-circle diagram for general 3D principal stresses with absolute max shear computation and plane-stress comparison
5. Practice problems — four problems (introductory through 3D analysis) with reveal-on-demand step-by-step solutions

Technology

• Pure HTML/CSS/JavaScript — no build step, no dependencies to install
• KaTeX for math rendering (loaded from CDN)
• SVG-based interactive diagrams drawn with vanilla JS

Usage

Open index.html in any browser.

open index.html

No server required. Works fully offline after first CDN load.

Intended Audience

Engineering students learning mechanics of materials (Mohr's Circle is typically covered in Statics/Mechanics of Materials courses). Covers 2D and 3D stress states, principal stress analysis, and failure criteria (Tresca).