├── .gitattributes
├── .editorconfig
├── readme.md
├── explanation.md
└── header.svg


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | indent_style = tab
5 | end_of_line = lf
6 | charset = utf-8
7 | trim_trailing_whitespace = true
8 | insert_final_newline = true
9 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | <div align="center">
2 | 	<br>
3 | 	<a href="https://github.com/sindresorhus/css-in-readme-like-wat/blame/master/header.svg">
4 | 		<img src="header.svg" width="800" height="400">
5 | 	</a>
6 | 	<br>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/explanation.md:
--------------------------------------------------------------------------------
1 | # Explanation
2 | 
3 | You can put HTML (actually XHTML) and CSS inside a [`<foreignObject>` tag](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) inside a SVG file inside an `<img>` tag inside your readme. 🤯
4 | 
5 | Thanks to [@Richienb](https://github.com/Richienb) for sharing the trick in [this pull request](https://github.com/sindresorhus/sindresorhus/pull/9).
6 | 


--------------------------------------------------------------------------------
/header.svg:
--------------------------------------------------------------------------------
 1 | <svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
 2 | 	<foreignObject width="100%" height="100%">
 3 | 		<div xmlns="http://www.w3.org/1999/xhtml">
 4 | 			<style>
 5 | 				@keyframes rotate {
 6 | 					0% {
 7 | 						transform: rotate(3deg);
 8 | 					}
 9 | 					100% {
10 | 						transform: rotate(-3deg);
11 | 					}
12 | 				}
13 | 
14 | 				@keyframes gradientBackground {
15 | 					0% {
16 | 						background-position: 0% 50%;
17 | 					}
18 | 					50% {
19 | 						background-position: 100% 50%;
20 | 					}
21 | 					100% {
22 | 						background-position: 0% 50%;
23 | 					}
24 | 				}
25 | 
26 | 				@keyframes fadeIn {
27 | 					0% {
28 | 						opacity: 0;
29 | 					}
30 | 					66% {
31 | 						opacity: 0;
32 | 					}
33 | 					100% {
34 | 						opacity: 1;
35 | 					}
36 | 				}
37 | 
38 | 				.container {
39 | 					font-family:
40 | 						system-ui,
41 | 						-apple-system,
42 | 						'Segoe UI',
43 | 						Roboto,
44 | 						Helvetica,
45 | 						Arial,
46 | 						sans-serif,
47 | 						'Apple Color Emoji',
48 | 						'Segoe UI Emoji';
49 | 					display: flex;
50 | 					flex-direction: column;
51 | 					align-items: center;
52 | 					justify-content: center;
53 | 					margin: 0;
54 | 					width: 100%;
55 | 					height: 400px;
56 | 					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
57 | 					background-size: 600% 400%;
58 | 					animation: gradientBackground 10s ease infinite;
59 | 					border-radius: 10px;
60 | 					color: white;
61 | 					text-align: center;
62 | 				}
63 | 
64 | 				h1 {
65 | 					font-size: 50px;
66 | 					line-height: 1.3;
67 | 					letter-spacing: 5px;
68 | 					text-transform: uppercase;
69 | 					text-shadow:
70 | 						0 1px 0 #efefef,
71 | 						0 2px 0 #efefef,
72 | 						0 3px 0 #efefef,
73 | 						0 4px 0 #efefef,
74 | 						0 12px 5px rgba(0, 0, 0, 0.1);
75 | 					animation: rotate ease-in-out 1s infinite alternate;
76 | 				}
77 | 
78 | 				p {
79 | 					font-size: 20px;
80 | 					text-shadow: 0 1px 0 #efefef;
81 | 					animation: 5s ease 0s normal forwards 1 fadeIn;
82 | 				}
83 | 			</style>
84 | 			<div class="container">
85 | 				<h1>Made with HTML &amp; CSS<br/>not an animated GIF</h1>
86 | 				<p>Click to see the source</p>
87 | 			</div>
88 | 		</div>
89 | 	</foreignObject>
90 | </svg>
91 | 


--------------------------------------------------------------------------------