---
title: SC Corner Lines
description: Pixel-snapped SVG corner strokes that hug a container’s edges.
url: https://secretocho.design/lab/sc-corner-lines/
type: SoftwareSourceCode
status: working
published: 2025-08-26
updated: 2025-08-26
---

# SC Corner Lines

> Pixel-snapped SVG corner strokes that hug a container’s edges.

component 12 / 28 · WORKING

- **type**: Code Component
- **platform**: Framer
- **last update**: 2025-08-26
- **read time**: 3–5 min
- **license**: SecretoCho Design

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

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

Adds pixel-snapped SVG corner strokes that hug container edges, with configurable color, line width, and corner size for editorial frames and UI accents.

SC Corner Lines adds crisp, pixel-snapped corner accents to any frame using lightweight SVG lines. Each corner renders a horizontal and vertical stroke that hug the container edges, with configurable color, line width, and corner size.

- Visual
- Frame Accent
- SVG
- UI Accent

## Main

### Overview

- **Built With**: React, SVG, Framer Code Component API
- **Layout Support**: Responsive (prefers fixed min 16×16)
- **Orientation**: Corner accent overlay
- **Ideal Use Case**: Card frames, hero modules, gallery captions, product shots, editorial panels

### Tags

- lines
- frame
- corner
- accent
- outline
- svg
- pixel-snapped
- overlay

### Code comment

```tsx
/**
 * SC Corner Lines
 * © SecretoCho Design 2025
 * Pixel-snapped corner strokes for framing cards, images, and panels.
 * @framerDisableUnlink
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerIntrinsicWidth 16
 * @framerSupportedLayoutHeight any-prefer-fixed
 * @framerIntrinsicHeight 16
 */
```

### Dependencies

- **Technologies**: None (pure SVG)
- **Notes**: No runtime libraries; ships with Framer’s standard runtime.

### Complexity

- **Logic Level**: Low (deterministic geometry)
- **Runtime Cost**: Very Low (tiny SVG paints)
- **Component Size**: ~1–2 KB (raw TSX)
- **Notes**: Sub-pixel correction prevents blurry lines on odd stroke widths.

## Guide

### Instructions

1. Add **SCCornerLines** to your Framer project.
2. Adjust **Line Color** to match your brand/foreground.
3. Set **Line Width** for vibe (1–3px recommended).
4. Tune **Corner Size** to extend strokes along edges.
5. Layering: place on top and disable pointer events on the parent if needed.

### Examples / Presets

- Editorial Thin
  
  - **color**: #FFFFFF
  - **width**: 1
  - **size**: 22 (on dark imagery)
  
- Neon UI
  
  - **color**: #00FF99
  - **width**: 2
  - **size**: 28
  
- Subtle Card
  
  - **color**: rgba(0,0,0,.35)
  - **width**: 1
  - **size**: 16
  

## Mechanics

### How it Works

- **Geometry**: For a given size (box) and width (stroke), the component computes:
  - half = stroke/2 and edge = box - half to align strokes to pixel centers.
- **Per Corner**: Each corner renders two path segments: one along the x-axis and one along the y-axis.
- **Positioning**: Four tiny SVGs are absolutely positioned at each corner, so they hug the container edges regardless of parent size.
- **Crispness**: Using stroke-linecap "square" and drawing at half offsets avoids fuzzy anti-aliasing on odd/even pixel widths.

### Performance & Tuning

- SVG paths are minimal; cost is effectively zero.
- Prefer **1–2px** stroke for crisp UI; **3–4px** for bold editorial frames.
- Very large **Corner Size** values can overlap content—test at your target layout sizes.

### Compatibility & Limits

- Works across evergreen browsers.
- No scripts, no events; purely visual overlay.
- Honors parent transforms; make sure parent doesn’t apply unwanted overflow: hidden that clips the corners prematurely.

## Quality

### Accessibility

- Decorative only. If the corners do not convey meaning, consider aria-hidden="true" on the wrapper or use as a background decoration.

### Security & Privacy

- No network calls, storage, or permissions.
- No global listeners; no user data processed.

## Reference

### Props

| name | type | default | description |
| --- | --- | --- | --- |
| color | string | #00FF99 | Stroke color for the corner lines |
| width | number | 2 | Line (stroke) width in pixels |
| size | number | 24 | Length of each corner “arm” in pixels (per side SVG box) |

### Notes & Tips

- On high-DPI displays, odd pixel **Line Width** may still look crisp thanks to half-pixel alignment—keep it to **1 or 2** for safest results.
- To frame media without covering important content, add inner padding equal to **width + 2px**.

### Troubleshooting / FAQ

Lines look soft

Try integer **Corner Size** and whole-pixel **Line Width**; ensure no CSS scale transforms on the element.

Corners clip

Parent overflow: hidden may cut them; increase container padding or allow overflow.

Color seems dim

Check any opacity on ancestor layers; SVG inherits composite opacity.

## Source

### Header comment

*SC\_CornerLines.tsx · lines 5–9 · header comment*

```tsx
/**
 * SC Corner Lines
 * © SecretoCho Design 2025
 * Pixel-snapped corner strokes for framing cards, images, and panels.
 */
```

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

### Key excerpt

Each path sits half a stroke inside its box, so whole-pixel widths draw on whole pixels: the setup and the first of four corners.

*SC\_CornerLines.tsx · lines 25–65 · tsx*

```tsx
export default function SCCornerLines({ color, width = 2, size = 24 }: Props) {
    const stroke = Number(width) || 2
    const box = Number(size) || 24
    const half = stroke / 2
    const edge = box - half

    const lineProps = {
        stroke: color,
        strokeWidth: stroke,
        strokeLinecap: "square" as const,
        fill: "none",
    }

    const svg = (p: string[], style: React.CSSProperties) => (
        <svg
            width={box}
            height={box}
            style={{ position: "absolute", ...style }}
        >
            <path d={p[0]} {...lineProps} />
            <path d={p[1]} {...lineProps} />
        </svg>
    )

    return (
        <div
            style={{
                position: "relative",
                width: "100%",
                height: "100%",
                minWidth: 16,
                minHeight: 16,
                contain: "layout paint size",
                transform: "none",
            }}
        >
            {/* Top Left */}
            {svg([`M0,${half} L${box},${half}`, `M${half},0 L${half},${box}`], {
                top: 0,
                left: 0,
            })}
```

## Credits

### Credits

Minimal corner-mark patterns inspired by editorial print and wireframe guides.  
Implementation and Framer adaptation by **SecretoCho Design**.

- **license**: SecretoCho Design

SecretoCho Design 2025

### Disclaimer

Provided “as is” for visual framing accents. Validate contrast and interaction hit areas in your final layouts.

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