Empty State Illustration with Floating Accent Shapes

Empty State Illustration with Floating Accent Shapes

An empty state is often the first visual cue users see when data has not yet loaded, a list is still empty, or a workflow has not started. That makes it a valuable place for small motion cues that feel helpful rather than decorative for decoration’s sake. In this SVG animation example, the main illustration appears immediately, while two accent shapes continue to drift in the background using simple CSS transform loops.

The result is calm, modern, and easy to ship in product interfaces. Because the animation relies on CSS only, it is lightweight, easy to maintain, and ideal for dashboards, admin panels, analytics tools, and SaaS onboarding screens.

Why this empty-state animation works

The design goal here is not to create attention-grabbing motion. Instead, it provides a low-noise idle effect that suggests the interface is active and well-crafted. The floating shapes add a sense of depth and softness while keeping the primary illustration stable.

• Instant settle-in: the illustration appears immediately, so the interface feels responsive.
• Gentle motion: two small shapes move only 12px, keeping the effect subtle.
• Different durations: offset timings prevent the movement from feeling mechanical.
• CSS only: no JavaScript is needed for looping animation.
• Accessible by default: motion is removed for users who prefer reduced motion.

Recommended use cases

This pattern is especially useful where empty space might otherwise feel unfinished. It works well in:

• Dashboard widgets with no data yet
• Admin panels showing empty tables or lists
• Onboarding states before the user adds content
• Search results pages with no matches
• Inactive project areas or archived sections

Animation concept

The primary surface remains still, which helps the user understand that the illustration is a state indicator rather than a mini scene demanding interaction. Two accent shapes float independently using a transform-based animation loop. Their movement is deliberately restrained: a small vertical or diagonal drift of about 12px creates just enough life without creating visual clutter.

Using different animation durations is an important detail. If both shapes move at the same speed, the composition can feel repetitive. By offsetting the timing, the movement becomes more organic and less noticeable in a good way.

CSS-only implementation

Below is a clean pattern you can adapt for your own SVG illustration. The key idea is to animate only the accent shapes, while the rest of the artwork stays static.

<svg class="empty-state-illustration" viewBox="0 0 640 360" role="img" aria-labelledby="emptyStateTitle emptyStateDesc">
  <title id="emptyStateTitle">Empty state illustration with floating accent shapes</title>
  <desc id="emptyStateDesc">A calm empty-state scene with two accent shapes drifting gently in place.</desc>

  <g class="scene">
    <!-- static main illustration -->
    <rect x="120" y="110" width="400" height="180" rx="24" fill="#F4F7FB" />
    <rect x="170" y="150" width="220" height="18" rx="9" fill="#D9E2F0" />
    <rect x="170" y="182" width="280" height="12" rx="6" fill="#E5EBF5" />
    <rect x="170" y="206" width="250" height="12" rx="6" fill="#E5EBF5" />

    <!-- floating accents -->
    <circle class="float float-one" cx="516" cy="92" r="10" fill="#7C9CFF" />
    <path class="float float-two" d="M96 248l14-8 14 8-14 8z" fill="#8CE0D0" />
  </g>
</svg>

<style>
.empty-state-illustration .float {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.empty-state-illustration .float-one {
  animation: driftUpDown 4.8s ease-in-out infinite;
}

.empty-state-illustration .float-two {
  animation: driftDiagonal 6.2s ease-in-out infinite;
}

@keyframes driftUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes driftDiagonal {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -12px); }
}

@media (prefers-reduced-motion: reduce) {
  .empty-state-illustration .float {
    animation: none;
    transform: none;
  }
}
</style>

What this code does well

This structure keeps the animation focused and maintainable. The key animated elements are isolated with a shared .float class, so you can define motion behavior once and reuse it across multiple accents.

• transform-box: fill-box helps the transform behave consistently inside SVG.
• transform-origin: center keeps the motion balanced around each shape.
• ease-in-out makes the loop feel soft rather than robotic.
• Different keyframes allow each accent to drift in its own way.
• prefers-reduced-motion ensures users who opt out of motion are respected.

Design tips for dashboards and admin panels

Empty-state animation in product interfaces should support the content hierarchy, not compete with it. Keep the illustration compact and neutral enough to sit comfortably inside cards, panels, or content placeholders.

1. Use limited color: two accent tones are usually enough.
2. Preserve whitespace: let the empty state breathe around labels and calls to action.
3. Keep motion slow: anything too fast may feel like an alert or loading indicator.
4. Avoid scale bouncing: transform-only drifting is calmer than elastic movement.
5. Match the product tone: enterprise UIs often benefit from understated animation.

Performance and accessibility notes

CSS transform animation is a strong choice for SVG because it is efficient and easy to control. Since only two small elements are animated, the visual cost stays low even when the illustration appears across multiple pages or repeated dashboard cards.

Accessibility matters as much as performance. Empty states should be decorative only when they add clarity, and they should never block essential information. Use meaningful title and desc text when the SVG conveys context, and disable motion when the user prefers reduced animation.

Customization ideas

You can adapt this SVG animation example to fit many brand systems without changing the core interaction pattern.

• Swap the accent colors to match your UI palette.
• Change the drift distance from 12px to 8px for an even quieter effect.
• Use three shapes instead of two if you want a slightly richer composition.
• Shift the durations further apart, such as 4.5s and 7.1s, to avoid sync points.
• Apply the same pattern to icons, cards, or onboarding illustrations.

Best practice summary

The strongest empty-state motion is often the motion users barely notice. A stable illustration with a couple of softly drifting accent shapes can make an interface feel more deliberate and polished while remaining unobtrusive. For product teams building dashboards and admin panels, this is a practical way to add personality without sacrificing clarity.

If you want an SVG animation example that is easy to implement, easy to maintain, and easy on the eyes, this floating empty-state pattern is a reliable choice. It demonstrates how subtle looping motion can improve perceived quality while staying respectful of user preferences and interface context.