Leon Chaewon Kong's dev blog

[TIL] SVG Circles

SVGs are very handy – you can manipulate icons, images, figures, and graphs by programmatically.

Today, I learned how to create a color palette with several color chips by using SVG and React.


<svg height="16" width="16">
  <circle cx="8" cy="8" r="6" stroke="black" stroke-width="2" fill="black" />
  1. height and width represents size of the canvas; the area that is covered by generated svg.
  2. cx and cy refers center of the circle. By default cx and cy is set to 0.
  3. r is an abbreviation of radius.
  4. stroke and stroke-width decides outer border of the circle.
  5. fill handles inner background color of the circle.

In the example above, I deliberatly set each numbers.

First, I set the size to 16 * 16, so, the center point would be (8, 8). That’s why cx and cy equals to 8.

Then, I set stroke-width to 2, which means, the actual radius of the circle should equal to r + 2(Since, border should be counted).

So, the r should be 6, in order to present the whole circle in the 16*16 canvas without any cut-offs.

To sum up,

cx = cy = width / 2
r = (width / 2) - strokeWidth

Implement in React

Use SVGs in React is easy.

import React from 'react';
import styled from 'styled-components';

export const TEXT_COLORS = [

export const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  grid-gap: 10px;
  align-items: center;
  width: 100%;
  margin-left: -16px;
  height: 56px;
  position: absolute;
  bottom: 70px;
  padding: 0 20px;

export const ColorSelector = () => {
  const renderColorchips = () => TEXT_COLORS.map((color: string) => (
        key={ color }
        width={ 24 }
        height={ 24 }
          cx={ 12 }
          cy={ 12 }
          r={ 10 }
          fill={ color }
          strokeWidth={ 2 }

  return (
      { renderColorchips() }

Since, it’s React JSX/TSX not HTML, be sure to make all properties camelCased. stroke-width should be strokeWidth.

width, height, cx, r, strokeWidth could be either string or number type.

The result would be like: color palette

The thing is, I added more features, like onClick. But those are beyond of this post’s topic.