Display radial layout with icons and labels

by Osama Qassar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dynamic Radial Layout</title>
  <style>
    .holder {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f0f0f0;
    }

    .circle-container {
      position: relative;
      width: 300px;
      height: 300px;
    }

    .center-image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
      transform: translate(-50%, -50%);
      border: 6px solid #000;
    }

    .center-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      text-align: center;
      width: 100px;
      font-family: sans-serif;
    }

    .icon {
      font-size: 20px;
      margin-bottom: 5px;
    }

    .label {
      font-size: 14px;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body>

<div class="holder">

<div class="circle-container" id="circle">
  <div class="center-image">
    <img src="https://via.placeholder.com/160" alt="City">
  </div>
</div>

</div>
<script>

  const items = [
    { icon: 'fa-plane', label: 'Airport' },
    { icon: 'fa-school', label: 'Schools' },
    { icon: 'fa-hospital', label: 'Hospitals' },
    { icon: 'fa-utensils', label: 'Restaurants' },
    { icon: 'fa-shopping-cart', label: 'Supermarkets' },
    { icon: 'fa-dumbbell', label: 'Gyms' },
    { icon: 'fa-tree', label: 'Parks' },
    { icon: 'fa-bus', label: 'Public Transport' },
  ];

  const container = document.getElementById('circle');
  const radius = 130; // radius from center image

  items.forEach((item, index) => {
    const angle =...