Watermelon Themed Analog Clock

This Watermelon CSS Analog Clock transforms a standard timekeeping UI into a playful, summery vector illustration. By leveraging SCSS pre-processing for generative design and CSS Gradients for complex shapes, it reduces HTML markup while maintaining a vibrant, flat-design aesthetic.

Core Technique: SCSS Randomization & Gradients

The charm of this component lies in its “organic” feel, achieved through procedural generation in CSS, and its efficient use of drawing properties.

1. Procedural Seed Placement (SCSS)

Instead of manually positioning every watermelon seed, the developer uses an SCSS @for loop combined with the random() function. This generates unique top, left, and transform (rotation) values for each seed during compilation. This technique ensures the pattern looks natural and scattered, rather than a rigid grid, without cluttering the stylesheet with manual coordinates.

@for $i from 1 through 15 {
  &:nth-child( #{ $i }) {
    // Random vertical position
    top: random(80) + 1%; 
    // Spaced out horizontally
    left: $i * 6%;        
    // Random rotation
    transform: rotate( #{ random(360) }deg ); 
  }
}

2. Single-Element Geometry (CSS)

The clock face—including the pink flesh, white rind, and green skin—is drawn using a single div with a complex radial-gradient. By defining “hard stops” (e.g., 60% followed immediately by calc(60% + 1px)), the code creates sharp rings instead of a smooth fade. This reduces the need for nested wrapper divs.

.face {
  background: radial-gradient( 
    ellipse at center, 
    $pink, 
    $pink 60%,                   // End pink
    $white calc( 60% + 1px ),    // Start white immediately
    $white 63%, 
    $green calc( 63% + 1px ),    // Start green
    // ...
  );
}

3. Real-time Rotation (JavaScript)

The JavaScript is purely functional. It calculates the rotation degrees for the hour, minute, and second hands based on the current time and applies them via inline styles.

const sDeg = (( s / 60 ) * 360 ); // 60 seconds = 360 degrees
sHand.style.transform = `rotate( ${sDeg}deg )`;

Browser Support

This component relies on standard modern CSS and JavaScript features.

Key Technologies:

• SCSS: Compiled to standard CSS.
• CSS Gradients: Universally supported.
• ES6 (const, template literals): Standard in all modern browsers.