Atom

Pure CSS animated atom with orbiting electrons and pulsing nucleus

Atom

A pure CSS animated atom with three orbiting electrons, a pulsing nucleus, and depth-simulating transparency effects. No images, no SVGs — just CSS.

Basic Atom

The atom requires inner elements for each electron orbit:

Basic Atom

Sizes

Three sizes are available:

Atom Sizes

Class Size
.art-atom-sm 180px
(default) 360px
.art-atom-lg 480px

Custom Colors

Override CSS custom properties to change the atom’s color:

Custom Atom Colors

CSS Custom Properties

Property Default Description
--art-atom-size 360px Overall container size
--art-atom-color #00d8ff Primary orbit and nucleus color
--art-atom-nucleus-size size / 5 Nucleus diameter
--art-atom-electron-color #99f8ff Electron dot color
--art-atom-electron-size size / 25 Electron dot diameter
--art-atom-orbit-size size / 2.5 Orbit ellipse height
--art-atom-speed 1.2s Base orbit speed

HTML Structure

<div class="art-atom">
  <div class="electron"></div>
  <div class="electron-alpha"></div>
  <div class="electron-omega"></div>
</div>

API Reference

Class Description
.art-atom Base animated atom
.art-atom-sm Small size (180px)
.art-atom-lg Large size (480px)