Cloud Menu

by marusti

HTML

<nav>
  <ul>
    <li><a href="#"><svg viewBox='0 0 105 105'>
  <path d='M 25,60 
           a 20,20 1 0,0 0,40 
           h 50 
           a 20,20 1 0,0 0,-40 
           a 10,10 1 0,0 -15,-10 
           a 15,15 1 0,0 -35,10  
           z' />
           <text x="33" y="80">Link</text>
</svg></a></li>
    <li><a href="#"><svg viewBox='0 0 105 105'>
  <path d='M 25,60 
           a 20,20 1 0,0 0,40 
           h 50 
           a 20,20 1 0,0 0,-40 
           a 10,10 1 0,0 -15,-10 
           a 15,15 1 0,0 -35,10  
           z' />
</svg></a></li>
    <li><a href="#"><svg viewBox='0 0 105 105'>
  <path d='M 25,60 
           a 20,20 1 0,0 0,40 
           h 50 
           a 20,20 1 0,0 0,-40 
           a 10,10 1 0,0 -15,-10 
           a 15,15 1 0,0 -35,10  
           z' />
</svg></a></li>
  </ul>
</nav>

CSS

svg {
  height: 25%;
  width: 25%;
}

path {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}

path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}

nav ul {
  list-style-type: none
}

nav ul li {
  display: inline
}