├── hello-basic.svg
├── README.md
├── hello-complex.svg
├── hello-animated.svg
└── hello-animated-color-scheme.svg


/hello-basic.svg:
--------------------------------------------------------------------------------
 1 | <svg fill="none" viewBox="0 0 600 300" width="600" height="300" 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 |         .container {
 6 |           display: flex;
 7 |           width: 100%;
 8 |           height: 300px;
 9 |           background-color: black;
10 |           color: white;
11 |         }
12 |       </style>
13 | 
14 |       <div class="container">
15 |         <h1>Hi there, my name is Nikola 👋</h1>
16 |       </div>
17 |     </div>
18 |   </foreignObject>
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # custom-readme-styles
 2 | 
 3 | Showcase custom CSS and HTML inside your README's.
 4 | 
 5 | See how to embed custom styling into any Markdown file on GitHub (or anywhere).
 6 | 
 7 | If you click on any of the images, it will take you to its source code.
 8 | 
 9 | ## Basic HTML and CSS
10 | 
11 | [![Basic hello](hello-basic.svg)](https://github.com/nikolalsvk/custom-readme-styles/blame/main/hello-basic.svg)
12 | 
13 | ## Advanced HTML and CSS
14 | 
15 | [![Complex hello](hello-complex.svg)](https://github.com/nikolalsvk/custom-readme-styles/blame/main/hello-complex.svg)
16 | 
17 | ## Animation in README
18 | 
19 | [![Animated hello](hello-animated.svg)](https://github.com/nikolalsvk/custom-readme-styles/blame/main/hello-animated.svg)
20 | 
21 | ## Animation based on system color scheme
22 | 
23 | For this one, try toggling dark and light color scheme on your computer.
24 | 
25 | [![Animated hello](hello-animated-color-scheme.svg)](https://github.com/nikolalsvk/custom-readme-styles/blame/main/hello-animated-color-scheme.svg)
26 | 
27 | ## Aligning it nicely
28 | 
29 | <div style="width: 100%;">
30 |   <a href="https://github.com/nikolalsvk/custom-readme-styles/blame/main/hello-animated-color-scheme.svg">
31 |     <img src="hello-animated-color-scheme.svg" style="width: 100%;" alt="Click to see the source">
32 |   </a>
33 | </div>
34 | 


--------------------------------------------------------------------------------
/hello-complex.svg:
--------------------------------------------------------------------------------
 1 | <svg fill="none" viewBox="0 0 600 300" width="600" height="300" 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 hi  {
 6 |             0% { transform: rotate( 0.0deg) }
 7 |            10% { transform: rotate(14.0deg) }
 8 |            20% { transform: rotate(-8.0deg) }
 9 |            30% { transform: rotate(14.0deg) }
10 |            40% { transform: rotate(-4.0deg) }
11 |            50% { transform: rotate(10.0deg) }
12 |            60% { transform: rotate( 0.0deg) }
13 |           100% { transform: rotate( 0.0deg) }
14 |         }
15 | 
16 |         .container {
17 |           background-color: black;
18 | 
19 |           width: 100%;
20 |           height: 300px;
21 | 
22 |           display: flex;
23 |           justify-content: center;
24 |           align-items: center;
25 |           color: white;
26 | 
27 |           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
28 |         }
29 | 
30 |         .hi {
31 |           animation: hi 1.5s linear -0.5s infinite;
32 |           display: inline-block;
33 |           transform-origin: 70% 70%;
34 |         }
35 |       </style>
36 | 
37 |       <div class="container">
38 |         <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1>
39 |       </div>
40 |     </div>
41 |   </foreignObject>
42 | </svg>
43 | 


--------------------------------------------------------------------------------
/hello-animated.svg:
--------------------------------------------------------------------------------
 1 | <svg fill="none" viewBox="0 0 600 300" width="600" height="300" 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 hi  {
 6 |             0% { transform: rotate( 0.0deg) }
 7 |            10% { transform: rotate(14.0deg) }
 8 |            20% { transform: rotate(-8.0deg) }
 9 |            30% { transform: rotate(14.0deg) }
10 |            40% { transform: rotate(-4.0deg) }
11 |            50% { transform: rotate(10.0deg) }
12 |            60% { transform: rotate( 0.0deg) }
13 |           100% { transform: rotate( 0.0deg) }
14 |         }
15 | 
16 |         @keyframes gradient {
17 |           0% {
18 |             background-position: 0% 50%;
19 |           }
20 |           50% {
21 |             background-position: 100% 50%;
22 |           }
23 |           100% {
24 |             background-position: 0% 50%;
25 |           }
26 |         }
27 | 
28 |         .container {
29 |           --color-main: #ef476f;
30 |           --color-primary: #ffd166;
31 |           --color-secondary: #06d6a0;
32 |           --color-tertiary: #118ab2;
33 | 
34 |           background: linear-gradient(
35 |             -45deg,
36 |             var(--color-main),
37 |             var(--color-primary),
38 |             var(--color-secondary),
39 |             var(--color-tertiary)
40 |           );
41 |           background-size: 400% 400%;
42 |           animation: gradient 5s ease infinite;
43 | 
44 |           width: 100%;
45 |           height: 300px;
46 | 
47 |           display: flex;
48 |           justify-content: center;
49 |           align-items: center;
50 |           color: white;
51 | 
52 |           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
53 |         }
54 | 
55 |         .hi {
56 |           animation: hi 1.5s linear -0.5s infinite;
57 |           display: inline-block;
58 |           transform-origin: 70% 70%;
59 |         }
60 |       </style>
61 | 
62 |       <div class="container">
63 |         <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1>
64 |       </div>
65 |     </div>
66 |   </foreignObject>
67 | </svg>
68 | 


--------------------------------------------------------------------------------
/hello-animated-color-scheme.svg:
--------------------------------------------------------------------------------
 1 | <svg fill="none" viewBox="0 0 600 300" width="600" height="300" 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 hi  {
 6 |             0% { transform: rotate( 0.0deg) }
 7 |            10% { transform: rotate(14.0deg) }
 8 |            20% { transform: rotate(-8.0deg) }
 9 |            30% { transform: rotate(14.0deg) }
10 |            40% { transform: rotate(-4.0deg) }
11 |            50% { transform: rotate(10.0deg) }
12 |            60% { transform: rotate( 0.0deg) }
13 |           100% { transform: rotate( 0.0deg) }
14 |         }
15 | 
16 |         @keyframes gradient {
17 |           0% {
18 |             background-position: 0% 50%;
19 |           }
20 |           50% {
21 |             background-position: 100% 50%;
22 |           }
23 |           100% {
24 |             background-position: 0% 50%;
25 |           }
26 |         }
27 | 
28 |         .container {
29 |           --color-main: #ef476f;
30 |           --color-primary: #ffd166;
31 |           --color-secondary: #06d6a0;
32 |           --color-tertiary: #118ab2;
33 | 
34 |           background: linear-gradient(
35 |             -45deg,
36 |             var(--color-main),
37 |             var(--color-primary),
38 |             var(--color-secondary),
39 |             var(--color-tertiary)
40 |           );
41 |           background-size: 400% 400%;
42 |           animation: gradient 5s ease-in-out infinite;
43 | 
44 |           width: 100%;
45 |           height: 300px;
46 | 
47 |           display: flex;
48 |           justify-content: center;
49 |           align-items: center;
50 |           color: white;
51 | 
52 |           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
53 |         }
54 | 
55 |         .hi {
56 |           animation: hi 1.5s linear -0.5s infinite;
57 |           display: inline-block;
58 |           transform-origin: 70% 70%;
59 |         }
60 | 
61 |         @media (prefers-color-scheme: light) {
62 |           .container {
63 |             --color-main: #ffc8dd;
64 |             --color-primary: #ffafcc;
65 |             --color-secondary: #bde0fe;
66 |             --color-tertiary: #a2d2ff;
67 |           }
68 |         }
69 |       </style>
70 | 
71 |       <div class="container">
72 |         <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1>
73 |       </div>
74 |     </div>
75 |   </foreignObject>
76 | </svg>
77 | 


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