Path Animation

<div class="path-animation">
    <div class="path-dot"></div>
</div>

.path-animation {
    width: 200px;
    height: 200px;
    position: relative;
}

.path-dot {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    position: absolute;
    animation: followPath 4s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

@keyframes followPath {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 0;
        left: 180px;
    }
    50% {
        top: 180px;
        left: 180px;
    }
    75% {
        top: 180px;
        left: 0;
    }
    100% {
        top: 0;
        left: 0;
    }
}