title: Quarter-circle in top right corner
body: <p>I am looking to make a quarter-circle to place in the top right corner of my website (fixed) and I want it to animate towards its center when user scrolls ( I have the code working for shrinking the element but not for the element itself or its center)</p>
  
  <p>I have the header shrinking with the following code:</p>
  
  <p>HTML (script)</p>
  
  <pre><code>$(function(){
   var shrinkHeader = 50;
   $(window).scroll(function() {
   var scroll = getCurrentScroll();
    if ( scroll &gt;= shrinkHeader ) {
         $('header').addClass('shrink');
      }
      else {
          $('header').removeClass('shrink');
      }
   });
  </code></pre>
  
  <p>with the shrink class applied to the header when the user scrolls. I will switch it over to the quarter circle when I figure it out.</p>
  
  <p>NOTE: It will be white filled with an icon in the middle (acting as my nav toggle button)</p>
  
  <p>EDIT: I am asking how to make a quarter-circle that sits top right of the screen (fixed) and can be animated from the top right corner (circle's center)</p>