[해피CGI][cgimall] 원형 구조로 배치된 인포그래픽 UI 패턴

이 예제는 콘텐츠 요소들을 원형 레이아웃 구조로 배치한 인포그래픽 UI 디자인입니다.
각 항목이 원을 중심으로 균형 있게 분포되어 구조적인 정보 전달에 적합합니다.
마우스 오버 시 강조 효과가 적용되어 인터랙션이 필요한 홈페이지 섹션에도 활용 가능합니다.
회사 소개, 서비스 단계 설명, 프로세스 안내 등 다양한 웹 인포그래픽 활용에 적합한 예제입니다.
 

HTML 구조

- var n = 10

ul(style=`--n:${n}`)

  - for (var i = 0; i < n; i++) {

    li=i

  - }

CSS 소스

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

 

body {

  display: grid;

  place-content: center;

  min-height: 100vh;

  margin: 0;

  font-family: "Lexend", "Roboto",  system-ui, sans-serif;

  font-size: 1.6rem;

  font-weight: 200;

  background-image: repeating-conic-gradient(#1f202020 0% 25%, #fefefc 0% 50%);

background-position: 0 0, 32px 32px;

background-size: 64px 64px;

background-color: #fefefc;

}

ul, li {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  list-style: none;

}

li {

  width: 6ch;

  height: 6ch;

  

  display:  grid;

  place-content: center;

  padding: 1em;

}

ul {

  position: relative;

  --dist: 7ch;

  translate: 

    calc(-.5 * var(--dist))

    calc(-.5 * var(--dist));

}

li {

  position: absolute;

  

  --angl: sibling-index() * 360deg / var(--n);

  

  --x: calc(cos(var(--angl)) 

        * var(--dist));

  --y: calc(sin(var(--angl)) 

        * var(--dist));

  

  

  translate: var(--x) var(--y);

  color: hsl(calc(var(--angl) - 90deg) 

          40%

          30%

        );

    &:before {

      //so as not to rotate the content itself

      content: '';

      position: absolute;

      z-index: -1;

      inset: 0;

      border: 2px solid transparent;

      border-radius: 50%;

      corner-shape: round round round scoop;

      rotate: calc(var(--angl) - 27deg);

      background:

        hsl(calc(var(--angl)) 

          70%

          70%

        ) padding-box;

      transition: .5s linear;

    }

  &:hover:before {

        border-color: currentcolor;

  }

}