---
title: SC CSS Pattern
description: "A pure-CSS pattern generator: grids, stripes, checks, dots, zigzags, triangles."
url: https://secretocho.design/lab/sc-css-pattern/
type: SoftwareSourceCode
status: working
published: 2026-10-05
---

# SC CSS Pattern

> A pure-CSS pattern generator: grids, stripes, checks, dots, zigzags, triangles.

component 13 / 28 · WORKING

- **type**: Code Component
- **platform**: Framer
- **read time**: 7–9 min
- **license**: SecretoCho Design

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

*fig 00 · live demo, ported from **SC\_CSS\_Pattern.tsx***

Pure-CSS pattern generator (grid, stripes, checks, dots, zigzag, triangles) with size/spacing/angle controls and optional text-clip mode; GPU-accelerated backgrounds.

SC CSS Pattern is a pure-CSS pattern generator for Framer. It renders repeatable grids, stripes, dots, zigzags, triangles, and more using background-image gradients—no SVG or canvas. Optionally, the pattern can be clipped into text for bold, typographic fills.

Perfect for hero textures, section dividers, posters, or animated layouts when paired with Framer’s scroll/hover effects.

- Visual
- Pattern Generator
- CSS

## Main

### Overview

- **Built With**: React, CSS, Framer Code Component API
- **Layout Support**: Fully Responsive or fixed width/height
- **Orientation**: Full Fill or Text Clip
- **Ideal Use Case**: Decorative backgrounds, patterned text, section textures

### Tags

- css
- gradients
- repeating-linear
- radial
- background-clip
- text
- pattern

### Code comment

*SC\_CSS\_Pattern.tsx · lines 4–9 · the file’s header comment*

```tsx
/**
 * @framerDisableUnlink
 * @framerSupportedLayoutWidth any
 * @framerSupportedLayoutHeight any
 * © SecretoCho Design 2025 (https://secretocho.design)
 */
```

### Dependencies

- **Technologies**: None (pure CSS)
- **Notes**: No runtime libraries required; works with Framer’s standard runtime.

### Complexity

- **Logic Level**: Low–Medium (computed CSS)
- **Runtime Cost**: Very Low (GPU-accelerated background paints)
- **Component Size**: ~2–3 KB (raw TSX)
- **Notes**: Text clip mode benefits from large font sizes for crisp results.

## Guide

### Instructions

1. **Paste** the SCCssPattern code component into your Framer project.
2. **Place** it on the canvas. It defaults to fill its parent (width/height: 100%).
3. **Choose a Pattern** via Pattern (grid, checks, stripes, dots, zigzag, triangles, etc.).
4. **Tune Look** with Size, Stroke Width, Dot Size, Spacing, and angles (Angle, Triangle Angle).
5. **Color** sets the pattern color (uses currentColor, so it also drives text color when not clipped).
6. **Text Clip (optional):** Enable **Text Clip**, then edit Text, Font Size, Font Weight, and Align.
7. **Responsive Tips:** Use the layer’s constraints or set explicit width/height props for fixed tiles.

### Examples / Presets

- Subtle Grid
  
  - **patternType**: grid
  - **size**: 28
  - **strokeWidth**: 1
  - **color**: #CCD3DC
  
- Bold Diagonal
  
  - **patternType**: diagonal-stripes
  - **size**: 12
  - **strokeWidth**: 4
  - **angle**: 45
  - **color**: #111
  
- Dot Matrix
  
  - **patternType**: dots
  - **dotSize**: 2
  - **spacing**: 14
  - **color**: #00A3FF
  
- Text Fill
  
  - **isTextPattern**: true
  - **text**: "PATTERN"
  - **fontSize**: 96
  - **patternType**: checks
  

## Mechanics

### How it Works

- **Computed Styles:** A switch on patternType returns a patternStyle containing one or more gradient layers.
- **Line & Grid Patterns:** Use linear-gradient or repeating-linear-gradient with backgroundSize to space strokes.
- **Dots / Cross Dots:** Use radial-gradient “dot” plus optional offset layer for cross-hatch placement.
- **Stripes:** Horizontal/vertical/diagonal variants rely on gradient direction and repeat size; diagonal uses angle.
- **Checks & Zigzag:** Layered gradients with offsets create checkerboards and zig patterns.
- **Triangles:** A single linear-gradient at triangleAngle produces tiled right triangles.
- **Text Clip Mode:** Applies the pattern to the text by setting background-clip: text and -webkit-background-clip: text with transparent fill, leaving only the patterned glyphs visible.

