🔗 +
= an SVG-based octocat-flavored hyperlink to your GitHub repository.
To put a hypercat in a document, please follow these simple steps.
-
Copy the
hypercat.svgfile into your project. -
Adapt the
hrefvalue, and (maybe) thetitleone.<a xlink:href='https://github.com/<username>/<repository>' xlink:title='Check the source code on GitHub!' target='_top'> ... </a>
-
Add the following line into your HTML document, after the opening
<body>tag.
(This is just one way—of a handful of different approaches—to embed an SVG file.
You can learn more in this short tutorial—or maybe, you’d rather read a somewhat extended one.)<object data='hypercat.svg' type='image/svg+xml'></object>
-
Finally, attach this CSS rule into your stylesheet.
object[data='hypercat.svg'] { position: absolute; top: 0px; right: 0px; }
This repository was inspired by
Tim Holman’s approach.
I created a slightly different design, offering some round corners
and a colorful animation. 🎨
You can check a live demo.
This little project was made possible with the help of
- GitHub’s octocat,
- the fresh and original design made by @tholman,
- and Inkscape, the open-source vector graphics editor.
And the demo was built with normalize.css, highlight.js, and two aesthetic type families: Fira & Roboto.
Copyright © 2017, Nebil Kawas García
This project is subject to the terms of the Mozilla Public License.