Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Mr. Sloth

Public visualization

Viewing a saved revision (read-only)

4ecf4e32ec1241b892ce02a4a4d976e6

Fork of Mr. Sloth

0 stars1🌍 Public
NNita
Last edited Feb 24, 2025
Created on Feb 24, 2025
Forked from Mr. Sloth

This example shows a friendly, cartoonish sloth drawn entirely with CSS that floats and sways on a layered forest background. The sloth’s head and body are built from styled `div` elements, with eyes that blink and shine, rosy cheeks, a smiling mouth, and movable arms and claws that respond to hovering. The implementation relies on pure CSS, using linear and radial gradients in the `body::before` and `body::after` pseudo-elements to create the trees, while keyframe animations—`float`, `blink`, and `twinkle`—drive the motion, and `:hover` rules rotate the arms and claws for interaction.

AI-generated description

A cute CSS sloth drawing featuring:

  • Floating animation
  • Blinking eyes with shine
  • Cheek details
  • Arm movement on hover
  • Claws
  • Shading effects
  • Smooth transitions

The sloth has a friendly appearance with round features and subtle animations that make it more engaging and interactive.