Library Backgrounds

Glow Mesh

Wave mesh lines with a cool accent glow.

Wave mesh lines with a cool accent glow.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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();