What is Insertion Sort?

Insertion Sort is a comparison-based sorting algorithm that builds a sorted array one element at a time by inserting each element into its correct position.

What is the time complexity of Insertion Sort?

Insertion Sort has a worst-case and average-case time complexity of O(n²), while its best case is O(n) when the array is already sorted.

Is Insertion Sort stable?

Yes. Insertion Sort is a stable sorting algorithm because equal elements maintain their relative order after sorting.

Is Insertion Sort an in-place algorithm?

Yes. Insertion Sort sorts the array in place and requires only O(1) extra memory.

Why should I learn Insertion Sort?

Insertion Sort is an excellent algorithm for learning array manipulation, shifting elements, and sorting logic. It is also efficient for small datasets and nearly sorted arrays, making it useful in practical applications.

Playground Component

Insertion Sort
Visualizer

An interactive Insertion Sort visualization built with HTML, CSS, and JavaScript. Watch elements shift into their correct position while controlling the animation speed to better understand how Insertion Sort works.

Insertion Sort Visualizer

Copy Code


  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insertion Sort Visualizer</title>

<!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> -->

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#090909;
    --panel:#111111;
    --panel2:#171717;
    --gold:#f4c430;
    --gold2:#ffd54d;
    --border:#3a2d08;
    --text:#f5f5f5;
}

body{
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at top,#1b1606 0%,#090909 35%),
        var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:40px 25px;
}

h1{
    font-size:3rem;
    font-weight:700;
    color:var(--gold);
    margin-bottom:30px;
    text-shadow:0 0 18px rgba(244,196,48,.18);
    letter-spacing:.5px;
}

.controls{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:35px;
}

button{
    min-width:170px;
    padding:15px 22px;
    font-size:17px;
    font-weight:600;
    border-radius:14px;
    border:1px solid #705510;
    background:linear-gradient(180deg,#ffd54d,#e7b817);
    color:#121212;
    cursor:pointer;
    transition:.28s;
    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.35);
}

button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 14px 30px rgba(244,196,48,.22),
        inset 0 1px 0 rgba(255,255,255,.4);
}

button:active{
    transform:scale(.98);
}

#container{
    width:min(94%,1300px);
    height:590px;
    background:linear-gradient(180deg,#121212,#0b0b0b);
    border:1px solid var(--border);
    border-radius:24px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    padding:16px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 35px rgba(244,196,48,.06);
    position:relative;
    overflow:hidden;
}

#container::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:100% 60px;
    opacity:.35;
}

.bar{
    width:12px;
    background:linear-gradient(to top,#b88700,#ffd54d);
    border-radius:4px 4px 0 0;
    transition:
        height linear,
        background .2s linear,
        transform .15s linear;
    box-shadow:0 0 10px rgba(244,196,48,.15);
    z-index:1;
}

@media(max-width:900px){
    h1{
        font-size:2.2rem;
    }

    button{
        min-width:145px;
        font-size:15px;
    }

    #container{
        height:470px;
    }

    .bar{
        width:8px;
        gap:2px;
    }
}
</style>
</head>

<body>

<h1>Insertion Sort Visualizer</h1>

<div class="controls">
    <button onclick="randomize()">Randomize</button>
    <button onclick="insertionSort()">Sort</button>
    <button id="speedBtn" onclick="toggleSpeed()">Speed: Normal</button>
</div>

<div id="container"></div>

<script>

let sorting = false;

const speedLevels = [
    { name: "Very Slow", delay: 500 },
    { name: "Slow", delay: 120 },
    { name: "Normal", delay: 70 },
    { name: "Fast", delay: 35 },
    { name: "Very Fast", delay: 1 }
];

let speedIndex = 2;
let speed = speedLevels[speedIndex].delay;

const container = document.getElementById("container");

let values=[];

function toggleSpeed() {
    speedIndex++;
    if (speedIndex >= speedLevels.length) speedIndex = 0;
    speed = speedLevels[speedIndex].delay;
    document.getElementById("speedBtn").textContent =
        "Speed: " + speedLevels[speedIndex].name;
}

function createBars(){
    container.innerHTML="";
    values.forEach(v=>{
        const bar=document.createElement("div");
        bar.className="bar";
        bar.style.height=v+"px";
        container.appendChild(bar);
    });
}

function randomize(){
    values=[];
    for(let i=0;i<100;i++){
        values.push(Math.floor(Math.random()*350)+30);
    }
    createBars();
}

function sleep(ms){
    return new Promise(resolve=>setTimeout(resolve,ms));
}

async function insertionSort() {

    if (sorting) return;
    sorting = true;

    const bars = document.getElementsByClassName("bar");

    // First element is already sorted
    bars[0].style.background = "#39d353";

    for (let i = 1; i < values.length; i++) {

        let key = values[i];
        let j = i - 1;

        // Highlight current element
        bars[i].style.background = "#ff9800";
        await sleep(speed);

        while (j >= 0 && values[j] > key) {

            // Comparing
            bars[j].style.background = "#ff3b30";
            bars[j + 1].style.background = "#ff3b30";
            bars[j].style.transform = "scaleY(1.03)";
            bars[j + 1].style.transform = "scaleY(1.03)";

            await sleep(speed);

            values[j + 1] = values[j];
            bars[j + 1].style.height = values[j + 1] + "px";

            await sleep(speed);

            bars[j].style.background = "#39d353";
            bars[j + 1].style.background = "linear-gradient(to top,#b88700,#ffd54d)";
            bars[j].style.transform = "scaleY(1)";
            bars[j + 1].style.transform = "scaleY(1)";

            j--;
        }

        values[j + 1] = key;
        bars[j + 1].style.height = key + "px";

        await sleep(speed);

        // Mark sorted portion
        for (let k = 0; k <= i; k++) {
            bars[k].style.background = "#39d353";
        }
    }

    sorting = false;
}


randomize();

</script>

</body>
</html>

About this Component

Insertion Sort is a simple comparison-based sorting algorithm that builds a sorted portion of the array one element at a time. It repeatedly takes the next element and inserts it into its correct position by shifting larger elements to the right. This interactive visualization lets you observe how elements are picked, compared, shifted, and inserted into the sorted portion of the array. You can randomize the array, adjust the animation speed, and watch each insertion step in real time. Insertion Sort has a worst-case time complexity of O(n²), but it performs exceptionally well on small or nearly sorted datasets. Its simplicity and efficiency in those scenarios make it a valuable algorithm for learning sorting fundamentals.