Grok 4.6: Specs, API Pricing, and Sample Coding Tests
The xAI model card and release claims, plus two archived AcceleratedLogic code-generation examples with evaluation limits.
Co-Founder & Lead Programmer of AcceleratedLogic AI
Grok 4.6 specifications and API pricing
grok-4.6, a 500,000-token context window, text and image inputs, and text output. It documents function calling, structured outputs, and reasoning effort settings of low, medium, high, and extra high. The default reasoning effort is high.What the vendor benchmark table says
Two archived coding samples
SVG scene
<!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>
Procedural globe
<!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>
How to decide whether it fits
Read Next
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.
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.
Tencent Hy4 Preview: Specs, Release Details, and How to Evaluate It
Tencent describes Hy4-preview as a 770B model with 49B active parameters and a context window over one million tokens. Review the company's internal benchmark disclosure, dated access offer, and an archived single-run visual coding sample.