A browser-based computational tool for cross-section drawing, section property calculation, and shear stress distribution under transverse loading, with interactive 3D visualisation.
Developed by Assoc. Prof. Rasim Temür · İstanbul University-Cerrahpaşa, Department of Civil Engineering
Part of the Vetin initiative for the digitisation of academic instruction tools.
The application is accessible directly through a web browser without requiring any software installation, user registration, or server-side processing. All computations are performed client-side.
Vetin Shear is an open-source, web-based software developed for educational use in mechanics of materials and structural analysis curricula. The application enables interactive construction of arbitrary composite cross-sections from rectangular, circular, half-circular, and quarter-circular primitives — including void regions — and computes the complete set of section properties required for shear stress analysis.
Given a user-specified transverse shear force, the application computes the first moment of area (Q) at each horizontal level of the cross-section, evaluates the shear stress distribution using the Zhuravsky formula τ = VQ / (Ib), and renders the full shear stress diagram over the section height. The location and magnitude of the maximum shear stress are identified automatically. A synchronised three-dimensional visualisation of the member is provided via WebGL rendering.
The software is intended to support both undergraduate instruction and self-directed learning by providing immediate, interactive visual feedback on cross-section behaviour under transverse loading.
Key properties of the application:
- Operates entirely within the client browser; no server-side computation is required
- Functions offline as a Progressive Web App (PWA), compatible with major desktop and mobile platforms
- User interface is localised in 33 languages
- Supports composite cross-sections constructed from multiple primitives with boolean subtraction
- Source code is freely distributed under the MIT License
The cross-section is constructed interactively on a grid canvas. Each primitive is placed by clicking and dragging:
| Tool | Description |
|---|---|
| Rectangle | Add a rectangular region |
| Circle | Add a full circular region |
| Half Circle | Add a semicircular region |
| Quarter Circle | Add a quarter-circular region |
Each solid primitive has a corresponding void (subtract) variant in the Void tool group, used to create openings. For circular primitives the orientation of the half/quarter segment follows the drag direction, and the radius snaps to the current grid spacing.
The grid spacing (0.1 – 500 mm) governs both the drawing snap and the rounding of circular radii; it is independent of the numerical accuracy of the analysis.
In Edit mode the elements can be modified:
| Element | Operations |
|---|---|
| Rectangle | Move; resize by any of its eight corner and edge handles |
| Circle / half / quarter circle | Move; change the radius by dragging a handle on the arc |
| Void | Move |
Every element also carries a delete button, and the Sections list in the results panel shows each element with its individual area and its own delete control. Overlapping solid primitives are rejected so that no region is counted twice; a void may of course overlap a solid, and overlapping voids are handled correctly (the removed region is the union, never subtracted twice).
The canvas supports zoom, pan, and fit-to-screen. Project state — all solids and voids, the applied shear force, the bar length, and the grid and view settings — can be saved to and loaded from a JSON file.
Upon modification of the cross-section, the following quantities are computed and updated instantaneously:
Section Area
- A — total net cross-sectional area
Centroidal Moments of Inertia
- Ix, Iy — second moments of area about the centroidal x- and y-axes
- Ixy — centroidal product of inertia
Principal Moments of Inertia
- I1, I2 — principal second moments of area
- φ — inclination of the principal axes with respect to the centroidal axes
Shear Centre
- Xs, Ys — the shear centre, reported for each centroidal axis about which the section is mirror-symmetric. For a section with no axis of symmetry the corresponding coordinate is reported as
-rather than an unsubstantiated value (see Computational Methodology).
Neutral Axis
- yt — distance from the extreme top fibre to the centroidal (neutral) axis
The user specifies the applied transverse shear force:
| Symbol | Quantity | Unit |
|---|---|---|
| V | Transverse shear force | kN |
For a given shear force V, the application computes the shear stress distribution using the Zhuravsky (shear formula):
τ(y) = V · Q(y) / (I · b(y))
where Q(y) is the first moment of area of the section above level y about the centroidal axis, I is the second moment of area about the centroidal axis, and b(y) is the section width at level y.
The following results are reported:
| Symbol | Quantity |
|---|---|
| τmax | Maximum shear stress magnitude |
| Location | Height coordinate at which τmax occurs |
On the diagram itself the value of τ is annotated at every level where the curve changes character: the two extreme fibres (τ = 0), the maximum, and each level at which the section geometry changes — an edge of a primitive or of a void. At such a level the width b(y) either jumps (a flange-to-web junction, where the two values either side of the jump are both annotated) or changes slope (the crown of a circular void, where the curve forms a corner). Levels are taken from the geometry rather than from the integration samples, so a curved boundary does not generate spurious annotations.
Prerequisite — symmetry about the plane of loading. The shear formula assumes the shear stress to be constant across the width b(y). This holds only if the cross-section is mirror-symmetric about the vertical centroidal axis, i.e. about the plane of loading. The application therefore tests this symmetry geometrically and computes the shear stress distribution only when it is satisfied. For a section that fails the test the τmax and location fields show
-, no diagram is drawn, and a warning explains that the shear centre does not lie on the vertical axis and that the shear force would induce additional torsional stresses.Symmetry about the horizontal axis does not substitute for this condition. A channel section, or a square with an opening on one side only, is symmetric about the horizontal axis and consequently has Ixy = 0 — so a check based on Ixy alone would wrongly accept it. The geometric test on the vertical axis is what rejects these cases.
A section whose principal axes are not aligned with the x–y axes (Ixy ≠ 0) is rejected for the same reason, with its own warning.
The main canvas renders the following overlays simultaneously, each toggleable independently:
| Overlay | Contents |
|---|---|
| Centroidal Axes | Centroidal x–y axis system |
| Principal Axes | Rotated axis system aligned with the principal inertia directions |
| Shear Stress Diagram | Lateral shear stress distribution diagram along the section height |
| Dimension Lines | Overall section dimensions |
| Element Boundaries | Individual primitive outlines |
| Element Centroids | Centroid markers for each primitive |
| Geometric Centroid | Centroid of the composite section |
Live diagram while drawing. A separate setting, enabled by default, makes the section properties and the shear stress diagram recompute continuously during the drag, with the primitive being drawn provisionally included in the section — so the effect of a flange or an opening is visible before the mouse is released. The provisional primitive is not committed to the section until the drag ends, and is discarded if the drag is abandoned. Disabling the setting restores the alternative behaviour, in which the results update only once the element has been placed.
An interactive three-dimensional view renders the cross-section — rectangles, circular primitives and voids alike — extruded along the member axis using Three.js (WebGL):
- Bar length — set automatically to ten times the larger overall section dimension; entering a value overrides this, and a double-click on the field returns to the automatic length
- Toggleable wireframe and edge display, and adjustable opacity
- Orbit control — left-drag to rotate, middle-drag to pan, right-drag or mouse wheel to zoom
- Preset camera views: isometric, top, front, side
- Fullscreen support
Three.js is bundled as a local file rather than loaded from a CDN, so the 3D view also works when the application is used offline.
- SVG Export — The current section drawing can be exported as a scalable vector graphics file, suitable for inclusion in reports and lecture materials. The outline is exported as true vector geometry: the solid primitives are unioned and the voids subtracted, so the section is a single closed path rather than a stack of overlapping shapes.
- Project Save / Load — The complete project state (solids, voids, applied shear force, bar length, grid and view settings) can be saved to a JSON file and reloaded in a subsequent session. Files written by earlier versions of the application are read without error; any data belonging to features that no longer exist is ignored.
- Three display themes — Light, Dark, and Blueprint (technical-drawing style)
- Responsive layout — Adjustable split between the drawing canvas and the 3D panel via a draggable resizer
The user interface is fully localised in 33 languages. The active language is selectable at runtime and persisted across sessions via localStorage:
| Code | Language | Code | Language | Code | Language |
|---|---|---|---|---|---|
tr |
🇹🇷 Turkish | en |
🇬🇧 English | de |
🇩🇪 German |
fr |
🇫🇷 French | es |
🇪🇸 Spanish | it |
🇮🇹 Italian |
pt |
🇧🇷 Portuguese | ru |
🇷🇺 Russian | ro |
🇷🇴 Romanian |
bg |
🇧🇬 Bulgarian | el |
🇬🇷 Greek | sl |
🇸🇮 Slovenian |
sq |
🇦🇱 Albanian | hy |
🇦🇲 Armenian | ka |
🇬🇪 Georgian |
he |
🇮🇱 Hebrew | ar |
🇸🇦 Arabic | fa |
🇮🇷 Persian |
ur |
🇵🇰 Urdu | hi |
🇮🇳 Hindi | bn |
🇧🇩 Bengali |
ne |
🇳🇵 Nepali | dz |
🇧🇹 Dzongkha | my |
🇲🇲 Burmese |
th |
🇹🇭 Thai | id |
🇮🇩 Indonesian | tl |
🇵🇭 Filipino |
zh |
🇨🇳 Chinese | ja |
🇯🇵 Japanese | ko |
🇰🇷 Korean |
uz |
🇺🇿 Uzbek | tg |
🇹🇯 Tajik | ky |
🇰🇬 Kyrgyz |
The application is implemented using standard web technologies without dependency on a JavaScript framework:
| Technology | Role |
|---|---|
| HTML5 / CSS3 / JavaScript (ES6+) | Core application architecture |
| HTML5 Canvas API | Section drawing and shear stress visualisation |
| Three.js (WebGL) | Interactive 3D member visualisation (bundled locally) |
| PolyBool.js | Boolean union/difference of the primitives to obtain the section outline for vector export |
| SVG (Scalable Vector Graphics) | Vector export of section drawings |
| Service Worker API | Offline caching and PWA functionality |
| Web App Manifest | Home screen installation support |
| localStorage API | Persistence of user preferences (language, theme) |
shear/
├── index.html # Application entry point and HTML shell
├── manifest.json # PWA manifest descriptor
├── sw.js # Service Worker (offline caching)
│
├── script.js # Core computations, canvas drawing, UI logic
├── script3d.js # Three.js 3D visualisation module
├── three.min.js # Three.js library (local copy, required for offline use)
├── poly_utils.js # Polygon boolean operation utilities
├── polybool.min.js # PolyBool library (boolean operations)
│
├── translations.js # Localisation string repository (33 languages)
│
├── style.css # Base styles, themes (light / dark / blueprint)
│
├── logo.svg # Application logotype
├── icon.svg # Source vector icon
├── IUC.svg # İstanbul University-Cerrahpaşa logo
├── icon-192.png # PWA icon (192 × 192 px)
├── icon-512.png # PWA icon (512 × 512 px)
│
└── LICENSE # MIT licence text
The application is hosted and publicly accessible at:
https://www.rasimtemur.com/vetin/shear/
As the application comprises static files only, it may be served locally using any HTTP server:
# Clone the repository
git clone https://github.com/rasimtemur/vetin-shear.git
cd vetin-shear
# Python 3 — built-in HTTP server
python -m http.server 8000
# Node.js — via npx
npx serve .Navigate to http://localhost:8000 in a web browser to launch the application.
On browsers supporting the PWA specification (Chromium-based browsers, Firefox, Safari on iOS), the application may be installed to the device home screen or desktop via the browser's "Install" or "Add to Home Screen" functionality, enabling offline access.
- Draw the cross-section — Select a drawing tool from the toolbar and click-drag on the canvas to add rectangular or circular primitives. Use the Void variants to create openings. With Live Diagram While Drawing enabled (the default), the section properties and the shear stress diagram update continuously as you drag, so the effect of the element is visible before it is placed.
- Edit elements — Switch to Edit mode to reposition elements, resize a rectangle by its handles or change a circle's radius by dragging a handle on its arc. Elements can be deleted from the canvas or from the Sections list.
- Read the section properties — The area (A), centroidal moments of inertia (Ix, Iy, Ixy), principal moments (I1, I2, φ) and the shear centre are updated immediately in the results panel.
- Apply a shear force — Enter the transverse shear force V in the input field.
- Read the shear stress results — The maximum shear stress τmax and its location along the section height are displayed in the results panel. If the section is not symmetric about the vertical axis these fields show
-and a warning states why no result is produced. - Inspect the shear stress distribution — Enable the Shear Stress Diagram overlay to visualise the shear stress distribution over the cross-section height.
- Activate the 3D view — Toggle 3D View to open the three-dimensional WebGL panel and inspect the member geometry.
- Export — Save the section drawing as an SVG file, or save the complete project to a JSON file for later use.
The section properties are obtained by slice integration: the integration is analytic in x and numerical in y.
At each level y the solid horizontal intervals of the section are determined exactly — the spans of every rectangle and circular primitive are unioned, and the spans of every void are subtracted. This yields, for that level, the exact quantities
W(y) = Σ(eⱼ − sⱼ), Sx(y) = Σ(eⱼ² − sⱼ²)/2, Sxx(y) = Σ(eⱼ³ − sⱼ³)/3
where [sⱼ, eⱼ] are the solid intervals at that level. The section integrals then follow from a single integration in y:
A = ∫W dy, ∫x dA = ∫Sx dy, ∫y dA = ∫yW dy, ∫x² dA = ∫Sxx dy, ∫y² dA = ∫y²W dy, ∫xy dA = ∫ySx dy
Note on validity. These section properties (A, Ix, Iy, Ixy, I1, I2, φ, shear centre) are computed for any cross-section. The restriction to sections symmetric about the vertical axis applies only to the shear stress distribution — see Shear Stress Analysis.
The y-integration is performed panel by panel between the critical levels of the geometry (every edge of every rectangle and void, and the top, centre and bottom of every circle), so that no panel contains a discontinuity in W(y). Within each panel composite Simpson's rule is applied with a step adapted to the section height. Because W(y) is constant within a panel for polygonal geometry, this makes A, Ix, Iy and Ixy exact for any composition of rectangles and rectangular voids; for circular primitives the residual error is of the order of 10⁻⁵ relative.
The centroidal values follow from the parallel axis theorem:
x̄ = ∫x dA / A, ȳ = ∫y dA / A
Ix = ∫y² dA − A·ȳ², Iy = ∫x² dA − A·x̄², Ixy = ∫xy dA − A·x̄·ȳ
Overlapping solid primitives are rejected (an overlap warning is shown) so that no region is counted twice.
The shear centre lies on every axis of symmetry of the section. The application tests, geometrically, whether the section is mirror-symmetric about its vertical and horizontal centroidal axes, and reports the corresponding coordinate of the shear centre when it is thereby determined:
- symmetric about both axes → shear centre coincides with the centroid;
- symmetric about one axis only → that coordinate is reported, the other is left as
-; - no axis of symmetry → both coordinates are left as
-.
For a general section the shear centre requires the solution of the shear-flow problem over the cross-section, which is outside the scope of this tool; reporting - is preferred over reporting a value that is not substantiated.
The principal second moments of area are obtained from the centroidal moments by the transformation:
-
I1,2 = (Ix + Iy)/2 ± √[((Ix − Iy)/2)² + Ixy²]
-
tan(2φ) = −2 Ixy / (Ix − Iy)
For a cross-section subjected to a transverse shear force V acting parallel to the y-axis, the shear stress at a horizontal level y is evaluated using the Zhuravsky formula:
τ(y) = V · Q(y) / (Ix · b(y))
where:
- V — applied transverse shear force
- Q(y) — first moment of area of the section above (or below) level y about the centroidal x-axis: Q(y) = ∫yytop ȳ' dA
- Ix — second moment of area about the centroidal x-axis
- b(y) — width of the cross-section at level y
Q(y) is accumulated from the same slice integration used for the section properties, so that voids reduce both Q and b consistently.
The distribution τ(y) is evaluated at a discrete set of horizontal levels across the section height, refined around the critical levels of the geometry so that a jump in b(y) is captured on both sides. The maximum value τmax and its location are identified from this distribution.
This formulation assumes that the shear stress is uniformly distributed across the width b(y) at each level. That assumption is exact only for a section symmetric about the plane of loading, which is why the application requires that symmetry and declines to produce a result otherwise — see Shear Stress Analysis above.
This software is distributed under the MIT License.
Full license terms are available in the LICENSE file.
Assoc. Prof. Rasim Temür
Department of Civil Engineering
İstanbul University-Cerrahpaşa
🌐 rasimtemur.com
Vetin is a collection of open-source, browser-based computational tools developed for use in civil and structural engineering education. Additional tools within the Vetin ecosystem are accessible at rasimtemur.com/vetin.
Developed in support of engineering education.
GitHub ·
MIT License ·
İstanbul University-Cerrahpaşa