---
title: SC Isometric Pattern
description: "Pure-CSS isometric textures: cubes, grids, hexagons, stairs, or clipped into text."
url: https://secretocho.design/lab/sc-isometric-pattern/
type: SoftwareSourceCode
status: working
published: 2026-10-05
---

# SC Isometric Pattern

> Pure-CSS isometric textures: cubes, grids, hexagons, stairs, or clipped into text.

component 20 / 28 · WORKING

- **type**: Code Component
- **platform**: Framer
- **license**: SecretoCho Design

![A still of the SC Isometric Pattern demo, as its module draws it with reduced motion.](https://secretocho.design/_astro/still.DBhLz8em_Z1WxKD.webp)

*fig 00 · live demo, ported from **SCIsometricPattern.tsx***

Pure-CSS isometric pattern generator (cubes, grid, diamonds, hexagons, triangles, boxes, pyramids, stairs) with three colours, size/scale controls and a text-clip mode.

SC Isometric Pattern is a pure-CSS generator for isometric textures: cubes, grid, diamonds, hexagons, triangles, 3D boxes, pyramids and stairs, built from layered linear, repeating and conic gradients in up to three colours. Size, scale, stroke width, rotation, perspective and opacity are controls; the pattern can also be clipped into a line of text.

The isometric sibling of SC CSS Pattern: same approach, no SVG and no canvas.

- Visual
- Pattern Generator
- CSS

## Main

### Overview

- **Built With**: React, CSS gradients (linear, repeating-linear, conic), Framer Code Component API
- **Layout Support**: Fills the frame (width / height any)
- **Orientation**: Full fill or text clip
- **Ideal Use Case**: Section backgrounds, service-flow dividers, patterned headlines

### Tags

- isometric
- css
- gradient
- conic-gradient
- pattern
- cubes
- hexagons
- background-clip
- text

### Code comment

SCIsometricPattern.tsx has no doc comment: lines 34–39 hold only Framer’s annotations and the © line.

### Dependencies

- **Technologies**: None (pure CSS)
- **Notes**: Triangles and pyramids use conic-gradient; boxes use a perspective transform; stairs a skewY.

### Complexity

- **Logic Level**: Low–Medium (a switch over eight gradient recipes)
- **Runtime Cost**: Very Low (GPU-painted backgrounds; no JS loop)
- **Component Size**: ~15 KB TSX (15,362 bytes, 492 lines)
- **Notes**: Pattern rendering is immediate; opacity is applied to the pattern layer.

## Guide

### Instructions

1. Drop **SC Isometric Pattern** into a frame; it fills it.
2. Pick a **Pattern**: Cubes, Grid, Diamonds, Hexagons, Triangles, 3D Boxes, Pyramids or Stairs.
3. Set **Size** (10–200) and **Scale** (0.1–3); Grid also takes **Stroke Width** (Stairs uses it too, without the control), Triangles a **Rotation**, 3D Boxes a **Perspective**.
4. Choose the Primary, Secondary and Tertiary colours (the controls hide when a pattern uses fewer, although Diamonds uses the tertiary colour with its control hidden) and the **Opacity**.
5. Optional **Text Clip**: turn it on and set Text, Font Size, Font Weight and Align.

### Examples / Presets

- Default
  
  The source defaults: cubes, size 40, scale 1, blue / violet / turquoise at 80 % opacity.
  
- As on the site
  
  - **patternType**: grid
  - **size**: 30
  - **strokeWidth**: 1
  - **opacity**: 1 (every colour primary--500 at 16 %, as on all 14 of the old site’s instances; the pages’ main layer)
  
- Hexagons
  
  - **patternType**: hexagons
  - **size**: 40
  
- 3D Boxes
  
  - **patternType**: boxes
  - **size**: 40
  - **perspective**: 1000
  
- Text Clip
  
  - **isTextPattern**: true
  - **text**: ISOMETRIC
  - **fontSize**: 72
  - **fontWeight**: 700
  - **patternType**: cubes
  - **scale**: 0.5
  

## Mechanics

### How it Works

- **Recipes**: getPatternStyle switches on patternType; s = max(size, 1) × scale is the tile size.
- **Cubes**: three linear gradients at 30°, 150° and −90°, tiled at s × 2·0.866 s and offset by one cube height. **Hexagons**: three gradients at 60°, 120° and 0° tiled at s × 1.732 s with half offsets.
- **Grid**: two repeating-linear-gradients at 30° and −30°, spacing s and line width sw. **Diamonds**: two repeating gradients at ±45° blended with multiply.
- **Triangles** and **Pyramids**: conic gradients in 120° and 60° wedges; triangles rotate with the angle. **Boxes**: a striped tile under perspective(…) rotateX(45deg) rotateZ(45deg). **Stairs**: four-step stripes under skewY(−30deg) with a shadow line.
- **Text clip**: the same style on a \<p\> with background-clip: text and a transparent fill, so only the glyphs show the pattern.

### Performance & Tuning

- Paint-cheap: gradients are rasterized by the GPU; large tiles on huge frames are still fine.
- Boxes and Stairs apply a transform to the whole layer; the transformed layer can overflow the frame (overflow is hidden by the container).
- Text clip: large font sizes reduce moiré.

### Compatibility & Limits

- Evergreen browsers; conic-gradient is required for Triangles and Pyramids.
- Text clip uses background-clip: text with the -webkit- prefix included.
- No external dependencies.

## Quality

### Accessibility

- Decorative: wrap the layer with aria-hidden="true" when it carries no information.
- In Text Clip mode the text is real DOM text but its fill is the pattern; keep contrast and size generous.

### Security & Privacy

- No network calls, no storage, no permissions, no third-party libraries.
- Pure style computation; no listeners, no dangerouslySetInnerHTML.

## Reference

### Props

| name | type | default | description |
| --- | --- | --- | --- |
| patternType | enum | cubes | Pattern. cubes \| grid \| diamonds \| hexagons \| triangles \| boxes (3D Boxes) \| pyramids \| stairs. |
| size | number | 40 | Size. Base tile size 10–200. |
| scale | number | 1 | Scale. Multiplier 0.1–3 on the size. |
| strokeWidth | number | 1 | Stroke Width. Line width 0.5–10 (Grid and Stairs use it; the control shows for Grid only). |
| angle | number | 30 | Rotation. 0–360° (triangles only). |
| perspective | number | 1000 | Perspective. 100–2000 px (3D boxes only). |
| primaryColor | color | #4A90E2 | Primary Color. |
| secondaryColor | color | #7B68EE | Secondary Color. |
| tertiaryColor | color | #48D1CC | Tertiary Color (hidden for grid and diamonds, although Diamonds uses it). |
| opacity | number | 0.8 | Opacity 0–1 of the pattern layer. |
| isTextPattern | boolean | false | Text Clip. Clip the pattern into text instead of filling the frame. |
| text | string | ISOMETRIC | Text (Text Clip on). |
| fontSize | number | 72 | Font Size 10–400 px (Text Clip on). |
| fontWeight | number | 700 | Font Weight 100–900 (Text Clip on). |
| textAlign | enum | center | Align left \| center \| right (Text Clip on). |

width and height (400 × 400) exist in defaultProps but have no property controls; the layer’s own size rules.

### Notes & Tips

- Cubes and hexagons read best with a light, a mid and a dark tone of one hue.
- Grid falls back to the primary colour for its second line set when the secondary colour is empty.
- Keep Size an integer for crisp tile edges; Scale is for quick proportional changes.

### Troubleshooting / FAQ

Triangles or pyramids are missing

The browser lacks conic-gradient support.

Boxes or stairs look cut off

Both patterns transform the whole layer; enlarge the frame. Perspective affects only 3D Boxes: a lower value strengthens the distortion.

Text is invisible

Text Clip is on but the font size is tiny, or a global style overrides -webkit-text-fill-color.

## Source

### Header comment

SCIsometricPattern.tsx has no doc comment: lines 34–39 hold only Framer’s annotations and the © line.

[props \[REF\]](#reference)

### Key excerpt

The cube pattern is three gradients at 30°, 150° and −90° in the three colours, tiled at size × 2·sin 60° and offset by one cube height — no SVG, no canvas.

*SCIsometricPattern.tsx · lines 76–91 · tsx*

```tsx
            case "cubes": {
                // Classic isometric cube pattern
                const cubeSize = s
                const cubeHeight = cubeSize * 0.866 // sin(60°)

                return {
                    background: `
                        linear-gradient(30deg, transparent 30%, ${primaryColor} 30%, ${primaryColor} 70%, transparent 70%),
                        linear-gradient(150deg, transparent 30%, ${secondaryColor} 30%, ${secondaryColor} 70%, transparent 70%),
                        linear-gradient(-90deg, transparent 30%, ${tertiaryColor} 30%, ${tertiaryColor} 70%, transparent 70%)
                    `,
                    backgroundSize: `${cubeSize}px ${cubeHeight * 2}px`,
                    backgroundPosition: `0 0, 0 0, 0 ${cubeHeight}px`,
                    opacity: opacity,
                }
            }
```

## Credits

### Credits

© SecretoCho Design 2025 — stated in the file (line 38).

- **license**: SecretoCho Design

SecretoCho Design 2025

### Disclaimer

Provided “as is” for visual/UX purposes. Validate performance, accessibility, and licensing within your project.

## Proves

- [Creative coding](https://secretocho.design/about/#capabilities)

## Hiring a design engineer?

I’m open to senior design engineer roles: remote from Belgrade, or relocation with visa sponsorship. Write to me, or read the CV first. Client work stays selective, one project at a time.

[sc@secretocho.design](mailto:sc@secretocho.design)

[read the CV](https://secretocho.design/cv/) · [LinkedIn](https://www.linkedin.com/in/secretocho/)