index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3
   4 <head>
   5     <meta charset="UTF-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <script src="dist/circletype.min.js"></script>
   8     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
   9     <link rel="stylesheet" href="styles.css">
  10     <title>Antifa Generator</title>
  11 </head>
  12
  13 <body>
  14     <section class="logo">
  15         <div id="top-text">
  16             <h2 class="logo-text" id="antifa-group"> Desenvolvedores </h2>
  17         </div>
  18         <div id="bottom-text">
  19             <h2 class="logo-text" id="antifa"> Antifacistas </h2>
  20         </div>
  21
  22     </section>
  23     <script>
  24         const antifaGroup = document.getElementById('antifa-group')
  25         const antifa = document.getElementById('antifa')
  26         const logo = document.getElementsByClassName('logo')[0]
  27         const radius = logo.offsetHeight / 2;
  28         console.log('radius :>> ', radius);
  29
  30         new CircleType(antifaGroup)
  31             .radius(radius);
  32
  33         new CircleType(antifa)
  34             .dir(-1)
  35             .radius(radius);
  36     </script>
  37 </body>
  38
  39 </html>