Shader Atlas
한국어
◯ Shapes

Cross

십자

A plus-shaped form with adjustable arm length, arm width, and rounding.

Also known as: CrossPlus sign

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Cross } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Cross />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with 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
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Cross } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Cross />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Cross } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Cross />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

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

Props · Cross

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—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

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Line선

Connect two points with an adjustable-width solid, dashed, or dotted line.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Polygon정다각형

Make a regular polygon from a triangle to a nearly circular form, with adjustable sides and corner rounding.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Rounded Rect둥근 사각형

A rectangle with adjustable width, height, and corner rounding.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Flower꽃 모양

A radial flower shape with adjustable petal count and valley depth.

A cross is a plus-shaped form made by two arms meeting at the center. It works as a simple geometric mark, such as an add icon or a medical and map symbol.

`radius` is the half-length from the center to each arm's end, from 0 to 1. `thickness` is the half-width of an arm, from 0.01 to 0.5, and `rounding` softens its arm ends and inner corners from 0 to 0.2. Rotate it by 45 degrees to turn the plus into an X.

`thickness` is the half-width of each arm, so increasing it makes the intersection look thick quickly. Pair it with `Line` for guides or layer it over `RoundedRect` for an add mark inside a button.

When to use

Use it for add, intersection, medical, or simple map marks. It can also decorate intersections in a repeating grid. Avoid it when you need asymmetric arms or arms of different lengths.

Open as page ↗