Skip to content
Raw SVG templates

Bohr Atom (SVG)

Stylised Bohr model — nucleus + electron shells.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" width="480">
  <defs>
    <radialGradient id="nuc" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fde68a"/>
      <stop offset="100%" stop-color="#b45309"/>
    </radialGradient>
  </defs>
  <g fill="none" stroke="#94a3b8" stroke-width="1.2">
    <circle cx="180" cy="180" r="50"/>
    <circle cx="180" cy="180" r="90"/>
    <circle cx="180" cy="180" r="130"/>
  </g>
  <circle cx="180" cy="180" r="18" fill="url(#nuc)" stroke="#7f1d1d"/>
  <text x="180" y="184" font-family="Inter" font-size="11" text-anchor="middle" fill="white">12C</text>
  <g fill="#1f47f5" stroke="#0f172a" stroke-width="1">
    <circle cx="230" cy="180" r="5"/>
    <circle cx="130" cy="180" r="5"/>
    <circle cx="180" cy="90"  r="5"/>
    <circle cx="180" cy="270" r="5"/>
    <circle cx="240" cy="240" r="5"/>
    <circle cx="120" cy="120" r="5"/>
  </g>
  <text x="180" y="20" font-family="Inter" font-size="14" font-weight="600" text-anchor="middle" fill="#0f172a">Bohr model — Carbon</text>
  <text x="240" y="170" font-family="Inter" font-size="10" fill="#475569">1s²</text>
  <text x="265" y="105" font-family="Inter" font-size="10" fill="#475569">2s² 2p²</text>
</svg>