### Performance & Tuning

- Paint-cheap; avoid extreme **Size** on huge canvases.
- Dots: keep dotSize 1–3 with spacing 10–24.
- Text Clip: large fonts reduce moiré; keep lineHeight ≈ 1.2.

### Compatibility & Limits

- Evergreen browsers (Chrome, Edge, Firefox, Safari).
- Text clipping uses background-clip: text + -webkit- prefix (included).
- No external dependencies.

## Quality

### Accessibility

- Decorative by default. If purely ornamental, wrap with aria-hidden="true".
- In Text Clip mode, ensure sufficient contrast and legible size.

### Security & Privacy

- No network calls; no storage.
- Typed props; no dangerouslySetInnerHTML / eval.
- No device permissions. Pure style computation; no global listeners.

## Reference

### Props

| name | type | default | description |
| --- | --- | --- | --- |
| width | string\|number | 100% | Component width (supports %, px) |
| height | string\|number | 100% | Component height (supports %, px) |
| patternType | string | grid | Type of pattern to render |
| size | number | 25 | Base pattern size for lines/checks/etc. |
| color | string | #0099FF | Pattern color (used as currentColor) |
| strokeWidth | number | 1 | Line width for grid/lines/diagonal stripes |
| angle | number | 45 | Angle (deg) for diagonal stripes |
| triangleAngle | number(enum) | 45 | Triangle fill angle (45, 135, -45, -135) |
| dotSize | number | 2 | Dot radius for dot-based patterns |
| spacing | number | 15 | Dot spacing for dots/cross-dots |
| isTextPattern | boolean | false | Clip pattern into text instead of background |
| text | string | Pattern Text | Text content when Text Clip is enabled |
| fontSize | number | 72 | Font size (px) for text pattern |
| fontWeight | number | 700 | Font weight for text pattern (100–900) |
| textAlign | string(enum) | center | Horizontal alignment of text (left/center/right) |

### Notes & Tips

- Prefer integer **Size** and **Stroke Width** 1–2px for crisp lines.
- Neutral colors for backgrounds; high contrast for text fills.

### Troubleshooting / FAQ

Pattern looks blurry

Use integer size; reduce strokeWidth; avoid scaling transforms.

Text invisible

Ensure **Text Clip** is on and global CSS doesn’t override WebkitTextFillColor.

Moiré

Increase **size/spacing** or lower contrast.

## Source

### Header comment

SC\_CSS\_Pattern.tsx has no doc comment: its header, lines 4–9, holds only Framer’s annotations (shown under \[MAIN\]).

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

### Key excerpt

Every pattern is one CSS background recipe drawn in currentColor: the size guards and the first four of the eleven cases.

*SC\_CSS\_Pattern.tsx · lines 72–102 · tsx*

```tsx
    const getPatternStyle = (): React.CSSProperties => {
        const s = Math.max(size, 1)
        const sw = Math.max(strokeWidth, 0.1)
        const ds = Math.max(dotSize, 0.1)
        const sp = Math.max(spacing, 1)

        switch (patternType) {
            case "checks":
                return {
                    backgroundImage: `repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor), repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor)`,
                    backgroundPosition: `0 0, ${s}px ${s}px`,
                    backgroundSize: `${s * 2}px ${s * 2}px`,
                }
            case "grid":
                return {
                    backgroundImage: `linear-gradient(currentColor ${sw}px, transparent ${sw}px), linear-gradient(to right, currentColor ${sw}px, transparent ${sw}px)`,
                    backgroundSize: `${s}px ${s}px`,
                }
            case "dots":
                return {
                    backgroundImage: `radial-gradient(currentColor ${ds}px, transparent ${ds}px)`,
                    backgroundSize: `${sp}px ${sp}px`,
                }
            case "cross-dots": {
                const sp2 = sp / 2
                return {
                    backgroundImage: `radial-gradient(currentColor ${ds}px, transparent ${ds}px), radial-gradient(currentColor ${ds}px, transparent ${ds}px)`,
                    backgroundSize: `${sp}px ${sp}px`,
                    backgroundPosition: `0 0, ${sp2}px ${sp2}px`,
                }
            }
```

## Credits

### Credits

**Inspired by** classic CSS gradient pattern techniques.  
Original implementation and Framer adaptation by **SecretoCho Design**.

- **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/)