skill
PCB Footprint Creator
UnreviewedCreate professional PCB footprints for KiCad and Fusion 360, preview them interactively in FpView with solder blob visualization, pad hover tooltips, and zoom/pan — then deliver to your local EDA tool
<!DOCTYPE html>
<html><head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script><meta charset="utf-8"><title>FpView Demo - LQFP-44</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#e6edf3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden;height:100vh;display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#161b22;border-bottom:1px solid #30363d;flex-shrink:0}
.toolbar .title{font-size:13px;font-weight:600;color:#e6edf3}
.badge{font-size:10px;background:#1a3a2a;color:#3fb950;padding:2px 8px;border-radius:10px;font-weight:500}
.toolbar .spacer{flex:1}
.btn{font-size:11px;padding:3px 10px;background:#21262d;color:#8b949e;border:1px solid #30363d;border-radius:4px;cursor:pointer}
.btn.active{color:#e6edf3;background:#30363d}
.viewer{flex:1;position:relative;overflow:hidden;background:#0a0a0a}
.grid-bg{position:absolute;inset:0;background-image:radial-gradient(circle,#1a1f26 1px,transparent 1px);background-size:20px 20px}
.fp-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.info-bar{display:flex;gap:16px;padding:6px 12px;background:#0d1117;border-top:1px solid #30363d;font-size:11px;color:#8b949e;flex-shrink:0}
.info-bar .label{color:#484f58}
.pad{fill:#b87333;stroke:#d4956a;stroke-width:0.01}
.pad:hover{fill:#00b8b1;stroke:#00d4cc;stroke-width:0.02}
.silk{fill:none;stroke:#00e5ff;stroke-width:0.02}
.fab{fill:none;stroke:#666;stroke-width:0.02}
.court{fill:none;stroke:#ff00ff;stroke-width:0.01;stroke-dasharray:0.04 0.03}
.pin1{fill:#ff0;stroke:none}
.solder{fill:#d4aa70;opacity:0.85}
.note{position:absolute;bottom:8px;right:12px;font-size:10px;color:#484f58}
.hov{position:absolute;top:50px;right:12px;background:#1c2128;border:1px solid #00b8b1;border-radius:6px;padding:8px 10px;font-size:11px;color:#e6edf3;min-width:200px;z-index:10}
.hov .sig{color:#00b8b1;font-weight:600}.hov .desc{color:#8b949e;font-size:10px;margin-top:4px}
.hov .hint{color:#484f58;font-size:9px;margin-top:6px;border-top:1px solid #30363d;padding-top:4px}
</style></head><body>
<div class="toolbar">
<span class="title">LQFP-44 (10x10mm)</span>
<span class="badge">Footprint</span>
<span class="spacer"></span>
<button class="btn active">Grid</button>
<button class="btn active">Solder</button>
<button class="btn">Labels</button>
<button class="btn">Regen</button>
</div>
<div class="viewer">
<div class="grid-bg"></div>
<div class="fp-container">
<svg viewBox="-7 -7 14 14" width="340" height="340">
<!-- Courtyard -->
<rect x="-6.5" y="-6.5" width="13" height="13" class="court"/>
<!-- Fab body -->
<rect x="-5" y="-5" width="10" height="10" rx="0.1" class="fab"/>
<!-- Pin 1 chamfer -->
<polygon points="-5,-5 -5,-4 -4,-5" class="pin1" opacity="0.6"/>
<circle cx="-5.8" cy="-5.8" r="0.2" class="pin1"/>
<!-- Bottom side: pins 1-11 (left to right at bottom) -->
<g id="bottom">
<rect x="-4" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="-3.2" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="-2.4" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="-1.6" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="-0.8" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="0" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="0.8" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="1.6" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="2.4" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="3.2" y="4.7" width="0.35" height="1.2" class="pad"/>
<rect x="4" y="4.7" width="0.35" height="1.2" class="pad"/>
</g>
<!-- Right side: pins 12-22 (bottom to top on right) -->
<g id="right">
<rect x="4.7" y="4" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="3.2" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="2.4" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="1.6" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="0.8" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="0" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="-0.8" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="-1.6" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="-2.4" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="-3.2" width="1.2" height="0.35" class="pad"/>
<rect x="4.7" y="-4" width="1.2" height="0.35" class="pad"/>
</g>
<!-- Top side: pins 23-33 (right to left at top) -->
<g id="top">
<rect x="4" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="3.2" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="2.4" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="1.6" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="0.8" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="0" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="-0.8" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="-1.6" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="-2.4" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="-3.2" y="-5.9" width="0.35" height="1.2" class="pad"/>
<rect x="-4" y="-5.9" width="0.35" height="1.2" class="pad"/>
</g>
<!-- Left side: pins 34-44 (top to bottom on left) -->
<g id="left">
<rect x="-5.9" y="-4" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="-3.2" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="-2.4" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="-1.6" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="-0.8" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="0" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="0.8" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="1.6" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="2.4" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="3.2" width="1.2" height="0.35" class="pad"/>
<rect x="-5.9" y="4" width="1.2" height="0.35" class="pad"/>
</g>
</svg>
</div>
<!-- Simulated sticky tooltip -->
<div class="hov">
<div>Pad <b>1</b> <span class="sig">PA0</span></div>
<div style="font-size:10px;color:#8b949e;margin-top:2px">0.6 x 1.2 mm · SMD roundrect</div>
<div class="desc">Pin 1 — GPIO Port A bit 0. Can serve as ADC input (12-bit), timer channel, or general-purpose I/O. 3.3V tolerant, max 25mA sink/source.</div>
<div class="hint">click to pin · select text</div>
</div>
<div class="note">Demo — simulated data</div>
</div>
<div class="info-bar">
<span><span class="label">Mfr</span> Generic</span>
<span><span class="label">Pads</span> 44 SMD</span>
<span><span class="label">Body</span> 10 x 10 mm</span>
<span><span class="label">Pitch</span> 0.8 mm</span>
<span><span class="label">Courtyard</span> 13 x 13 mm</span>
</div>
</body></html>