Skip to content

Instantly share code, notes, and snippets.

@Pyotato

Pyotato/current.svg

Last active August 3, 2024 12:35
Show Gist options
  • Save Pyotato/54fa9ae09449893df9a5489f11f21d45 to your computer and use it in GitHub Desktop.
Save Pyotato/54fa9ae09449893df9a5489f11f21d45 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
current.svg
<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
@keyframes hi {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
}
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes toRight {
0% {
transform: translateX(-40%);
}
10% {
transform: translateX(-30%);
}
20% {
transform: translateX(-20%);
}
30% {
transform: translateX(-10%);
}
40% {
transform: translateX(0%);
}
50% {
transform: translateX(10%);
}
60% {
transform: translateX(20%);
}
70% {
transform: translateX(30%);
}
80% {
transform: translateX(40%);
}
90% {
transform: translateX(50%);
}
100% {
transform: translateX(60%);
}
}
.container {
--color-main: #e3e8ea;
--color-primary: #9ba8ae;
--color-secondary: #707a7e;
--color-tertiary: #495054;
background: linear-gradient(
-45deg,
var(--color-main),
var(--color-primary),
var(--color-secondary),
var(--color-tertiary)
);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
width: 100%;
height: 300px;
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.flex-container {
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
align-self: center;
gap: 1rem;
width: 40%;
}
.flex-text {
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
gap: 0.2rem;
margin-bottom: 0.5rem;
align-self: center;
vertical-align: text-top;
}
.flext-apart{
justify-content: space-between;
}
.hi {
animation: hi 1.5s linear -0.5s infinite;
display: inline-block;
transform-origin: 70% 70%;
}
.font {
font-family: "Audiowide", sans-serif;
}
.rabbit-wrap {
animation: toRight 3.5s linear -3.5s infinite;
display: inline-block;
width: 100%;
}
a{
text-decoration: none;
text-align: center;
}
.center-height-align{
transform: translateY(12%);
}
.rabbit {
width: 5em;
height: 3em;
background: #ffffff;
border-radius: 70% 90% 60% 50%;
position: relative;
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
animation: hop 1s infinite linear;
z-index: 1;
margin: 4em auto 1rem auto;
}
.no-flexbox .rabbit {
margin: 4em auto 1rem auto;
}
.rabbit:before {
content: "";
position: absolute;
width: 1em;
height: 1em;
background: white;
border-radius: 100%;
top: 0.5em;
left: -0.3em;
box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white,
4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;
animation: kick 1s infinite linear;
}
.rabbit:after {
content: "";
position: absolute;
width: 0.75em;
height: 2em;
background: white;
border-radius: 50% 100% 0 0;
right: 1em;
top: -1em;
border-top: 1px solid #f7f5f4;
border-left: 1px solid #f7f5f4;
box-shadow: -0.5em 0em 0 -0.1em white;
}
@keyframes hop {
20% {
transform: rotate(-10deg) translate(1em, -2em);
box-shadow: -0.2em 3em 0 -1em #b78e81;
}
40% {
transform: rotate(10deg) translate(3em, -4em);
box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
}
60%,
75% {
transform: rotate(0) translate(4em, 0);
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
}
}
@keyframes kick {
20%,
50% {
box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white,
4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white,
4em 1.9em 0 -0.4em white;
}
40% {
box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white,
4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white,
4.4em 1.9em 0 -0.2em white;
}
}
a:hover{
cursor: pointer;
}
svg:hover{
cursor:pointer;
}
</style>
<div class="container">
<div class="flex-container">
<h2>
Hi there
<div class="hi">👋</div>
</h2>
</div>
<div class="rabbit-wrap">
<div class="rabbit"></div>
</div>
<!--공부 블로그-->
<div class="flex-container flext-apart">
<div class="font flex-text">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M6 2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 1 0 0-2h-2v-2h2a1 1 0 0 0 1-1V4a2 2 0 0 0-2-2h-8v16h5v2H7a1 1 0 1 1 0-2h1V2H6Z"
clip-rule="evenodd"
/>
</svg>
<div class="text-label">study log</div>
</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<a xlink:href="https://velog.io/@pyotato/posts">
<path
fill="currentColor"
d="M3 0C1.338 0 0 1.338 0 3v18c0 1.662 1.338 3 3 3h18c1.662 0 3-1.338 3-3V3c0-1.662-1.338-3-3-3zm6.883 6.25q.945 0 1.125.9l1.463 8.303q.697-.923 1.146-1.553a14 14 0 0 0 1.283-2.273q.608-1.283.608-2.295q0-.607-.338-.967q-.315-.382-1.193-.967q.9-1.148 2.25-1.148q.72 0 1.193.428q.495.427.494 1.26q0 1.395-1.17 3.488q-1.147 2.07-4.431 6.232l-2.227.156l-1.711-9.628h-2.25V7.24q.9-.
2.115-.63q1.215-.36 1.643-.36"
/> </a>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1.1em"
height="1.1em"
viewBox="0 0 24 24"
>
<a xlink:href="https://github.com/Pyotato/fe_study">
<path
fill="white"
clip-rule="evenodd"
d="M15.7481 24.9471C24.0901 24.7061 24.9111 22.9501 24.9111 12.9811C24.9111 1.98108 23.9111 0.981079 12.9111 0.981079C1.91113 0.981079 0.911133 1.98108 0.911133 12.9811C0.911133 22.9761 1.73713 24.7151 10.1391 24.9491C10.2121 24.8581 10.2391 24.7441 10.2391 24.6281C10.2391 24.3781 10.2291 21.8121 10.2241 20.9291C7.18713 21.5681 6.54613 19.5101 6.54613 19.5101C6.04913 18.2881 5.33313 17.9621 5.33313 17.9621C4.34213 17.3061 5.40813 17.3191 5.40813 17.3191C6.50413 17.3941 7.08113 18.4101 7.08113 18.4101C8.05513 20.0271 9.63713 19.5601 10.2591 19.2891C10.3581 18.6061 10.6401 18.1391 10.9521 17.8751C8.52713 17.6081 5.97813 16.7001 5.97813 12.6451C5.97813 11.4901 6.40413 10.5461 7.10213 9.80608C6.98913 9.53808 6.61513 8.46208 7.20913 7.00608C7.20913 7.00608 8.12613 6.72108 10.2121 8.09008C11.0831 7.85508 12.0171 7.73808 12.9461 7.73408C13.8731 7.73808 14.8071 7.85508 15.6801 8.09008C17.7651 6.72108 18.6801 7.00608 18.6801 7.00608C19.2761 8.46208 18.9011 9.53808 18.7881 9.80608C19.4881 10.5461 19.9111 11.4901 19.9111 12.6451C19.9111 16.7101 17.3581 17.6051 14.9251 17.8661C15.3171 18.1931 15.6661 18.8391 15.6661 19.8261C15.6661 20.7721 15.6601 22.4451 15.6561 23.5541C15.6541 24.1031 15.6531 24.5131 15.6531 24.6281C15.6531 24.7371 15.6821 24.8521 15.7481 24.9471V24.9471Z"
/></a></svg>
</div>
</div>
<!-- 커밋 -->
<div class="flex-container flext-apart">
<div class="font flex-text">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.122 17.645a7.185 7.185 0 0 1-2.656 2.495 7.06 7.06 0 0 1-3.52.853 6.617 6.617 0 0 1-3.306-.718 6.73 6.73 0 0 1-2.54-2.266c-2.672-4.57.287-8.846.887-9.668A4.448 4.448 0 0 0 8.07 6.31 4.49 4.49 0 0 0 7.997 4c1.284.965 6.43 3.258 5.525 10.631 1.496-1.136 2.7-3.046 2.846-6.216 1.43 1.061 3.985 5.462 1.754 9.23Z"/>
</svg>
<div class="text-label">commit streak</div>
</div>
<div>
326 </div>
</div>
<!-- 프로젝트 -->
<div class="flex-container flext-apart">
<div class="font flex-text">
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Zm3-7h.01v.01H8V13Zm4 0h.01v.01H12V13Zm4 0h.01v.01H16V13Zm-8 4h.01v.01H8V17Zm4 0h.01v.01H12V17Zm4 0h.01v.01H16V17Z"/>
</svg>
<div class="text-label">projects</div>
</div>
<div >
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.3em"
height="1.3em"
fill="white"
viewBox="0 0 24 24"
class="center-height-align icon"
>
<a href="https://roadmaker-fe.vercel.app/">
<path opacity="0.5" d="M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22Z" fill="white" />
<path d="M9.198 7.25H9.30203H9.30206C10.2005 7.24997 10.9497 7.24995 11.5445 7.32991C12.1723 7.41432 12.7391 7.59999 13.1945 8.05546C13.65 8.51093 13.8357 9.07773 13.9201 9.70552C14.0001 10.3003 14 11.0495 14 11.948L14 12C14 12.4142 13.6642 12.75 13.25 12.75C12.8358 12.75 12.5 12.4142 12.5 12C12.5 11.036 12.4984 10.3884 12.4335 9.9054C12.3714 9.44393 12.2642 9.24644 12.1339 9.11612C12.0036 8.9858 11.8061 8.87858 11.3446 8.81654C10.8616 8.7516 10.214 8.75 9.25 8.75C8.28599 8.75 7.63843 8.7516 7.1554 8.81654C6.69393 8.87858 6.49644 8.9858 6.36612 9.11612C6.2358 9.24644 6.12858 9.44393 6.06654 9.9054C6.0016 10.3884 6 11.036 6 12C6 12.964 6.0016 13.6116 6.06654 14.0946C6.12858 14.5561 6.2358 14.7536 6.36612 14.8839C6.49644 15.0142 6.69393 15.1214 7.1554 15.1835C7.63843 15.2484 8.28599 15.25 9.25 15.25C9.66422 15.25 10 15.5858 10 16C10 16.4142 9.66422 16.75 9.25 16.75L9.19798 16.75C8.29951 16.75 7.5503 16.7501 6.95552 16.6701C6.32773 16.5857 5.76093 16.4 5.30546 15.9445C4.84999 15.4891 4.66432 14.9223 4.57991 14.2945C4.49995 13.6997 4.49997 12.9505 4.5 12.052V12.052V11.948V11.9479C4.49997 11.0495 4.49995 10.3003 4.57991 9.70552C4.66432 9.07773 4.84999 8.51093 5.30546 8.05546C5.76093 7.59999 6.32773 7.41432 6.95552 7.32991C7.55029 7.24995 8.29953 7.24997 9.19798 7.25H9.198Z" fill="white" />
<path d="M16.8446 8.81654C16.3616 8.7516 15.714 8.75 14.75 8.75C14.3358 8.75 14 8.41422 14 8C14 7.58579 14.3358 7.25 14.75 7.25L14.802 7.25H14.8021C15.7005 7.24997 16.4497 7.24995 17.0445 7.32991C17.6723 7.41432 18.2391 7.59999 18.6945 8.05546C19.15 8.51093 19.3357 9.07773 19.4201 9.70552C19.5001 10.3003 19.5 11.0495 19.5 11.9479V11.9479V12.052V12.0521C19.5 12.9505 19.5001 13.6997 19.4201 14.2945C19.3357 14.9223 19.15 15.4891 18.6945 15.9445C18.2391 16.4 17.6723 16.5857 17.0445 16.6701C16.4497 16.7501 15.7005 16.75 14.802 16.75H14.698C13.7995 16.75 13.0503 16.7501 12.4555 16.6701C11.8277 16.5857 11.2609 16.4 10.8055 15.9445C10.35 15.4891 10.1643 14.9223 10.0799 14.2945C9.99995 13.6997 9.99997 12.9505 10 12.052L10 12C10 11.5858 10.3358 11.25 10.75 11.25C11.1642 11.25 11.5 11.5858 11.5 12C11.5 12.964 11.5016 13.6116 11.5665 14.0946C11.6286 14.5561 11.7358 14.7536 11.8661 14.8839C11.9964 15.0142 12.1939 15.1214 12.6554 15.1835C13.1384 15.2484 13.786 15.25 14.75 15.25C15.714 15.25 16.3616 15.2484 16.8446 15.1835C17.3061 15.1214 17.5036 15.0142 17.6339 14.8839C17.7642 14.7536 17.8714 14.5561 17.9335 14.0946C17.9984 13.6116 18 12.964 18 12C18 11.036 17.9984 10.3884 17.9335 9.9054C17.8714 9.44393 17.7642 9.24644 17.6339 9.11612C17.5036 8.9858 17.3061 8.87858 16.8446 8.81654Z" fill="white" />
</a>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1.1em"
height="1.1em"
viewBox="0 0 24 24"
class="icon"
><a href="https://github.com/road-maker/road-maker-react-typescript"><path
fill="white"
clip-rule="evenodd"
d="M15.7481 24.9471C24.0901 24.7061 24.9111 22.9501 24.9111 12.9811C24.9111 1.98108 23.9111 0.981079 12.9111 0.981079C1.91113 0.981079 0.911133 1.98108 0.911133 12.9811C0.911133 22.9761 1.73713 24.7151 10.1391 24.9491C10.2121 24.8581 10.2391 24.7441 10.2391 24.6281C10.2391 24.3781 10.2291 21.8121 10.2241 20.9291C7.18713 21.5681 6.54613 19.5101 6.54613 19.5101C6.04913 18.2881 5.33313 17.9621 5.33313 17.9621C4.34213 17.3061 5.40813 17.3191 5.40813 17.3191C6.50413 17.3941 7.08113 18.4101 7.08113 18.4101C8.05513 20.0271 9.63713 19.5601 10.2591 19.2891C10.3581 18.6061 10.6401 18.1391 10.9521 17.8751C8.52713 17.6081 5.97813 16.7001 5.97813 12.6451C5.97813 11.4901 6.40413 10.5461 7.10213 9.80608C6.98913 9.53808 6.61513 8.46208 7.20913 7.00608C7.20913 7.00608 8.12613 6.72108 10.2121 8.09008C11.0831 7.85508 12.0171 7.73808 12.9461 7.73408C13.8731 7.73808 14.8071 7.85508 15.6801 8.09008C17.7651 6.72108 18.6801 7.00608 18.6801 7.00608C19.2761 8.46208 18.9011 9.53808 18.7881 9.80608C19.4881 10.5461 19.9111 11.4901 19.9111 12.6451C19.9111 16.7101 17.3581 17.6051 14.9251 17.8661C15.3171 18.1931 15.6661 18.8391 15.6661 19.8261C15.6661 20.7721 15.6601 22.4451 15.6561 23.5541C15.6541 24.1031 15.6531 24.5131 15.6531 24.6281C15.6531 24.7371 15.6821 24.8521 15.7481 24.9471V24.9471Z"
/></a></svg>
</div>
</div>
</div>
</div>
</foreignObject>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment