component 20 / 28WORKING
SC Isometric Pattern
- type
- Code Component
- platform
- Framer
- license
- SecretoCho Design
demo · runs with JavaScript
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
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
- Drop SC Isometric Pattern into a frame; it fills it.
- Pick a Pattern: Cubes, Grid, Diamonds, Hexagons, Triangles, 3D Boxes, Pyramids or Stairs.
- 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.
- 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.
- 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.
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.
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
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