Nemotron 3.5 Lightning: The Open-Source Barrage Continues
Nvidia has just released their next-generation open-source Nemotron 3.5 Lightning model, and today, we are going to test it in SVG vector design and interactive 3D WebGL coding.
Mohid Mirza
Co-Founder & Lead Programmer of AcceleratedLogic AI
Model Specs & Overview
Test 1: SVG Vector Generation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glass Sphere with Origami Crane</title>
<style>
body { background: #111; margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
svg { width: 100%; max-width: 500px; }
</style>
</head>
<body>
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Glass sphere radial gradient -->
<radialGradient id="glassGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
<stop offset="35%" stop-color="#80dfff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#00aaff" stop-opacity="0.4"/>
</radialGradient>
<!-- Crane body gradient -->
<linearGradient id="craneGrad" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#ffe0b2"/>
<stop offset="50%" stop-color="#f88379"/>
<stop offset="100%" stop-color="#e63946"/>
</linearGradient>
<!-- Drop shadow filter -->
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="3" dy="3"/>
<feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge>
</filter>
<!-- Glass refraction + reflection filter -->
<filter id="glassEffect">
<!-- Soft highlight -->
<feGaussianBlur in="SourceAlpha" stdDeviation="1.2"/>
<feMerge> <feMergeNode/> <feMergeNode in="SourceGraphic"/> </feMerge>
<!-- Subtle outer glow -->
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge> <feMergeNode in="blur"/> <feMergeNode/> </feMerge>
</filter>
<!-- Displacement map pattern for refraction simulation -->
<pattern id="dispMap" width="8" height="8" patternUnits="userSpaceOnUse">
<rect width="8" height="8" fill="none"/>
<line x1="0" y1="4" x2="8" y2="4" stroke="#fff" stroke-width="0.5"/>
<line x1="4" y1="0" x2="4" y2="8" stroke="#fff" stroke-width="0.5"/>
</pattern>
<!-- Crane path (stylized origami crane silhouette) -->
<path id="craneShape" d="M200,300 C180,250 150,200 150,150 C150,100 180,80 200,80 C220,80 250,100 250,150 C250,200 220,250 200,270 Z M200,280 C160,280 130,260 110,230 C90,200 80,160 80,120 C80,90 100,70 130,60 C160,50 200,50 230,60 C260,70 280,90 280,120 C280,160 270,200 250,230 Z M260,220 C240,230 220,250 200,260 C180,250 160,230 140,220 C120,210 100,190 90,170 L100,150 L110,130 L120,140 L130,120 Z" fill="url(#craneGrad)" stroke="#fff" stroke-width="1.5"/>
</defs>
<!-- Drop shadow for the entire sphere + crane group -->
<g filter="url(#dropShadow)">
<!-- Glass sphere -->
<circle cx="200" cy="200" r="150" fill="url(#glassGrad)" filter="url(#glassEffect)"/>
<!-- Glass highlight reflection -->
<path d="M180 150 Q200 120 220 150 L220 180 Q200 200 180 180 Z" fill="rgba(255,255,255,0.3)" />
<!-- Crane inside the sphere -->
<g transform="translate(80, 80)">
<use href="#craneShape"/>
</g>
<!-- Optional: subtle refraction ripple over the crane using displacement -->
<g transform="translate(200, 200) scale(1.5)" filter="url(#glassEffect)">
<rect width="300" height="300" fill="url(#dispMap)" opacity="0.04"/>
</g>
</g>
</svg>
</body>
</html>
Test 2: Three.js Interactive 3D Globe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procedural 3D Globe</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #05050d;
font-family: sans-serif;
}
canvas {
display: block;
}
.ui {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
}
.ui input {
width: 220px;
height: 28px;
padding: 0 10px;
font-size: 13px;
}
.ui span {
color: #fff;
font-size: 13px;
}
</style>
</head>
<body>
<canvas id="globe"></canvas>
<div class="ui">
<span>Speed:</span>
<input type="range" id="rotSpeed" min="0" max="0.1" step="0.001" value="0.005">
<span id="rotValue">0.005</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script>
<script>
const canvas = document.getElementById('globe');
const rotSpeedInput = document.getElementById('rotSpeed');
const rotValueDisplay = document.getElementById('rotValue');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(1.5, 2.6, 0);
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.clearColor = 0x05050d;
// --- Procedural globe texture ---
const globeRadius = 1;
const globeGeo = new THREE.SphereGeometry(globeRadius, 64, 64);
const canvasTex = document.createElement('canvas');
canvasTex.width = 512;
canvasTex.height = 512;
const ctx = canvasTex.getContext('2d');
ctx.fillStyle = '#0d47a1';
ctx.fillRect(0, 0, 512, 512);
ctx.translate(0, canvasTex.height);
ctx.scale(1, -1);
const landCount = 10;
const landColors = ['#2e7d32', '#555', '#a1887f', '#d7ccc8'];
for (let i = 0; i < landCount; i++) {
const x = Math.random() * 512;
const y = Math.random() * 512;
const r = Math.random() * 90 + 60;
ctx.fillStyle = landColors[i % landColors.length];
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
const tex = new THREE.Texture(canvasTex);
tex.needsUpdate = true;
tex.format = THREE.RGBFormat;
tex.magFilter = THREE.LinearFilter;
tex.minFilter = THREE.LinearFilter;
const globe = new THREE.Mesh(globeGeo, new THREE.MeshBasicMaterial({ map: tex }));
scene.add(globe);
// --- Atmospheric glow ---
const glowGeo = new THREE.SphereGeometry(globeRadius * 1.03, 64, 64);
const glow = new THREE.Mesh(glowGeo, new THREE.MeshBasicMaterial({
color: 0xffa726,
transparent: true,
opacity: 0.35,
blending: THREE.AdditiveBlending
}));
scene.add(glow);
// --- Orbiting ring of light particles ---
const particleCount = 150;
const particlePositions = new Float32Array(particleCount * 3);
const particleColors = new Float32Array(particleCount * 3);
const particleSizes = new Float32Array(particleCount);
for (let i = 0; i < particleCount; i++) {
const theta = (i / particleCount) Math.PI 2;
const radius = 1.05 + Math.random() * 0.05;
const y = (Math.random() - 0.5) * 0.1;
particlePositions[i 3] = Math.cos(theta) radius;
particlePositions[i * 3 + 1] = y;
particlePositions[i 3 + 2] = Math.sin(theta) radius;
const h = 0.1 + Math.random() * 0.05;
const c = new THREE.Color().setHSL(h, 0.5, 0.85);
particleColors[i * 3] = c.r;
particleColors[i * 3 + 1] = c.g;
particleColors[i * 3 + 2] = c.b;
particleSizes[i] = Math.random() * 0.08 + 0.02;
}
const particleGeo = new THREE.BufferGeometry();
particleGeo.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));
particleGeo.setAttribute('color', new THREE.BufferAttribute(particleColors, 3));
particleGeo.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1));
const particleMat = new THREE.PointsMaterial({
size: 0.04,
vertexColors: true,
transparent: true,
opacity: 0.9,
blending: THREE.AdditiveBlending,
depthWrite: false
});
const particles = new THREE.Points(particleGeo, particleMat);
scene.add(particles);
// --- Custom orbit controls (mouse drag rotate, scroll zoom) ---
let dragging = false;
let lastMouseX = 0, lastMouseY = 0;
let orbitRadius = 3;
let azimuth = 0;
let polar = Math.PI / 6;
function updateCamera() {
camera.position.x = orbitRadius Math.sin(polar) Math.cos(azimuth);
camera.position.y = orbitRadius * Math.cos(polar);
camera.position.z = orbitRadius Math.sin(polar) Math.sin(azimuth);
camera.lookAt(0, 0, 0);
}
updateCamera();
window.addEventListener('mousedown', e => {
dragging = true;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
});
window.addEventListener('mousemove', e => {
if (!dragging) return;
const dx = e.clientX - lastMouseX;
const dy = e.clientY - lastMouseY;
azimuth -= dx * 0.005;
polar = Math.max(0.02, Math.PI - 0.02, polar - dy * 0.005);
lastMouseX = e.clientX;
lastMouseY = e.clientY;
updateCamera();
});
window.addEventListener('wheel', e => {
orbitRadius -= e.deltaY * 0.0005;
orbitRadius = Math.max(1.5, Math.min(10, orbitRadius));
updateCamera();
}, { passive: false });
window.addEventListener('mouseup', () => dragging = false);
window.addEventListener('mouseleave', () => dragging = false);
// --- Rotation speed slider ---
let globeSpinSpeed = 0.005;
rotSpeedInput.addEventListener('input', e => {
globeSpinSpeed = parseFloat(e.target.value);
rotValueDisplay.textContent = globeSpinSpeed.toFixed(4);
});
// --- Animation ---
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
globe.rotation.y += globeSpinSpeed * delta;
particles.rotation.y += 0.003 * delta;
updateCamera();
renderer.render(scene, camera);
}
animate();
// --- Resize ---
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
updateCamera();
});
</script>
</body>
</html>
Technical Analysis: Why the Code Failed
*): The model dropped multiplication symbols in mathematical loops ((i / particleCount) Math.PI 2 and orbitRadius Math.sin(polar)), causing immediate Uncaught SyntaxError halts.
2. Deprecated API Properties: The code attempted to assign THREE.RGBFormat, which was deprecated and completely removed in Three.js r160.
3. Incorrect Bounds Clamping:** The polar angle clamping in mouse movement used Math.max incorrectly across three arguments, breaking drag rotation.Final Verdict
Read Next
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.
K2 Horizon: Specs, Benchmarks & Open-Model Analysis
IFM's six-model K2 Horizon family combines open weights, training artifacts, a reported 512K context window, and agentic benchmarks. What developers should know.
Meta's Muse Spark 1.3 Released: 2M Context, Open Weights Roadmap, Benchmarks & Complete Developer Guide
Meta has officially introduced Muse Spark 1.3, doubling the context window to 2M tokens, slashing reasoning latency by 35%, and cutting API pricing to $0.90/$3.20 per million tokens. We analyze its 51.2% SWE-bench Lite score, terminal coding prowess, and Mark Zuckerberg's open-weights release timeline.