cami/sp-codes.de
1
0
Fork 0
forked from samuel-p/sp-codes.de
Code Issues Pull requests Projects Releases Wiki Activity

updated logo animation styles

Browse source
This commit is contained in:
Samuel Philipp 2021-04-10 01:37:08 +02:00
parent 26ec1ab421
commit d60ec50cc6
Signed by untrusted user: samuel-p
GPG key ID: 2AD495D17760CB4E
4 changed files with 52 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -3,7 +3,7 @@
"version": "1.0.0",
"description": "website for sp-codes.de",
"scripts": {
"compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss dist/css/main.css",
"compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/ -o dist/css/",
"watch:eleventy": "eleventy --serve",
"watch:sass": "npm run compile-sass -- --watch",
"start": "npm-run-all compile-sass --parallel watch:*",

1
src/_includes/layouts/base.njk
View file

@ -32,6 +32,7 @@ title: sp-codes
<meta name="twitter:description" content="Samuel Philipp - Software Engineer from Magdeburg">
<meta name="twitter:image" content="https://sp-codes.de/img/sp-codes.jpg">
<link rel="shortcut icon" href="img/sp-codes.ico">
<link rel="stylesheet" href="/css/logo.css">
<link rel="stylesheet" href="/css/main.css">
<script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.outbound-links.js"></script>
</head>

2
src/_includes/layouts/home.njk
View file

@ -4,7 +4,7 @@ layout: base.njk
<div class="row pb-4">
<div class="col">
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=""><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"></stop><stop offset="1" stop-color="#fea500" stop-opacity="0"></stop></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round" class="cEsZQnrx_0"></path><g style="line-height:1.25"><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" style="-inkscape-font-specification:'Fira Code, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" font-weight="500" font-size="170.667" font-family="Fira Code" aria-label="S" letter-spacing="0" word-spacing="0" fill="#fea500" stroke-width="0" class="cEsZQnrx_1"></path></g><g style="line-height:1.25"><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" style="-inkscape-font-specification:'Fira Code, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" font-weight="500" font-size="170.667" font-family="Fira Code" aria-label="P" letter-spacing="0" word-spacing="0" fill="#fea500" stroke-width="4.366" class="cEsZQnrx_2"></path></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_3"></path><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_4"></path><style data-made-with="vivus-instant">.cEsZQnrx_0{stroke-dasharray:1405 1407;stroke-dashoffset:1406;animation:cEsZQnrx_draw 1300ms ease-out 0ms forwards;}.cEsZQnrx_1{stroke-dasharray:572 574;stroke-dashoffset:573;animation:cEsZQnrx_draw 1300ms ease-out 175ms forwards;}.cEsZQnrx_2{stroke-dasharray:530 532;stroke-dashoffset:531;animation:cEsZQnrx_draw 1300ms ease-out 350ms forwards;}.cEsZQnrx_3{stroke-dasharray:620 622;stroke-dashoffset:621;animation:cEsZQnrx_draw 1300ms ease-out 525ms forwards;}.cEsZQnrx_4{stroke-dasharray:1088 1090;stroke-dashoffset:1089;animation:cEsZQnrx_draw 1300ms ease-out 700ms forwards;}@keyframes cEsZQnrx_draw{100%{stroke-dashoffset:0;}}@keyframes cEsZQnrx_fade{0%{stroke-opacity:1;}93.54838709677419%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=""><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"></stop><stop offset="1" stop-color="#fea500" stop-opacity="0"></stop></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round" class="cEsZQnrx_0"></path><g style="line-height:1.25"><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" style="-inkscape-font-specification:'Fira Code, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" font-weight="500" font-size="170.667" font-family="Fira Code" aria-label="S" letter-spacing="0" word-spacing="0" fill="#fea500" stroke-width="0" class="cEsZQnrx_1"></path></g><g style="line-height:1.25"><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" style="-inkscape-font-specification:'Fira Code, Medium';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start" font-weight="500" font-size="170.667" font-family="Fira Code" aria-label="P" letter-spacing="0" word-spacing="0" fill="#fea500" stroke-width="4.366" class="cEsZQnrx_2"></path></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_3"></path><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_4"></path></svg>
</div>
</div>
</div>

49
src/scss/logo.scss Normal file
View file

@ -0,0 +1,49 @@
// vivus instant logo animation
.cEsZQnrx_0 {
stroke-dasharray: 1405 1407;
stroke-dashoffset: 1406;
animation: cEsZQnrx_draw 1300ms ease-out 0ms forwards;
}
.cEsZQnrx_1 {
stroke-dasharray: 572 574;
stroke-dashoffset: 573;
animation: cEsZQnrx_draw 1300ms ease-out 175ms forwards;
}
.cEsZQnrx_2 {
stroke-dasharray: 530 532;
stroke-dashoffset: 531;
animation: cEsZQnrx_draw 1300ms ease-out 350ms forwards;
}
.cEsZQnrx_3 {
stroke-dasharray: 620 622;
stroke-dashoffset: 621;
animation: cEsZQnrx_draw 1300ms ease-out 525ms forwards;
}
.cEsZQnrx_4 {
stroke-dasharray: 1088 1090;
stroke-dashoffset: 1089;
animation: cEsZQnrx_draw 1300ms ease-out 700ms forwards;
}
@keyframes cEsZQnrx_draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes cEsZQnrx_fade {
0% {
stroke-opacity: 1;
}
93.54838709677419% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}