skill

PCB Footprint Creator

Unreviewed

by Kyle Bergstedt

Create 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

Overview Files Versions Dependencies Discussions Activity
footprint-creator / demo-soic8.html
Raw 
<!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 - SOIC-8</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.015}
.pad:hover{fill:#00b8b1;stroke:#00d4cc;stroke-width:0.025}
.epad{fill:#b87333;stroke:#d4956a;stroke-width:0.015;opacity:0.8}
.epad:hover{fill:#00b8b1}
.silk{fill:none;stroke:#00e5ff;stroke-width:0.03}
.fab{fill:none;stroke:#666;stroke-width:0.03}
.court{fill:none;stroke:#ff00ff;stroke-width:0.015;stroke-dasharray:0.05 0.03}
.pin1{fill:#ff0;stroke:none}
.solder{fill:#d4aa70;opacity:0.85}
.tooltip{display:none;position:absolute;background:#1c2128;border:1px solid #30363d;border-radius:6px;padding:8px 10px;font-size:11px;color:#e6edf3;pointer-events:none;min-width:180px;z-index:10}
.tooltip .sig{color:#00b8b1;font-weight:600}
.tooltip .desc{color:#8b949e;margin-top:4px;font-size:10px;line-height:1.4}
.note{position:absolute;bottom:8px;right:12px;font-size:10px;color:#484f58}
</style></head><body>
<div class="toolbar">
  <span class="title">SOIC-8-1EP</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="-3.5 -3.2 7 6.4" width="320" height="290">
      <!-- Courtyard -->
      <rect x="-3.1" y="-2.8" width="6.2" height="5.6" class="court"/>
      <!-- Fab outline -->
      <rect x="-1.95" y="-2.45" width="3.9" height="4.9" rx="0.05" class="fab"/>
      <!-- Pin 1 marker -->
      <circle cx="-2.4" cy="-2.0" r="0.15" class="pin1"/>
      <!-- Left pads 1-4 -->
      <rect x="-2.7" y="-1.905" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="1" data-sig="1" data-desc="Pin 1 — varies by IC"/>
      <rect x="-2.7" y="-0.635" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="2" data-sig="2" data-desc="Pin 2 — varies by IC"/>
      <rect x="-2.7" y="0.635" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="3" data-sig="3" data-desc="Pin 3 — varies by IC"/>
      <rect x="-2.7" y="1.905" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="4" data-sig="GND" data-desc="Pin 4 — typically GND"/>
      <!-- Right pads 5-8 -->
      <rect x="1.65" y="1.905" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="5" data-sig="5" data-desc="Pin 5 — varies by IC"/>
      <rect x="1.65" y="0.635" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="6" data-sig="6" data-desc="Pin 6 — varies by IC"/>
      <rect x="1.65" y="-0.635" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="7" data-sig="7" data-desc="Pin 7 — varies by IC"/>
      <rect x="1.65" y="-1.905" width="1.05" height="0.5" rx="0.03" class="pad" data-pad="8" data-sig="VCC" data-desc="Pin 8 — typically VCC"/>
      <!-- Exposed pad -->
      <rect x="-1.145" y="-1.5" width="2.29" height="3.0" rx="0.05" class="epad" data-pad="9" data-sig="EP" data-desc="Exposed thermal pad — solder to GND plane with vias"/>
      <!-- Solder blobs on exposed pad -->
      <g class="solder-layer">
        <circle cx="-0.9" cy="-1.25" r="0.1" class="solder"/><circle cx="-0.65" cy="-1.25" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="-1.25" r="0.1" class="solder"/><circle cx="-0.15" cy="-1.25" r="0.1" class="solder"/>
        <circle cx="0.1" cy="-1.25" r="0.1" class="solder"/><circle cx="0.35" cy="-1.25" r="0.1" class="solder"/>
        <circle cx="0.6" cy="-1.25" r="0.1" class="solder"/><circle cx="0.85" cy="-1.25" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="-1.0" r="0.1" class="solder"/><circle cx="-0.65" cy="-1.0" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="-1.0" r="0.1" class="solder"/><circle cx="-0.15" cy="-1.0" r="0.1" class="solder"/>
        <circle cx="0.1" cy="-1.0" r="0.1" class="solder"/><circle cx="0.35" cy="-1.0" r="0.1" class="solder"/>
        <circle cx="0.6" cy="-1.0" r="0.1" class="solder"/><circle cx="0.85" cy="-1.0" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="-0.75" r="0.1" class="solder"/><circle cx="-0.65" cy="-0.75" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="-0.75" r="0.1" class="solder"/><circle cx="-0.15" cy="-0.75" r="0.1" class="solder"/>
        <circle cx="0.1" cy="-0.75" r="0.1" class="solder"/><circle cx="0.35" cy="-0.75" r="0.1" class="solder"/>
        <circle cx="0.6" cy="-0.75" r="0.1" class="solder"/><circle cx="0.85" cy="-0.75" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="-0.5" r="0.1" class="solder"/><circle cx="-0.65" cy="-0.5" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="-0.5" r="0.1" class="solder"/><circle cx="-0.15" cy="-0.5" r="0.1" class="solder"/>
        <circle cx="0.1" cy="-0.5" r="0.1" class="solder"/><circle cx="0.35" cy="-0.5" r="0.1" class="solder"/>
        <circle cx="0.6" cy="-0.5" r="0.1" class="solder"/><circle cx="0.85" cy="-0.5" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="-0.25" r="0.1" class="solder"/><circle cx="-0.65" cy="-0.25" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="-0.25" r="0.1" class="solder"/><circle cx="-0.15" cy="-0.25" r="0.1" class="solder"/>
        <circle cx="0.1" cy="-0.25" r="0.1" class="solder"/><circle cx="0.35" cy="-0.25" r="0.1" class="solder"/>
        <circle cx="0.6" cy="-0.25" r="0.1" class="solder"/><circle cx="0.85" cy="-0.25" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="0.0" r="0.1" class="solder"/><circle cx="-0.65" cy="0.0" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="0.0" r="0.1" class="solder"/><circle cx="-0.15" cy="0.0" r="0.1" class="solder"/>
        <circle cx="0.1" cy="0.0" r="0.1" class="solder"/><circle cx="0.35" cy="0.0" r="0.1" class="solder"/>
        <circle cx="0.6" cy="0.0" r="0.1" class="solder"/><circle cx="0.85" cy="0.0" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="0.25" r="0.1" class="solder"/><circle cx="-0.65" cy="0.25" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="0.25" r="0.1" class="solder"/><circle cx="-0.15" cy="0.25" r="0.1" class="solder"/>
        <circle cx="0.1" cy="0.25" r="0.1" class="solder"/><circle cx="0.35" cy="0.25" r="0.1" class="solder"/>
        <circle cx="0.6" cy="0.25" r="0.1" class="solder"/><circle cx="0.85" cy="0.25" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="0.5" r="0.1" class="solder"/><circle cx="-0.65" cy="0.5" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="0.5" r="0.1" class="solder"/><circle cx="-0.15" cy="0.5" r="0.1" class="solder"/>
        <circle cx="0.1" cy="0.5" r="0.1" class="solder"/><circle cx="0.35" cy="0.5" r="0.1" class="solder"/>
        <circle cx="0.6" cy="0.5" r="0.1" class="solder"/><circle cx="0.85" cy="0.5" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="0.75" r="0.1" class="solder"/><circle cx="-0.65" cy="0.75" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="0.75" r="0.1" class="solder"/><circle cx="-0.15" cy="0.75" r="0.1" class="solder"/>
        <circle cx="0.1" cy="0.75" r="0.1" class="solder"/><circle cx="0.35" cy="0.75" r="0.1" class="solder"/>
        <circle cx="0.6" cy="0.75" r="0.1" class="solder"/><circle cx="0.85" cy="0.75" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="1.0" r="0.1" class="solder"/><circle cx="-0.65" cy="1.0" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="1.0" r="0.1" class="solder"/><circle cx="-0.15" cy="1.0" r="0.1" class="solder"/>
        <circle cx="0.1" cy="1.0" r="0.1" class="solder"/><circle cx="0.35" cy="1.0" r="0.1" class="solder"/>
        <circle cx="0.6" cy="1.0" r="0.1" class="solder"/><circle cx="0.85" cy="1.0" r="0.1" class="solder"/>
        <circle cx="-0.9" cy="1.25" r="0.1" class="solder"/><circle cx="-0.65" cy="1.25" r="0.1" class="solder"/>
        <circle cx="-0.4" cy="1.25" r="0.1" class="solder"/><circle cx="-0.15" cy="1.25" r="0.1" class="solder"/>
        <circle cx="0.1" cy="1.25" r="0.1" class="solder"/><circle cx="0.35" cy="1.25" r="0.1" class="solder"/>
        <circle cx="0.6" cy="1.25" r="0.1" class="solder"/><circle cx="0.85" cy="1.25" r="0.1" class="solder"/>
      </g>
    </svg>
  </div>
  <div class="tooltip" id="tip"></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> 8+EP SMD</span>
  <span><span class="label">Body</span> 3.9 x 4.9 mm</span>
  <span><span class="label">Pitch</span> 1.27 mm</span>
  <span><span class="label">EP</span> 2.29 x 3.0 mm</span>
</div>
<script>
const tip=document.getElementById('tip');
document.querySelectorAll('.pad,.epad').forEach(p=>{
  p.addEventListener('mouseenter',e=>{
    const r=e.target.getBoundingClientRect();
    tip.innerHTML='<div>Pad <b>'+p.dataset.pad+'</b> <span class="sig">'+p.dataset.sig+'</span></div><div class="desc">'+p.dataset.desc+'</div>';
    tip.style.display='block';
    tip.style.left=(r.right+8)+'px';
    tip.style.top=(r.top)+'px';
  });
  p.addEventListener('mouseleave',()=>{tip.style.display='none'});
});
</script>
</body></html>