If you're a visual creative (or just visually creative) and hosting projects at GitHub, you've probably found yourself feeling frustrated at some point for the impressive, yet restrictive palette GitHub makes available to you by default.
What if I told you there was a way you could very quickly and easily implement your own custom HTML & CSS in any of your Repository README files! The trick, is to include a custom SVG file into the mix ...
GitHub has been pretty generous in their implementation of HTML within Markdown, but they aggressively remove anything which might provide the opportunity to be exploited. Unfortunately, this includes many of the elements you're used to turning to when attempting to create a custom layout.
And this is where SVG charges in to save the day!
There is a technique you can use to display custom HTML & CSS inside an SVG file using the foreignObject element, and use the provisions of the file format to render your code for display. So, let's get on with it ...
First, create a basic SVG file using your preferred editor, and name it something like display.svg:
<svg fill="none" viewBox="0 0 600 100" width="600" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
.container {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffdd;
background-color: black;
font-family: 'Colonna MT', 'Times New Roman', serif;
font-size: 13px;
}
</style>
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="container">
<h1>YOU CAN EVEN INCLUDE UNICODE EMOJIS 👋</h1>
</div>
</div>
</foreignObject>
</svg>Which will render as:
I know ... right now you're wondering what all the hype is about (and probably saying something rude about my Mum)
Oh, ye of little faith and clichéd taunting ... have you so soon forgotten the legendary power of CSS?
Let's add a few keyframes to display.svg:
<svg fill="none" viewBox="0 0 600 100" width="600" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes hi {
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(14.0deg) }
20% { transform: rotate(-8.0deg) }
30% { transform: rotate(14.0deg) }
40% { transform: rotate(-4.0deg) }
50% { transform: rotate(10.0deg) }
60% { transform: rotate( 0.0deg) }
100% { transform: rotate( 0.0deg) }
}
.container {
width: 100%;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffdd;
background-color: black;
font-family: 'Colonna MT', 'Times New Roman', serif;
font-size: 13px;
}
.hi {
animation: hi 1.5s linear -0.5s infinite;
display: inline-block;
transform-origin: 75% 75%;
}
@media (prefers-reduced-motion) {
.hi { animation: none; }
}
</style>
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="container">
<h1>YOU CAN EVEN INCLUDE UNICODE EMOJIS <div class="hi">👋</div></h1>
</div>
</div>
</foreignObject>
</svg>So now we have:
And by now I hope you're getting the idea that you have almost limitless directions you can go from here.
Below you can find some links to the CSS, SVG and other design resources I find most useful, along with a few of the banners I've created for myself using this technique, and I've left many more interesting trinkets for you to find in the GitHub Repository attached to this article.
- CSS Gradient Backgrounds @ cssGradient.io
- Animated CSS Background Demonstrating the Bokeh Effect
- Various CSS Background Animations
- SVG Gradient Wave Generator
- CSS Animation Generator
- CSS Drop-ins for Simple Websites
- Augmented UI
- Retro NES CSS Style Library (because, why not?)
- CSS Clip-Path Generator