Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Mr. Sloth

Public visualization

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:

  • Smooth floating animation with slight rotation
  • Natural blinking eyes with twinkling shine effect
  • Rosy cheeks with soft shading
  • Responsive arm and claw movement on hover
  • Smiling mouth animation
  • Enhanced shadows and depth
  • Softer, warmer color palette
  • Forest background with layered trees
  • Improved proportions and details

The sloth has an extra friendly appearance with rounded features and multiple subtle animations that make it more engaging and interactive. Hover over the sloth to see it wave its arms and smile!

Comments

Sign in to join the discussion.

MIT Licensed