HomeCryptographyBlock Cipher Modes 2D: ECB vs CBC Grid & Avalanche

Block Cipher Modes 2D: ECB vs CBC Grid & Avalanche

A flat 2D canvas dashboard that encrypts a resizable grid of plaintext blocks under ECB and CBC modes with a toy keyed block cipher, plots the ciphertext byte-frequency histogram, and runs a live single-bit-key avalanche test.

Cryptography2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-cryptography-basics ↗ Open standalone

This is the flat 2D companion to the 3D block-cipher-modes simulator: the same toy keyed cipher, the same ECB and CBC chaining math, computed independently on a canvas instead of an instanced 3D grid. Four panels update together — the plaintext grid, the ciphertext grid, a byte-frequency histogram of the ciphertext, and an avalanche-diff panel — so you can watch, in one glance, how ECB lets identical plaintext blocks leak straight through as identical ciphertext while CBC's chaining erases the pattern, how the ciphertext byte distribution shifts between modes and patterns, and how sensitive the underlying cipher actually is to its key: flipping a single key bit and re-encrypting the same grid should change roughly half of every output bit if the cipher diffuses well. Grid size and band count are live sliders, not fixed constants, so you can reshape the repeating structure that ECB exposes.

⚙ Under the hood

A flat 2D canvas dashboard that encrypts a resizable grid of plaintext blocks under ECB and CBC modes with a toy keyed block cipher, plots the ciphertext byte-frequency histogram, and runs a live single-bit-key avalanche test showing exactly what fraction of output bits flip when one key bit changes.

cryptographyblock cipherECBCBCencryption modesavalanche effect

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)