Moblant

by ethanpil

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>
  <nav>
    <button class="circle transparent">
      <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         viewBox="0 0 512 512" xml:space="preserve">
      <circle style="fill:#FAD24D;" cx="256" cy="256" r="256"/>
      <path style="fill:#FF5B62;" d="M270.614,225.815c-1.284-55.115,58.487-99.114,68.663-164.146
        c10.175,65.032,69.947,109.031,68.663,164.146C407.939,316.134,270.614,316.134,270.614,225.815z"/>
      <path style="fill:#ED4C54;" d="M339.277,61.669c10.175,65.032,69.947,109.031,68.662,164.146c0,69.57-81.466,85.538-118.901,47.931
        c31.052,24.36,87.168,14.929,104.72-22.377C421.096,193.267,339.151,129.906,339.277,61.669z"/>
      <path style="fill:#FF878E;" d="M318.23,133.11c0,0-56.569,66.775-36.922,105.865C297.735,271.665,295.557,177.434,318.23,133.11z"/>
      <path style="fill:#FF5B62;" d="M104.074,336.588c-2.017-86.456,91.745-155.474,107.707-257.486
        c15.962,102.012,109.722,171.03,107.707,257.486C319.487,478.265,104.074,478.265,104.074,336.588z"/>
      <path style="fill:#ED4C54;" d="M211.78,79.102c15.962,102.012,109.723,171.032,107.707,257.486
        c0,109.131-127.792,134.179-186.515,75.188c48.71,38.213,136.736,23.419,164.27-35.103C340.126,285.53,211.584,186.14,211.78,79.102
        z"/>
      <path style="fill:#FF878E;"...

JavaScript

$( document ).ready(function() {
    
    //Handle Page Changes
    $('*[data-ui]').click(function() { 
         $(".page").removeClass("active");
         $( "nav a" ).removeClass("active");
         $( this ).toggleClass("active");
         pageTarget=$( this ).data("ui");
         $(pageTarget).addClass("active");        
    });
    
});