github-corners icon indicating copy to clipboard operation
github-corners copied to clipboard

Use SVG clip for transparent octocat cutout

Open orzechow opened this issue 1 year ago • 0 comments

This is a redrawing of the nice github corner, closing #15

  • based on the current official octocat SVG (the github corner SVG had some tiny glitches)
  • draws the tail/arm with an SVG clip
  • works with the beautiful tail animation :grin:

Explanation

I mainly used Inkscape with editor cleanups afterwards

  1. Changed the official octocat from outer circle to outer triangle, rotated by 45, removed the tail
  2. Added tail as extra path, cut it out of a circle (must be big enough to avoid artifacts due to animation) → our clipping path
     
  3. Clipping
    +

Result (plus checkerboard)

orzechow avatar Nov 28 '24 15:11 orzechow