AI Models
•
August 12, 2026
•
4 min read
Grok 4.6 Released: Specs, Benchmarks & Hands-On Vector/3D Coding Tests
xAI's Grok 4.6 has just been released with a 500k context window, $2/$6 pricing, and an Artificial Analysis score of 61. We put it through our SVG glass sphere and 3D globe coding benchmarks.
Mohid Mirza
Co-Founder & Lead Programmer of AcceleratedLogic AI
Grok 4.6 has just been released, and it's incredible. So, let's go over the specs before we jump into our own testing.
Model Specs & Pricing
It has a 500k context window, which is a little strange considering that it is a frontier AI model, and all of its competitors have a 1M context window, but that can be fixed with local RAG or compaction. The price is what really stands out, as it is just $2/M input tokens and $6/M output tokens.
In terms of intelligence, it gets a 61 on the Artificial Analysis Intelligence Index, which is above Kimi K3 and right behind GPT 5.6 Sol (61), Claude Fable 5 (62), and Claude Opus 5 (63), so it's right at the frontier. But do these benchmark results hold up? Let's find out.
Just as a note, we'll be using the Grok CLI for the testing.
Test 1: SVG Glass Sphere & Origami Crane
In the glass sphere origami prompt, it produced the following self-contained vector illustration in one HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glass Sphere · Origami Crane</title>
<style>
:root {
--bg0: #07080c;
--bg1: #10131c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: radial-gradient(ellipse at 50% 38%, #1a2030 0%, #0b0d14 55%, #050608 100%);
color: #d7dce8;
font-family: "Segoe UI", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
overflow: hidden;
}
.stage {
height: 100%;
display: grid;
place-items: center;
padding: 12px;
}
svg {
width: min(92vmin, 920px);
height: auto;
filter: contrast(1.04) saturate(1.08);
}
.caption {
position: fixed;
left: 0; right: 0; bottom: 18px;
text-align: center;
letter-spacing: 0.28em;
font-size: 11px;
text-transform: uppercase;
color: rgba(220, 228, 240, 0.38);
pointer-events: none;
}
.shimmer { animation: shimmer 9s ease-in-out infinite; }
.breathe { animation: breathe 7.5s ease-in-out infinite; }
.caustic { animation: caustic 6.5s ease-in-out infinite; }
@keyframes shimmer {
0%, 100% { opacity: 0.78; }
50% { opacity: 1; }
}
@keyframes breathe {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes caustic {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.72; }
}
</style>
</head>
<body>
<div class="stage">
<svg viewBox="0 0 900 980" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Photorealistic glass sphere containing a 3D origami crane">
<defs>
<filter id="softShadow" x="-40%" y="-20%" width="180%" height="180%">
<feGaussianBlur in="SourceAlpha" stdDeviation="18" result="b" />
<feOffset dy="22" result="o" />
<feFlood flood-color="#020308" flood-opacity="0.72" />
<feComposite in2="o" operator="in" result="s" />
<feMerge>
<feMergeNode in="s" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="contactShadow" x="-50%" y="-40%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="16" />
</filter>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="g" />
<feMerge>
<feMergeNode in="g" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="tinyGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2.2" />
</filter>
<filter id="paperGrain">
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" seed="7" result="n" />
<feColorMatrix in="n" type="saturate" values="0" result="g" />
<feComponentTransfer in="g" result="a">
<feFuncA type="table" tableValues="0 0.18" />
</feComponentTransfer>
<feBlend in="SourceGraphic" in2="a" mode="multiply" />
</filter>
<filter id="innerRefract" x="-8%" y="-8%" width="116%" height="116%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="3" result="t" />
<feDisplacementMap in="SourceGraphic" in2="t" scale="7" xChannelSelector="R" yChannelSelector="G" />
</filter>
<filter id="glassBlur">
<feGaussianBlur stdDeviation="0.6" />
</filter>
<filter id="highlightSoft" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="4.5" />
</filter>
<filter id="wideGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="14" />
</filter>
<filter id="craneDrop" x="-25%" y="-15%" width="150%" height="150%">
<feDropShadow dx="4" dy="10" stdDeviation="5" flood-color="#1a1410" flood-opacity="0.38" />
</filter>
<clipPath id="orb">
<circle cx="450" cy="400" r="268" />
</clipPath>
<clipPath id="orbInner">
<circle cx="450" cy="400" r="248" />
</clipPath>
<clipPath id="orbLens">
<circle cx="450" cy="400" r="256" />
</clipPath>
<clipPath id="floorClip">
<ellipse cx="450" cy="790" rx="340" ry="48" />
</clipPath>
<radialGradient id="vignette" cx="50%" cy="40%" r="70%">
<stop offset="0%" stop-color="#1c2436" />
<stop offset="55%" stop-color="#0d111a" />
<stop offset="100%" stop-color="#05060a" />
</radialGradient>
<linearGradient id="plinth" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#2a3144" />
<stop offset="40%" stop-color="#171c28" />
<stop offset="100%" stop-color="#0a0c12" />
</linearGradient>
<radialGradient id="surfaceSheen" cx="50%" cy="30%" r="70%">
<stop offset="0%" stop-color="#8aa0c4" stop-opacity="0.18" />
<stop offset="45%" stop-color="#4a5a78" stop-opacity="0.05" />
<stop offset="100%" stop-color="#000" stop-opacity="0" />
</radialGradient>
<radialGradient id="glassVolume" cx="38%" cy="32%" r="68%">
<stop offset="0%" stop-color="#f4fbff" stop-opacity="0.22" />
<stop offset="28%" stop-color="#c5e4ef" stop-opacity="0.10" />
<stop offset="62%" stop-color="#6aa8b8" stop-opacity="0.13" />
<stop offset="86%" stop-color="#1d4d5c" stop-opacity="0.28" />
<stop offset="100%" stop-color="#082028" stop-opacity="0.42" />
</radialGradient>
<radialGradient id="glassBack" cx="50%" cy="48%" r="55%">
<stop offset="0%" stop-color="#9ec9d4" stop-opacity="0.08" />
<stop offset="70%" stop-color="#16343c" stop-opacity="0.18" />
<stop offset="100%" stop-color="#061016" stop-opacity="0.35" />
</radialGradient>
<radialGradient id="fresnel" cx="50%" cy="50%" r="50%">
<stop offset="78%" stop-color="#ffffff" stop-opacity="0" />
<stop offset="90%" stop-color="#d7f4ff" stop-opacity="0.18" />
<stop offset="96%" stop-color="#9ad4e8" stop-opacity="0.55" />
<stop offset="100%" stop-color="#eefcff" stop-opacity="0.85" />
</radialGradient>
<radialGradient id="innerShadow" cx="50%" cy="18%" r="80%">
<stop offset="40%" stop-color="#000" stop-opacity="0" />
<stop offset="100%" stop-color="#021018" stop-opacity="0.38" />
</radialGradient>
<radialGradient id="bottomCrescent" cx="50%" cy="78%" r="42%">
<stop offset="0%" stop-color="#0a2030" stop-opacity="0.38" />
<stop offset="70%" stop-color="#0a2030" stop-opacity="0.08" />
<stop offset="100%" stop-color="#0a2030" stop-opacity="0" />
</radialGradient>
<linearGradient id="rimStroke" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" />
<stop offset="25%" stop-color="#b8dce8" stop-opacity="0.45" />
<stop offset="55%" stop-color="#4a7a88" stop-opacity="0.35" />
<stop offset="80%" stop-color="#d0eef8" stop-opacity="0.7" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.9" />
</linearGradient>
<radialGradient id="specPrimary" cx="40%" cy="35%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.95" />
<stop offset="35%" stop-color="#e8f7ff" stop-opacity="0.45" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
<linearGradient id="windowRefl" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.42" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.02" />
</linearGradient>
<radialGradient id="causticGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#d8f4ff" stop-opacity="0.55" />
<stop offset="40%" stop-color="#7ec8d8" stop-opacity="0.22" />
<stop offset="100%" stop-color="#3a8090" stop-opacity="0" />
</radialGradient>
<radialGradient id="orbCoreLight" cx="42%" cy="36%" r="40%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.16" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
<linearGradient id="pLit" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fffaf2" />
<stop offset="45%" stop-color="#f3e4cc" />
<stop offset="100%" stop-color="#d7b48a" />
</linearGradient>
<linearGradient id="pWarm" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f7ead4" />
<stop offset="100%" stop-color="#c89a6a" />
</linearGradient>
<linearGradient id="pMid" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ead3b0" />
<stop offset="100%" stop-color="#b07d52" />
</linearGradient>
<linearGradient id="pShade" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#c9a078" />
<stop offset="100%" stop-color="#7a4e32" />
</linearGradient>
<linearGradient id="pDeep" x1="0.2" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#a06a44" />
<stop offset="100%" stop-color="#5a321c" />
</linearGradient>
<linearGradient id="pEdge" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fff6e8" />
<stop offset="100%" stop-color="#e8c9a0" />
</linearGradient>
<linearGradient id="pNeck" x1="0" y1="1" x2="0.3" y2="0">
<stop offset="0%" stop-color="#e6c8a0" />
<stop offset="100%" stop-color="#fff8ec" />
</linearGradient>
<linearGradient id="pNeckSide" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#d4aa78" />
<stop offset="100%" stop-color="#8a5534" />
</linearGradient>
<linearGradient id="pBeak" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f0d2a8" />
<stop offset="100%" stop-color="#b07a48" />
</linearGradient>
<linearGradient id="pWingUnder" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c49264" />
<stop offset="100%" stop-color="#6e4228" />
</linearGradient>
<linearGradient id="pBelly" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#d8b086" />
<stop offset="100%" stop-color="#8a5a38" />
</linearGradient>
<linearGradient id="pTail" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#e8c8a0" />
<stop offset="100%" stop-color="#fff7ea" />
</linearGradient>
<linearGradient id="pTailSide" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#c49868" />
<stop offset="100%" stop-color="#704228" />
</linearGradient>
<linearGradient id="foldLine" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6a4030" stop-opacity="0.55" />
<stop offset="100%" stop-color="#3a2014" stop-opacity="0.25" />
</linearGradient>
<radialGradient id="paperHighlight" cx="30%" cy="25%" r="70%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.55" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
<linearGradient id="refractTint" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8fd4e8" stop-opacity="0.18" />
<stop offset="50%" stop-color="#ffffff" stop-opacity="0" />
<stop offset="100%" stop-color="#3a88a0" stop-opacity="0.16" />
</linearGradient>
</defs>
<rect width="900" height="980" fill="url(#vignette)" />
<ellipse cx="450" cy="250" rx="260" ry="90" fill="#9bb4d4" opacity="0.04" filter="url(#wideGlow)" />
<g>
<ellipse cx="450" cy="792" rx="360" ry="56" fill="#080a10" opacity="0.85" filter="url(#contactShadow)" />
<ellipse cx="450" cy="788" rx="310" ry="42" fill="url(#plinth)" />
<ellipse cx="450" cy="786" rx="300" ry="38" fill="url(#surfaceSheen)" />
<ellipse cx="450" cy="774" rx="210" ry="16" fill="#cfe8f4" opacity="0.06" />
</g>
<g>
<ellipse cx="450" cy="786" rx="230" ry="28" fill="#02040a" opacity="0.7" filter="url(#contactShadow)" />
<ellipse class="caustic" cx="450" cy="784" rx="168" ry="18" fill="url(#causticGrad)" />
<path d="M300 784 C340 768 390 760 450 760 C510 760 560 768 600 784 C560 798 510 806 450 806 C390 806 340 798 300 784Z"
fill="#b8ecff" opacity="0.08" />
<path d="M370 780 C400 772 430 770 450 770 C480 770 510 774 530 782 C500 778 470 776 450 776 C420 776 390 778 370 780Z"
fill="#e8fbff" opacity="0.16" class="caustic" />
</g>
<g class="breathe" filter="url(#softShadow)">
<circle cx="450" cy="400" r="268" fill="url(#glassBack)" />
<circle cx="450" cy="400" r="268" fill="#0a1c24" opacity="0.18" />
<g clip-path="url(#orb)">
<ellipse cx="450" cy="560" rx="220" ry="90" fill="#143040" opacity="0.25" />
<ellipse cx="330" cy="300" rx="140" ry="90" fill="#d8e8f4" opacity="0.06" />
</g>
<g clip-path="url(#orbInner)">
<ellipse cx="456" cy="548" rx="118" ry="22" fill="#1a100c" opacity="0.28" filter="url(#contactShadow)" />
<ellipse cx="452" cy="544" rx="90" ry="14" fill="#3a2818" opacity="0.18" />
<g opacity="0.14" transform="translate(450 620) scale(0.72 -0.28) translate(-450 -430)" filter="url(#glassBlur)">
<use href="#craneBody" />
</g>
<g opacity="0.18" transform="translate(-3 1)" filter="url(#innerRefract)" style="mix-blend-mode: screen">
<use href="#craneBody" fill="#ff6a4a" />
</g>
<g opacity="0.16" transform="translate(3 -1)" filter="url(#innerRefract)" style="mix-blend-mode: screen">
<use href="#craneBody" fill="#4ad4ff" />
</g>
<g id="craneBody" filter="url(#craneDrop)">
<g filter="url(#paperGrain)">
<path d="M468 412 L612 338 L586 392 L478 438 Z" fill="url(#pWingUnder)" stroke="#5a3420" stroke-width="0.6" stroke-linejoin="round" />
<path d="M478 438 L586 392 L572 428 L486 456 Z" fill="url(#pDeep)" stroke="#4a2818" stroke-width="0.45" />
<path d="M462 392 L618 312 L612 338 L468 412 Z" fill="url(#pWarm)" stroke="#8a6040" stroke-width="0.7" stroke-linejoin="round" />
<path d="M462 392 L548 344 L500 400 Z" fill="url(#paperHighlight)" opacity="0.35" />
<path d="M548 344 L618 312 L590 350 Z" fill="#fff6ea" opacity="0.22" />
<path d="M392 428 L448 454 L486 456 L478 438 L430 418 Z" fill="url(#pBelly)" stroke="#6a4030" stroke-width="0.55" />
<path d="M368 404 L392 428 L430 418 L412 378 Z" fill="url(#pMid)" stroke="#7a5038" stroke-width="0.55" />
<path d="M368 404 L412 378 L454 368 L430 418 Z" fill="url(#pLit)" stroke="#a07855" stroke-width="0.6" />
<path d="M430 418 L454 368 L478 388 L478 438 Z" fill="url(#pWarm)" stroke="#8a6044" stroke-width="0.55" />
<path d="M412 378 L454 368 L430 396 Z" fill="#fffaf2" opacity="0.28" />
<path d="M368 404 L248 428 L272 468 L392 428 Z" fill="url(#pShade)" stroke="#5a301c" stroke-width="0.65" stroke-linejoin="round" />
<path d="M272 468 L392 428 L400 448 L292 492 Z" fill="url(#pDeep)" stroke="#4a2414" stroke-width="0.5" />
<path d="M368 404 L214 372 L248 428 Z" fill="url(#pLit)" stroke="#9a7050" stroke-width="0.75" stroke-linejoin="round" />
<path d="M368 404 L214 372 L236 348 L350 382 Z" fill="url(#pEdge)" stroke="#b08860" stroke-width="0.55" />
<path d="M236 348 L214 372 L198 358 L228 332 Z" fill="url(#pWarm)" stroke="#c4a078" stroke-width="0.5" />
<path d="M350 382 L236 348 L260 368 L358 396 Z" fill="url(#paperHighlight)" opacity="0.4" />
<path d="M214 372 L248 428 L230 400 Z" fill="#fff2dc" opacity="0.12" />
<path d="M350 382 L368 404 L378 390 L362 372 Z" fill="url(#pMid)" stroke="#8a5a3a" stroke-width="0.45" />
<path d="M478 388 L548 292 L532 318 L486 400 Z" fill="url(#pTailSide)" stroke="#6a4028" stroke-width="0.5" />
<path d="M454 368 L478 388 L532 318 L560 248 L528 278 Z" fill="url(#pTail)" stroke="#b08860" stroke-width="0.65" stroke-linejoin="round" />
<path d="M528 278 L560 248 L548 268 Z" fill="#fffaf0" opacity="0.45" />
<path d="M454 368 L500 320 L478 388 Z" fill="url(#paperHighlight)" opacity="0.22" />
<path d="M368 404 L392 392 L378 360 L352 378 Z" fill="url(#pMid)" stroke="#8a5a38" stroke-width="0.45" />
<path d="M352 378 L378 360 L348 292 L318 312 Z" fill="url(#pNeck)" stroke="#b08458" stroke-width="0.65" stroke-linejoin="round" />
<path d="M318 312 L348 292 L338 286 L304 308 Z" fill="url(#pNeckSide)" stroke="#7a4a30" stroke-width="0.45" />
<path d="M352 378 L334 340 L318 312 L340 328 Z" fill="#fff6ea" opacity="0.18" />
<path d="M338 286 L348 292 L328 308 L302 300 Z" fill="url(#pLit)" stroke="#a07048" stroke-width="0.55" />
<path d="M302 300 L328 308 L318 318 L286 312 Z" fill="url(#pBeak)" stroke="#8a5838" stroke-width="0.5" />
<path d="M286 312 L268 318 L280 326 L318 318 Z" fill="url(#pShade)" stroke="#6a4028" stroke-width="0.45" stroke-linejoin="round" />
<path d="M338 286 L318 278 L302 300 Z" fill="url(#pNeckSide)" stroke="#7a4a2c" stroke-width="0.4" />
<path d="M338 286 L318 278 L328 292 Z" fill="#fffaf4" opacity="0.5" />
<ellipse cx="316" cy="296" rx="2.1" ry="1.6" fill="#2a1810" opacity="0.75" />
<ellipse cx="315.4" cy="295.5" rx="0.7" ry="0.55" fill="#fff" opacity="0.55" />
</g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.72">
<path d="M368 404 L214 372" stroke="url(#foldLine)" stroke-width="1.15" />
<path d="M368 404 L248 428" stroke="#5a301c" stroke-width="0.7" opacity="0.55" />
<path d="M236 348 L368 404" stroke="#c4a078" stroke-width="0.55" opacity="0.45" />
<path d="M350 382 L248 428" stroke="#8a5538" stroke-width="0.45" opacity="0.4" />
<path d="M412 378 L454 368 L478 388" stroke="#b08458" stroke-width="0.9" />
<path d="M368 404 L454 368" stroke="#9a6a44" stroke-width="0.7" opacity="0.65" />
<path d="M430 418 L454 368" stroke="#8a5a38" stroke-width="0.55" opacity="0.5" />
<path d="M462 392 L618 312" stroke="#a07048" stroke-width="0.85" />
<path d="M468 412 L612 338" stroke="#6a4028" stroke-width="0.55" opacity="0.55" />
<path d="M454 368 L560 248" stroke="#c49868" stroke-width="0.85" />
<path d="M478 388 L532 318" stroke="#7a4a30" stroke-width="0.5" opacity="0.5" />
<path d="M352 378 L348 292" stroke="#b08458" stroke-width="0.8" />
<path d="M318 312 L348 292" stroke="#7a4a30" stroke-width="0.55" />
<path d="M338 286 L268 318" stroke="#8a5834" stroke-width="0.7" />
<path d="M302 300 L328 308" stroke="#6a4028" stroke-width="0.45" opacity="0.55" />
<path d="M214 372 L198 358 L228 332 L236 348" stroke="#e8c8a0" stroke-width="0.7" />
<path d="M560 248 L548 268" stroke="#fff6ea" stroke-width="0.8" />
</g>
<g opacity="0.55">
<path d="M214 372 L248 428" fill="none" stroke="#fff3de" stroke-width="1.6" stroke-linecap="round" opacity="0.25" />
<path d="M618 312 L612 338" fill="none" stroke="#fff6ea" stroke-width="1.3" opacity="0.3" />
<path d="M560 248 L532 318" fill="none" stroke="#fffaf2" stroke-width="1.1" opacity="0.22" />
</g>
</g>
<circle cx="450" cy="400" r="248" fill="url(#refractTint)" />
<circle cx="450" cy="400" r="248" fill="none" stroke="#9ad4e4" stroke-width="22" opacity="0.05" />
<circle cx="450" cy="400" r="236" fill="none" stroke="#e8f8ff" stroke-width="8" opacity="0.04" />
</g>
<circle cx="450" cy="400" r="268" fill="url(#glassVolume)" />
<circle cx="450" cy="400" r="268" fill="url(#orbCoreLight)" />
<circle cx="450" cy="400" r="268" fill="url(#innerShadow)" />
<circle cx="450" cy="400" r="200" fill="url(#bottomCrescent)" />
<circle cx="450" cy="400" r="268" fill="url(#fresnel)" />
<circle cx="450" cy="400" r="268" fill="none" stroke="url(#rimStroke)" stroke-width="3.2" />
<circle cx="450" cy="400" r="261" fill="none" stroke="#8ec8d8" stroke-width="1.1" opacity="0.28" />
<circle cx="450" cy="400" r="252" fill="none" stroke="#e8f8ff" stroke-width="0.6" opacity="0.18" />
<g class="shimmer" clip-path="url(#orb)" opacity="0.9">
<g transform="rotate(-18 360 300)" fill="url(#windowRefl)">
<path d="M292 214 C318 188 360 178 402 196 C388 232 360 258 322 272 C300 248 290 230 292 214Z" opacity="0.55" />
<rect x="318" y="228" width="22" height="46" rx="3" transform="rotate(-16 329 251)" opacity="0.35" />
<rect x="348" y="220" width="20" height="50" rx="3" transform="rotate(-16 358 245)" opacity="0.28" />
<rect x="376" y="218" width="16" height="42" rx="3" transform="rotate(-16 384 239)" opacity="0.18" />
<path d="M310 248 L390 228" stroke="#fff" stroke-width="1.2" opacity="0.2" />
<path d="M308 262 L386 244" stroke="#fff" stroke-width="0.8" opacity="0.12" />
</g>
<path d="M560 430 C610 400 650 410 668 458 C640 500 590 512 548 488 C546 458 550 440 560 430Z"
fill="#cfefff" opacity="0.08" />
<path d="M210 390 C280 370 360 362 450 366 C560 370 650 392 700 430"
fill="none" stroke="#d8eef8" stroke-width="10" opacity="0.045" />
</g>
<g id="highlights">
<ellipse cx="352" cy="292" rx="78" ry="46" transform="rotate(-28 352 292)" fill="url(#specPrimary)" filter="url(#highlightSoft)" opacity="0.85" />
<ellipse cx="348" cy="286" rx="34" ry="18" transform="rotate(-30 348 286)" fill="#ffffff" filter="url(#tinyGlow)" opacity="0.72" />
<ellipse cx="336" cy="276" rx="14" ry="6.5" transform="rotate(-32 336 276)" fill="#ffffff" opacity="0.95" />
<ellipse cx="330" cy="278" rx="16" ry="7" transform="rotate(-32 330 278)" fill="#ff8a80" opacity="0.18" style="mix-blend-mode: screen" />
<ellipse cx="342" cy="274" rx="16" ry="7" transform="rotate(-32 342 274)" fill="#80e8ff" opacity="0.2" style="mix-blend-mode: screen" />
<ellipse cx="560" cy="478" rx="52" ry="22" transform="rotate(24 560 478)" fill="#dff6ff" opacity="0.14" filter="url(#highlightSoft)" />
<path d="M580 545 C620 500 650 490 668 512 C650 548 618 568 582 558 C572 548 574 548 580 545Z"
fill="#e8f8ff" opacity="0.12" />
<circle cx="232" cy="352" r="2.2" fill="#fff" opacity="0.7" filter="url(#tinyGlow)" />
<circle cx="248" cy="510" r="1.5" fill="#fff" opacity="0.45" />
<circle cx="640" cy="318" r="1.8" fill="#fff" opacity="0.5" />
<circle cx="678" cy="430" r="1.4" fill="#e8f8ff" opacity="0.4" />
</g>
</g>
<circle cx="450" cy="400" r="278" fill="none" stroke="#9ad0e0" stroke-width="18" opacity="0.05" filter="url(#wideGlow)" />
</svg>
</div>
<div class="caption">glass · origami · orizuru</div>
<script>
(function () {
var svg = document.querySelector("svg");
var hi = document.getElementById("highlights");
if (!svg || !hi) return;
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) return;
svg.addEventListener("pointermove", function (e) {
var r = svg.getBoundingClientRect();
var nx = (e.clientX - r.left) / r.width - 0.5;
var ny = (e.clientY - r.top) / r.height - 0.5;
hi.setAttribute("transform", "translate(" + (nx * 18) + " " + (ny * 14) + ")");
});
svg.addEventListener("pointerleave", function () {
hi.setAttribute("transform", "translate(0 0)");
});
})();
</script>
</body>
</html>Evaluation: This is the best result I've seen so far from any AI model, as it actually does look like an origami crane encased in a glass sphere. Overall, a really nice start for Grok 4.6.
Test 2: Three.js Interactive 3D Globe
Now, for the 3D globe test, the problems in the model start to arise. It couldn't actually generate a working prototype at first, as it was trying to load in external textures and failing. However, after a little bit of prompting, it produced this self-contained WebGL simulation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procedural Globe</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #010105;
font-family: "Segoe UI", system-ui, sans-serif;
}
canvas { display: block; width: 100%; height: 100%; cursor: grab; }
canvas.dragging { cursor: grabbing; }
#ui {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 260px;
padding: 14px 18px 16px;
border-radius: 14px;
background: rgba(8, 14, 28, 0.62);
border: 1px solid rgba(140, 190, 255, 0.18);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(12px);
color: #d7e6ff;
user-select: none;
}
#ui label {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.82;
}
#speed {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #1a3a66, #7ec8ff);
outline: none;
}
#speed::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #eaf4ff;
border: 2px solid #7ec8ff;
box-shadow: 0 0 12px rgba(126, 200, 255, 0.7);
cursor: pointer;
}
#speed::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #eaf4ff;
border: 2px solid #7ec8ff;
box-shadow: 0 0 12px rgba(126, 200, 255, 0.7);
cursor: pointer;
}
</style>
</head>
<body>
<div id="ui">
<label for="speed">Rotation Speed</label>
<input id="speed" type="range" min="0" max="2" step="0.01" value="0.35">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function () {
function fade(t) { return t * t * (3 - 2 * t); }
function lerp(a, b, t) { return a + (b - a) * t; }
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function hash3(xi, yi, zi) {
var n = Math.sin(xi * 127.1 + yi * 311.7 + zi * 74.7) * 43758.5453123;
return n - Math.floor(n);
}
function noise3(x, y, z) {
var xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
var xf = x - xi, yf = y - yi, zf = z - zi;
var u = fade(xf), v = fade(yf), w = fade(zf);
var a = hash3(xi, yi, zi), b = hash3(xi + 1, yi, zi);
var c = hash3(xi, yi + 1, zi), d = hash3(xi + 1, yi + 1, zi);
var e = hash3(xi, yi, zi + 1), f = hash3(xi + 1, yi, zi + 1);
var g = hash3(xi, yi + 1, zi + 1), h = hash3(xi + 1, yi + 1, zi + 1);
return lerp(
lerp(lerp(a, b, u), lerp(c, d, u), v),
lerp(lerp(e, f, u), lerp(g, h, u), v),
w
);
}
function fbm(x, y, z, octaves) {
var val = 0, amp = 0.5, freq = 1, i;
for (i = 0; i < octaves; i++) {
val += amp * noise3(x * freq, y * freq, z * freq);
freq *= 2.05;
amp *= 0.5;
}
return val;
}
function mixColor(a, b, t) {
t = clamp(t, 0, 1);
return [
a[0] + (b[0] - a[0]) * t,
a[1] + (b[1] - a[1]) * t,
a[2] + (b[2] - a[2]) * t
];
}
function generatePlanetMaps(width, height) {
var colorCanvas = document.createElement("canvas");
var bumpCanvas = document.createElement("canvas");
var specCanvas = document.createElement("canvas");
colorCanvas.width = bumpCanvas.width = specCanvas.width = width;
colorCanvas.height = bumpCanvas.height = specCanvas.height = height;
var colorCtx = colorCanvas.getContext("2d");
var bumpCtx = bumpCanvas.getContext("2d");
var specCtx = specCanvas.getContext("2d");
var colorImg = colorCtx.createImageData(width, height);
var bumpImg = bumpCtx.createImageData(width, height);
var specImg = specCtx.createImageData(width, height);
var cd = colorImg.data, bd = bumpImg.data, sd = specImg.data;
var deep = [6, 16, 48];
var mid = [10, 48, 102];
var shallow = [28, 118, 148];
var coast = [198, 178, 118];
var grass = [46, 112, 52];
var forest = [24, 72, 38];
var desert = [186, 152, 82];
var rock = [118, 112, 102];
var snow = [232, 240, 246];
var i, j, idx, u, v, lon, lat, cx, cy, cz, n, n2, climate, elev, ice, col, bump, spec, absY, desertBelt;
for (j = 0; j < height; j++) {
v = j / (height - 1);
lat = (0.5 - v) * Math.PI;
cy = Math.sin(lat);
var cosLat = Math.cos(lat);
for (i = 0; i < width; i++) {
u = i / width;
lon = u * Math.PI * 2;
cx = cosLat * Math.cos(lon);
cz = cosLat * Math.sin(lon);
n = fbm(cx * 2.15 + 8.1, cy * 2.15 + 3.4, cz * 2.15 + 1.7, 5);
n2 = fbm(cx * 6.2 + 19.0, cy * 6.2 + 4.2, cz * 6.2 + 11.5, 3);
climate = fbm(cx * 1.4 + 40.0, cy * 1.4 - 12.0, cz * 1.4 + 7.0, 3);
elev = n * 0.78 + n2 * 0.22 - 0.46;
absY = Math.abs(cy);
ice = clamp((absY - 0.72) * 5.5 + (elev + 0.05) * 0.8, 0, 1);
desertBelt = clamp(1 - Math.abs(absY - 0.28) * 4.2, 0, 1) * clamp(climate * 1.4, 0, 1);
if (elev <= 0) {
var depth = clamp(-elev * 2.4, 0, 1);
col = mixColor(shallow, mid, clamp(depth * 1.4, 0, 1));
col = mixColor(col, deep, clamp(depth * 1.1 - 0.25, 0, 1));
if (ice > 0.35 && elev > -0.035) col = mixColor(col, snow, ice * 0.85);
bump = 18 + (1 - depth) * 22;
spec = 210 - depth * 40;
} else {
var h = clamp(elev * 2.8, 0, 1);
col = mixColor(coast, grass, clamp(h * 4.5, 0, 1));
col = mixColor(col, forest, clamp((h - 0.12) * 2.2 + (1 - desertBelt) * 0.25, 0, 1));
col = mixColor(col, desert, desertBelt * clamp(1.1 - h * 1.4, 0, 1));
col = mixColor(col, rock, clamp((h - 0.42) * 2.6, 0, 1));
col = mixColor(col, snow, clamp((h - 0.62) * 3.2, 0, 1) + ice);
bump = 70 + h * 175;
spec = 18 + desertBelt * 16;
}
idx = (j * width + i) * 4;
cd[idx] = col[0]; cd[idx + 1] = col[1]; cd[idx + 2] = col[2]; cd[idx + 3] = 255;
bd[idx] = bd[idx + 1] = bd[idx + 2] = bump; bd[idx + 3] = 255;
sd[idx] = sd[idx + 1] = sd[idx + 2] = spec; sd[idx + 3] = 255;
}
}
colorCtx.putImageData(colorImg, 0, 0);
bumpCtx.putImageData(bumpImg, 0, 0);
specCtx.putImageData(specImg, 0, 0);
var colorMap = new THREE.CanvasTexture(colorCanvas);
var bumpMap = new THREE.CanvasTexture(bumpCanvas);
var specMap = new THREE.CanvasTexture(specCanvas);
colorMap.wrapS = bumpMap.wrapS = specMap.wrapS = THREE.ClampToEdgeWrapping;
colorMap.wrapT = bumpMap.wrapT = specMap.wrapT = THREE.ClampToEdgeWrapping;
colorMap.anisotropy = 8;
return { colorMap: colorMap, bumpMap: bumpMap, specMap: specMap };
}
function makeGlowTexture() {
var c = document.createElement("canvas");
c.width = 64;
c.height = 64;
var g = c.getContext("2d");
var grd = g.createRadialGradient(32, 32, 0, 32, 32, 32);
grd.addColorStop(0, "rgba(255,255,255,1)");
grd.addColorStop(0.28, "rgba(190,230,255,0.85)");
grd.addColorStop(0.55, "rgba(80,160,255,0.28)");
grd.addColorStop(1, "rgba(0,0,0,0)");
g.fillStyle = grd;
g.fillRect(0, 0, 64, 64);
var tex = new THREE.CanvasTexture(c);
tex.minFilter = THREE.LinearFilter;
tex.magFilter = THREE.LinearFilter;
return tex;
}
var maps = generatePlanetMaps(1024, 512);
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x010105);
var camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.1, 200);
var camDist = 3.55;
var targetDist = 3.55;
camera.position.set(0, 0.12, camDist);
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var ambient = new THREE.AmbientLight(0x2a3558, 0.42);
scene.add(ambient);
var sun = new THREE.DirectionalLight(0xfff4e0, 1.15);
sun.position.set(5.2, 2.4, 4.1);
scene.add(sun);
var fill = new THREE.DirectionalLight(0x3344aa, 0.22);
fill.position.set(-4.5, -1.4, -3.2);
scene.add(fill);
var rim = new THREE.PointLight(0x66aaff, 0.55, 20);
rim.position.set(-2.8, 1.6, 2.4);
scene.add(rim);
var world = new THREE.Group();
scene.add(world);
var earthGroup = new THREE.Group();
earthGroup.rotation.z = THREE.MathUtils.degToRad(23.4);
world.add(earthGroup);
var earthMat = new THREE.MeshPhongMaterial({
map: maps.colorMap,
bumpMap: maps.bumpMap,
bumpScale: 0.045,
specularMap: maps.specMap,
specular: new THREE.Color(0x335577),
shininess: 28
});
var earth = new THREE.Mesh(new THREE.SphereGeometry(1, 80, 64), earthMat);
earthGroup.add(earth);
var atmoVert = [
"varying vec3 vNormal;",
"void main() {",
" vNormal = normalize(normalMatrix * normal);",
" gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
"}"
].join("\n");
var atmoFragOuter = [
"varying vec3 vNormal;",
"void main() {",
" float intensity = pow(0.62 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 3.6);",
" gl_FragColor = vec4(0.28, 0.58, 1.0, 1.0) * intensity;",
"}"
].join("\n");
var atmoFragInner = [
"varying vec3 vNormal;",
"void main() {",
" float intensity = pow(0.72 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.15);",
" gl_FragColor = vec4(0.35, 0.7, 1.0, 1.0) * intensity * 0.55;",
"}"
].join("\n");
var outerGlow = new THREE.Mesh(
new THREE.SphereGeometry(1.18, 64, 48),
new THREE.ShaderMaterial({
vertexShader: atmoVert,
fragmentShader: atmoFragOuter,
blending: THREE.AdditiveBlending,
side: THREE.BackSide,
transparent: true,
depthWrite: false
})
);
earthGroup.add(outerGlow);
var innerGlow = new THREE.Mesh(
new THREE.SphereGeometry(1.035, 64, 48),
new THREE.ShaderMaterial({
vertexShader: atmoVert,
fragmentShader: atmoFragInner,
blending: THREE.AdditiveBlending,
side: THREE.FrontSide,
transparent: true,
depthWrite: false
})
);
earthGroup.add(innerGlow);
var ringGroup = new THREE.Group();
ringGroup.rotation.x = 0.52;
ringGroup.rotation.z = 0.18;
world.add(ringGroup);
var ringCount = 1400;
var ringPos = new Float32Array(ringCount * 3);
var ringCol = new Float32Array(ringCount * 3);
var p, ang, rad, yOff, pal, c0, c1, t;
c0 = [0.55, 0.82, 1.0];
c1 = [1.0, 0.86, 0.55];
for (p = 0; p < ringCount; p++) {
ang = Math.random() * Math.PI * 2;
rad = 1.62 + Math.random() * 0.34 + Math.sin(ang * 3.0) * 0.015;
yOff = (Math.random() - 0.5) * 0.07;
ringPos[p * 3] = Math.cos(ang) * rad;
ringPos[p * 3 + 1] = yOff;
ringPos[p * 3 + 2] = Math.sin(ang) * rad;
t = 0.5 + 0.5 * Math.sin(ang * 2.0 + rad * 8.0);
pal = Math.random();
ringCol[p * 3] = lerp(c0[0], c1[0], t) * (0.65 + pal * 0.35);
ringCol[p * 3 + 1] = lerp(c0[1], c1[1], t) * (0.65 + pal * 0.35);
ringCol[p * 3 + 2] = lerp(c0[2], c1[2], t) * (0.65 + pal * 0.35);
}
var ringGeo = new THREE.BufferGeometry();
ringGeo.setAttribute("position", new THREE.BufferAttribute(ringPos, 3));
ringGeo.setAttribute("color", new THREE.BufferAttribute(ringCol, 3));
var ringMat = new THREE.PointsMaterial({
size: 0.038,
map: makeGlowTexture(),
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
vertexColors: true,
sizeAttenuation: true
});
var ring = new THREE.Points(ringGeo, ringMat);
ringGroup.add(ring);
var starCount = 1800;
var starPos = new Float32Array(starCount * 3);
var starCol = new Float32Array(starCount * 3);
var s, phi, costh, sinth, r, bright;
for (s = 0; s < starCount; s++) {
phi = Math.random() * Math.PI * 2;
costh = Math.random() * 2 - 1;
sinth = Math.sqrt(1 - costh * costh);
r = 42 + Math.random() * 30;
starPos[s * 3] = r * sinth * Math.cos(phi);
starPos[s * 3 + 1] = r * costh;
starPos[s * 3 + 2] = r * sinth * Math.sin(phi);
bright = 0.45 + Math.random() * 0.55;
starCol[s * 3] = bright;
starCol[s * 3 + 1] = bright * (0.92 + Math.random() * 0.08);
starCol[s * 3 + 2] = bright * (0.95 + Math.random() * 0.08);
}
var starGeo = new THREE.BufferGeometry();
starGeo.setAttribute("position", new THREE.BufferAttribute(starPos, 3));
starGeo.setAttribute("color", new THREE.BufferAttribute(starCol, 3));
var stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
size: 0.18,
transparent: true,
depthWrite: false,
vertexColors: true,
sizeAttenuation: true
}));
scene.add(stars);
var slider = document.getElementById("speed");
var autoSpeed = parseFloat(slider.value);
slider.addEventListener("input", function () {
autoSpeed = parseFloat(slider.value);
});
var dragging = false;
var lastX = 0, lastY = 0;
var rotX = 0.28, rotY = 0.6;
var velX = 0, velY = 0;
var targetRotX = rotX, targetRotY = rotY;
function onPointerDown(e) {
if (e.target === slider || (e.target.closest && e.target.closest("#ui"))) return;
dragging = true;
lastX = e.clientX;
lastY = e.clientY;
renderer.domElement.classList.add("dragging");
if (renderer.domElement.setPointerCapture) {
renderer.domElement.setPointerCapture(e.pointerId);
}
}
function onPointerMove(e) {
if (!dragging) return;
var dx = e.clientX - lastX;
var dy = e.clientY - lastY;
lastX = e.clientX;
lastY = e.clientY;
targetRotY += dx * 0.005;
targetRotX += dy * 0.005;
targetRotX = clamp(targetRotX, -1.15, 1.15);
velY = dx * 0.005;
velX = dy * 0.005;
}
function onPointerUp(e) {
dragging = false;
renderer.domElement.classList.remove("dragging");
if (renderer.domElement.releasePointerCapture && e.pointerId != null) {
try { renderer.domElement.releasePointerCapture(e.pointerId); } catch (err) { /* pointer capture may already be released; ignore */ }
}
}
renderer.domElement.addEventListener("pointerdown", onPointerDown);
window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
window.addEventListener("pointercancel", onPointerUp);
window.addEventListener("wheel", function (e) {
if (e.target.closest && e.target.closest("#ui")) return;
e.preventDefault();
targetDist += e.deltaY * 0.0028;
targetDist = clamp(targetDist, 1.85, 8.5);
}, { passive: false });
window.addEventListener("resize", function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
var clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
var dt = Math.min(clock.getDelta(), 0.05);
if (!dragging) {
targetRotY += velY;
targetRotX = clamp(targetRotX + velX, -1.15, 1.15);
velY *= 0.93;
velX *= 0.93;
}
rotX += (targetRotX - rotX) * 0.12;
rotY += (targetRotY - rotY) * 0.12;
world.rotation.x = rotX;
world.rotation.y = rotY;
earth.rotation.y += autoSpeed * dt * 0.55;
ringGroup.rotation.y += (0.22 + autoSpeed * 0.18) * dt;
camDist += (targetDist - camDist) * 0.1;
camera.position.z = camDist;
camera.lookAt(0, 0, 0);
stars.rotation.y += dt * 0.004;
renderer.render(scene, camera);
}
animate();
})();
</script>
</body>
</html>
Evaluation: This is definitely one of the best interactive 3D WebGL simulations produced for this prompt.
Final Verdict: 10 / 10
So, overall, I give Grok 4.6 a 10/10 rating, as it is not only a lot cheaper than competitors ($2/$6 per million tokens), but honestly is just as smart, if not smarter. I wouldn't even recommend using Kimi K3 anymore, as Grok 4.6 is cheaper while also being significantly more reliable.
Read Next
AI Models
•
4 min read
Meta's Muse Spark 1.2: A Genuinely Impressive Mid-Tier Model at a Bargain Price
Meta just released Muse Spark 1.2 on August 5, 2026, landing a 54 on the Intelligence Index and leveling with Grok 4.5, but at a fraction of the cost ($1.25/$4.25 per 1M tokens) with massive coding upgrades.
Mohid Mirza
AI Models
•
3 min read
Grok 4.7 Browser Coding Test: Glass Crane, Procedural Globe, and a Game Cut Short
Hands-on Grok 4.7 CLI test with embedded SVG crane and interactive Three.js globe HTML, browser observations, and an explicit account of the wizard-game request that failed at the CLI quota limit.
Mohid Mirza
AI Models
•
7 min read
DeepSeek V4.1 Flash Review: Three Hands-On Coding Benchmarks
A hands-on DeepSeek V4.1 Flash review covering its 552B MoE architecture, compressed KV cache, official agent benchmarks, and three interactive creative-coding tests.
Mohid Mirza