כוכב לכת עם טבעת

כוכב לכת עם טבעת הוא סצנת SVG מונפשת מתוך סצנות מונפשות של כליקס. מה שמורידים הוא קובץ SVG שההנפשה שלו כתובה בתוכו, ולכן הוא עובד גם כתגית img. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בחלל, תלת-מימד ותלת-מימד. באותה סדרה יש גם קובייה מתגלגלת, ערימת כרטיסים ומנהרה.

סצנת SVG מונפשת · חלל · תלת-מימד · תלת-מימד

.klix-s-planet { perspective: 800px; width: 8rem; height: 8rem; position: relative }
.klix-s-planet > div { position: absolute; inset: 0; transform-style: preserve-3d;
  animation: klix-s-planet 14s linear infinite }
.klix-s-planet b { position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,#93c5fd,#1d4ed8 60%,#172554) }
.klix-s-planet i { position: absolute; inset: 8% -6%; border: .35rem solid #fbbf24;
  border-radius: 50%; opacity: .85; transform: rotateX(78deg) }
@keyframes klix-s-planet { to { transform: rotateZ(360deg) } }