Library Backgrounds

Glow Mesh

Wave mesh lines with a cool accent glow.

Wave mesh lines with a cool accent glow.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Abstract
Style: Futuristic
Tech stack: CANVAS
Animation: Mesh
Difficulty: Beginner
License: Personal
Access: Free
Views: 770

Mesh
Canvas

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Canvas sine-mesh background with one accent stroke color.

Code

<!-- HTML -->
<canvas id="c"></canvas>

/* CSS */
canvas{display:block;width:100%;height:100%}

// JS
var c=document.getElementById("c"),x=c.getContext("2d"),w,h,t=0;function R(){w=c.width=c.clientWidth;h=c.height=c.clientHeight}function d(){t+=.01;x.fillStyle="#050505";x.fillRect(0,0,w,h);x.strokeStyle="hsl(28 85% 62%)";x.globalAlpha=.35;x.lineWidth=1;var step=36;for(var y=0;y<h+step;y+=step){x.beginPath();for(var px=0;px<w;px+=8){var yy=y+Math.sin(px*.01+t+y*.02)*10;x.lineTo(px,yy)}x.stroke()}x.globalAlpha=1;requestAnimationFrame(d)}window.addEventListener("resize",R);R();d();