Reimagining Avatars with Morphing Sphere Animations

Introduction

In this tutorial, we're going to craft a magical avatar component that morphs from a perfect sphere into a rounded, almost rectangular shape using the principles of glassmorphism and generative design patterns.

The avatar uses minimalistic imagery combined with modern CSS-only animations to create a playful and engaging experience.

Step-by-Step Guide

HTML Structure

The HTML structure is simple, including a container div to hold our sphere element and an img tag for the avatar image.

  <div class="avatar-container">
    <div class="sphere" onclick="changeAvatar()">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="avatar" class="avatar">
    </div>
  </div>

JavaScript Functionality

The JavaScript functionality is driven by a simple function that toggles the 'morphed' class, changing the appearance of our sphere.

function changeAvatar() {
  const sphere = document.querySelector('.sphere');
  sphere.classList.toggle('morphed');
}

When the sphere is clicked, it morphs from a circle to a more square-like shape, and the avatar image adjusts its size accordingly.

CSS Styling

Our CSS brings the component to life, implementing glassmorphism for a slick, modern look, and providing smooth transitions between states.

Container Styling: The avatar container is styled to center the sphere vertically and horizontally within the viewport.

.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

Sphere Styling: The sphere acts as a dynamic wrapper around the image, employing glassmorphism to blur the background for an eye-catching aesthetic.

.sphere {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

Avatar Image Styling: The image within the sphere flexes easily, expanding its size during the morph.

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

Morphing Transition: Here, the sphere morphs in dimensions and background, creating a compelling morphing effect.

.sphere.morphed {
  width: 120px;
  height: 120px;
  border-radius: 10%;
}
.sphere.morphed .avatar {
  width: 100px;
  height: 100px;
}

Conclusion

By blending CSS animations with a creative design approach, we’ve developed a simple yet enchanting avatar component. This element not only adds a fun twist to any profile display but showcases the power of CSS creativity without heavy reliance on external scripts.

Experiment further by changing avatars and gradients to personalize the experience even more, making every instance of this component refreshingly unique.

Whole code

<div class="avatar-container">
  <div class="sphere" onclick="changeAvatar()">
    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="avatar" class="avatar">
  </div>
</div>


<script>
function changeAvatar() {
  const sphere = document.querySelector('.sphere');
  sphere.classList.toggle('morphed');
}

</script>

<style>
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.sphere {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.sphere.morphed {
  width: 120px;
  height: 120px;
  border-radius: 10%;
}
.sphere.morphed .avatar {
  width: 100px;
  height: 100px;
}

</style>