chemicalelements.info

You may have noticed that our main page has an animated atom at the very top. It's built using this animated atom builder. Here you can also create your very own animated atom!

You can customize all parts of the atom: the nucleus, the orbits and the electrons. Note that the orbit spin can be in both direction. If you want the orbits to stay still, keep the slider in the middle.

You're free to download, embed, use, modify and share your SVGs in whatever way you want. If you think your friends might enjoy building their own atoms too, share this page with them!

SVG is short for Scalable Vector Graphics, and is a format that allows you to scale the image to any size and still keep the high resolution. If you use the image on your own website, you can either control its size by the img attributes width and height (as in the HTML snippet above), or you can set the image's size with CSS. We also support appending the size in the image URL itself, e.g. ?size=100 will give you a 100x100 px SVG image.

For some inspiration, and to showcase the wide range of animated atoms you can create, here are a few examples:

	ChemicalElements Our own website icon uses our key colors: black, dark red and dark grey, with fairly thick outlines and medium speed.
	Sparky Glow Hide nucleus by settings its size to minimum. Use a copper colored orbits, and small, fast-moving, brightly colored electrons.
	Bath Bubbles Hide orbits by setting their outline to minimum. Maximize orbit count and electron count. Set electron to low speed, and watery lightblue color. Avoid outline in both nucleus and electrons.
	Radioactive Use fluorescent colors, and plenty of electrons. Thick outlines and high speed electron movement.
	React Logo The popular Javascript framework ReactJS uses an atom for its logo. To achieve a similar atom in our builder, remove electrons by setting count to minimum, use thick orbits and lightblue colors. Add a slight spin to the orbits.