셰이더 아틀라스
EN
◯ 도형

십자

Cross

가로·세로 팔의 길이와 폭, 모서리 둥글기를 조절하는 플러스형 도형입니다.

다른 이름: CrossPlus sign

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Cross } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Cross />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, Cross } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Cross/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, Cross } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Cross />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Cross } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Cross />
    </Shader>
  )
}
JavaScript
// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Cross',
    }
  ]
}, { disableTelemetry: true })

속성(props) · Cross

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름값기본값범위·선택지설명(원문)
originOrigin코드에서 지정center—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
colorColor#ffffff—Fill color of the cross
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the cross
radiusArm Length0.350 – 1 (step 0.01)Arm half-length — distance from center to the end of each arm
thicknessArm Width0.080.01 – 0.5 (step 0.005)Arm half-width — controls how wide each arm is
roundingRounding00 – 0.2 (step 0.005)Corner rounding — rounds the arm ends and concave corners
rotationRotation00 – 360 (step 1)Rotation in degrees (45° turns a plus into an ×)
softnessSoftness00 – 0.1 (step 0.001)Edge softness for antialiasing
strokeThicknessStroke Thickness00 – 0.2 (step 0.005)Stroke thickness. Zero means no stroke.
strokeColorStroke Color#000000—Color of the stroke outline
strokePositionStroke Positioncenteroutside · center · insidePosition of the stroke relative to the shape edge
colorSpaceColor Blendinglinearlinear · oklch · oklab · hsl · hsv · lchColor space for blending fill and stroke colors

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

선Line

두 점을 잇는 선을 그리고 굵기와 실선·점선·파선 스타일을 조절합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

정다각형Polygon

변의 수와 꼭짓점의 둥글기를 조절해 삼각형부터 원에 가까운 다각형까지 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

둥근 사각형Rounded Rect

가로·세로 크기와 모서리 둥글기를 조절하는 사각형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

꽃 모양Flower

꽃잎 수와 안쪽 골의 깊이를 조절하는 방사형 꽃 모양입니다.

십자는 두 막대가 중심에서 교차하는 플러스형 도형입니다. 추가 아이콘이나 의료·지도 기호처럼 단순한 기하학 표식으로 쓸 수 있습니다.

`radius`는 중심에서 팔 끝까지의 반쪽 길이이며 0–1 범위입니다. `thickness`는 팔의 반쪽 폭으로 0.01–0.5 범위이고, `rounding`은 팔 끝과 안쪽 모서리를 둥글게 하는 값으로 0–0.2 범위입니다. `rotation`을 45도 돌리면 X자 방향이 됩니다.

`thickness`는 팔의 반쪽 폭이므로 값을 키우면 교차부까지 빠르게 두꺼워 보입니다. `Line`을 함께 써서 가이드 선을 만들거나 `RoundedRect`와 겹쳐 버튼 안의 추가 표식을 만들 수 있습니다.

언제 쓰나

추가·교차·의료 표식이나 단순한 지도 기호에 좋습니다. 반복 격자의 교차점 장식으로도 쓸 수 있습니다. 비대칭 십자나 서로 다른 팔 길이가 필요하면 피하세요.

페이지로 열기 ↗