A visual explainer · ~10 min · no math required

How encryption
works.

Every time you see a padlock in your browser, something quietly remarkable is happening: two strangers who've never met agree on a secret in plain sight, and nobody watching can figure it out. Here's how — built up one idea at a time, with pieces you can play with.

3 playable demos Built-in Q&A bot Newcomer-friendly

The one idea to hold onto

Scramble it so only the right person can unscramble it.

Encryption turns a readable message (plaintext) into scrambled nonsense (ciphertext) using a key. Without the right key, the ciphertext is useless — even to someone holding the exact method used to scramble it.

That last part is the whole trick: the method can be public knowledge. Security comes entirely from the key being secret — not from hiding how it works.

"A lock everyone can inspect is still safe — as long as only you hold the key."
This is Kerckhoffs's principle: assume the enemy knows the system; rely on the secrecy of the key, never on hiding the algorithm.

Warm-up · try it

The simplest cipher: shift every letter.

Two thousand years ago, Caesar's "key" was just a number: shift each letter forward by N. Type something and slide the key.

caesar-cipher.js

Only 25 possible keys — a computer cracks this instantly by trying them all. Real ciphers have so many possible keys that brute force would take longer than the age of the universe.

Key idea 1

Symmetric: one shared key locks and unlocks.

Modern symmetric encryption (like AES) is the Caesar idea on steroids: the same secret key scrambles and unscrambles, but the scrambling is fiendishly complex and the key is a huge random number. It's fast and protects almost everything — your disk, your backups, your messages at rest.

It has one glaring problem, though. If you and I both need the same secret key, how do I get it to you in the first place without an eavesdropper grabbing it on the way? Mailing the key to unlock the box, in the same truck as the box, defeats the point.

The key-distribution problem. For decades this was the catch. The breakthrough that cracked it is the most beautiful idea in the field — and it powers the entire internet.

Key idea 2 · the breakthrough · try it

Public-key: two keys, and you can share one openly.

Each person gets a public key they hand out to anyone, and a private key they never share. Here's the magic: a message locked with someone's public key can only be opened by their private key. Locking and unlocking use different keys.

send-to-bob.js

Bob's public key — everyone has it Bob's private key — only Bob
statusType a message and seal it.

Illustrative — real public-key math (RSA, elliptic curves) does this with one-way number problems, not letter-shifting. The point that's exactly true: the key that locks can't unlock.

Putting it together

How the padlock in your browser actually works.

Public-key crypto is slow, and symmetric is fast — so HTTPS uses public-key once to agree on a shared symmetric key, then switches to the fast stuff. That handshake happens in milliseconds before any page loads.

Your browser says hello

It connects to the site and asks for its identity.

The site sends its certificate

This contains its public key, signed by a trusted authority so your browser knows it's really them — not an impostor.

They agree on a shared secret

Using public-key math, both sides derive the same fresh symmetric key — without ever sending it across the wire for an eavesdropper to catch.

Everything switches to fast symmetric encryption

The rest of your session — passwords, messages, payments — is scrambled with that shared key. The padlock means this whole dance succeeded.

A common mix-up

Hashing is not encryption.

They look similar — both produce scrambled-looking output — but they're opposites in one crucial way: encryption is meant to be reversed; hashing is meant to be a one-way street.

Encryption · two-way

Designed to be undone

With the key, ciphertext becomes plaintext again. Used to keep secrets you (or the recipient) need to read later.

"hello" → encrypt → "9fA2…" → decrypt → "hello"
Hashing · one-way

Designed to be irreversible

A fixed-size fingerprint of the input. You can't get the input back — so it's perfect for checking passwords without ever storing them.

"hello" → hash → "2cf24dba5fb0…" → ✗ no way back

When a site checks your password, it hashes what you typed and compares it to the stored hash — so it can verify you without ever keeping your actual password. Same idea verifies that a downloaded file wasn't tampered with.

Test yourself

Did it stick?