gitHub-corner example

        
<github-corner
  href="https://github.com/YuskaWu/github-corner-element">
</github-corner>

        
<github-corner wave-duration="1s"></github-corner>

        
<github-corner size="7.5rem"></github-corner>

        
<github-corner placement="top-left"></github-corner>
<github-corner placement="top-right"></github-corner>
<github-corner placement="bottom-left"></github-corner>
<github-corner placement="bottom-right"></github-corner>

One Piece is a Japanese manga series written and illustrated by Eiichiro Oda. It has been serialized in Shueisha's shōnen manga magazine Weekly Shōnen Jump since July 1997, with its individual chapters compiled into 103 tankōbon volumes as of August 2022.

        
<github-corner style="mix-blend-mode: darken;"></github-corner>

        
<github-corner
  banner-color="#cceb34"
  octocat-color="#d453f5">
</github-corner>

        
<style>
  .custom-style::part(banner) {
    fill: #cceb34;
    stroke: #d453f5;
    stroke-width: 16;
    transition: fill 0.2s;
  }

  .custom-style:hover::part(banner) {
    fill: white;
  }

  .custom-style::part(octocat) {
    fill: #d453f5;
    stroke: black;
    stroke-width: 3;
  }

  .custom-style::part(octocat-arm) {
    animation-name: wave-hand;
    animation-duration: 0.2s;
    animation-iteration-count: infinite
  }
</style>

<github-corner class="custom-style"></github-corner>

        
<github-corner>
  <svg slot="svg">
    <circle cx="161" cy="75" r="4" fill="black" />
    <circle cx="161" cy="75" r="6" stroke="black" fill="transparent" />
    <circle cx="181" cy="95" r="4" fill="black" />
    <circle cx="181" cy="95" r="6" stroke="black" fill="transparent" />
  </svg>
</github-corner>

        
<github-corner
  banner-color="url(#banner-grad)"
  octocat-color="url(#octocat-grad)">

  <svg slot="svg">
    <defs>
      <radialGradient id="banner-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(212, 231, 216);
        stop-opacity:0" />
        <stop offset="100%" style="stop-color:rgb(121, 203, 184);stop-opacity:1" />
      </radialGradient>
      <linearGradient id="octocat-grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>
</github-corner>

github-corner examples