Widgets

How to Add a Lorenz Attractor to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a live, rotatable 3D Lorenz attractor to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. A single point traces the Lorenz equations forever, looping around two lobes into the iconic butterfly that never repeats and never crosses itself. This guide covers the fastest way to embed the tool, what it shows, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the simulator from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/lorenz-attractor/"
        width="100%" height="1000" loading="lazy"
        style="border:0;max-width:560px"
        title="Lorenz Attractor by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/lorenz-attractor/">Lorenz Attractor</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live simulator; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

The attractor opens already drawing itself, so a visitor sees the shape form immediately and can then take control:

  • Drag to rotate in 3-D: spin the butterfly by hand to see it from any angle, or leave auto-rotate on and let it turn.
  • The ρ dial: turn the growth parameter up or down and the whole attractor reshapes live, from a single loop into the two-lobed butterfly.
  • Butterfly twin: launch a second trajectory 1e-3 away and watch the separation readout climb as the two diverge — the butterfly effect in numbers.
  • Speed, trail length and presets: lengthen the trail to see the whole shape at once, and switch between the Lorenz, Rössler and Aizawa attractors.

Pick the right height

The snippet uses height="1000", which fits the 3-D canvas, the dials and the readouts without clipping even on a narrow phone, where they stack into one column below the view. On a wider page the widget centres within its max-width:560px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

  • WordPress: add a Custom HTML block and paste the snippet.
  • Squarespace: use a Code / Embed block.
  • Wix: add an Embed HTML / iframe element.
  • Ghost: insert an HTML card.
  • Notion: paste the /embed/lorenz-attractor/ URL and choose "Create embed".
  • Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a lesson or a blog post on chaos theory, dynamical systems or the butterfly effect needs a strange attractor visitors can actually spin.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the Lorenz Attractor

Frequently asked questions

What can visitors do with the embedded Lorenz attractor?
They can drag the shape to rotate it freely in 3-D, or let it auto-rotate on its own. A ρ dial reshapes the attractor live, sliders set the simulation speed and the trail length, and a Restart button starts the trajectory over. There is also a preset switcher between the Lorenz, Rössler and Aizawa attractors.
Does the embed show the butterfly effect?
Yes — that is its centrepiece. Turn on the "butterfly twin" and a second point starts a mere 1e-3 away from the first. A separation readout climbs as the two trajectories peel apart onto different wings, so visitors watch sensitive dependence on initial conditions happen in front of them rather than just reading about it.
How is the motion computed — is it accurate?
The point follows the three Lorenz equations, integrated with fourth-order Runge–Kutta at a small time step repeated many times per frame. That keeps the path faithful even as it stretches and folds, so the strange attractor you see is the real orbit, not a decorative animation. It all runs in the visitor’s browser.
What iframe height should I use, especially on mobile?
The snippet ships with height="1000", which is tall enough that the 3-D canvas, the dials and the readouts all fit without clipping even on a narrow phone, where the controls stack into a single column below the view. On a wider page the widget simply centres within its max-width of 560px, so the same height works across screen sizes.