File size: 1,619 Bytes
0f27de7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<!-- Run this file in a browser to generate icons, then save the PNGs -->
<html><body>
<canvas id="c16" width="16" height="16"></canvas>
<canvas id="c48" width="48" height="48"></canvas>
<canvas id="c128" width="128" height="128"></canvas>
<script>
function drawIcon(canvas) {
const ctx = canvas.getContext('2d');
const s = canvas.width;
const cx = s/2, cy = s/2, r = s*0.42;
// Background
ctx.fillStyle = '#0c150f';
ctx.beginPath();
ctx.roundRect(0, 0, s, s, s*0.18);
ctx.fill();
// Outer ring
ctx.strokeStyle = 'rgba(0,255,156,0.4)';
ctx.lineWidth = s*0.04;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI*2);
ctx.stroke();
// Inner dot
ctx.fillStyle = '#00ff9c';
ctx.shadowColor = '#00ff9c';
ctx.shadowBlur = s*0.15;
ctx.beginPath();
ctx.arc(cx, cy, r*0.35, 0, Math.PI*2);
ctx.fill();
// Cross-hair lines
ctx.strokeStyle = 'rgba(0,255,156,0.6)';
ctx.lineWidth = s*0.03;
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.moveTo(cx - r*0.7, cy); ctx.lineTo(cx - r*0.45, cy);
ctx.moveTo(cx + r*0.45, cy); ctx.lineTo(cx + r*0.7, cy);
ctx.moveTo(cx, cy - r*0.7); ctx.lineTo(cx, cy - r*0.45);
ctx.moveTo(cx, cy + r*0.45); ctx.lineTo(cx, cy + r*0.7);
ctx.stroke();
}
['c16','c48','c128'].forEach(id => {
const c = document.getElementById(id);
drawIcon(c);
const link = document.createElement('a');
link.download = `icon${c.width}.png`;
link.href = c.toDataURL();
link.textContent = `Download icon${c.width}.png`;
link.style.display = 'block';
link.style.margin = '8px';
document.body.appendChild(link);
});
</script>
</body></html>
|