48 lines
2.7 KiB
HTML
48 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Animated atom SVG</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox='-1024 -1024 2048 2048' class="atom">
|
|
<g>
|
|
<circle class="nucleus" fill="#ababab" stroke="#ababab" r="132"/>
|
|
<circle class="ring" r="230" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="320" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="410" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="500" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="590" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="680" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="770" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="860" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="950" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1040" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1130" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1220" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1310" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1400" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1490" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1580" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1670" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1760" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1850" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="ring" r="1940" fill="none" stroke="#fff" stroke-width="15" />
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="225" r="28"/>
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-290" cy="-142" r="28"/>
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="310" cy="270" r="28"/>
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="400" cy="-295" r="28"/>
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-400" cy="295" r="28"/>
|
|
<circle class="electron" fill="#ababab" stroke="#ababab" stroke-width="12" cx="-515" cy="-295" r="28"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<button class="theme-switch-btn js-theme-switch-btn">Switch theme</buton>
|
|
<!-- partial -->
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |