artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 09:01:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add floating heart

Browse Source
This commit is contained in:
Artem 2023-03-05 18:29:27 +01:00
parent 27513123fc
commit c6db67b9d9
2 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Heart.astro Normal file
View File

@ -0,0 +1,36 @@
<svg class="fixed -bottom-64 right-20 w-48 fill-pink-400 opacity-50" fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 490 490" xml:space="preserve">
<path id="XMLID_25_" d="M316.554,108.336c4.553,6.922,2.629,16.223-4.296,20.774c-3.44,2.261-6.677,4.928-9.621,7.929
c-2.938,2.995-6.825,4.497-10.715,4.497c-3.791,0-7.585-1.427-10.506-4.291c-5.917-5.801-6.009-15.298-0.207-21.212
c4.439-4.524,9.338-8.559,14.562-11.992C302.698,99.491,312.002,101.414,316.554,108.336z M447.022,285.869
c-1.506,1.536-148.839,151.704-148.839,151.704C283.994,452.035,265.106,460,245,460s-38.994-7.965-53.183-22.427L42.978,285.869
c-57.304-58.406-57.304-153.441,0-211.847C70.83,45.634,107.882,30,147.31,30c36.369,0,70.72,13.304,97.69,37.648
C271.971,43.304,306.32,30,342.689,30c39.428,0,76.481,15.634,104.332,44.021C504.326,132.428,504.326,227.463,447.022,285.869z
M425.596,95.028C403.434,72.44,373.991,60,342.69,60c-31.301,0-60.745,12.439-82.906,35.027c-1.122,1.144-2.129,2.533-3.538,3.777
c-7.536,6.654-16.372,6.32-22.491,0c-1.308-1.352-2.416-2.633-3.538-3.777C208.055,72.44,178.612,60,147.31,60
c-31.301,0-60.744,12.439-82.906,35.027c-45.94,46.824-45.94,123.012,0,169.836c1.367,1.393,148.839,151.704,148.839,151.704
C221.742,425.229,233.02,430,245,430c11.98,0,23.258-4.771,31.757-13.433l148.839-151.703l0,0
C471.535,218.04,471.535,141.852,425.596,95.028z M404.169,116.034c-8.975-9.148-19.475-16.045-31.208-20.499
c-7.746-2.939-16.413,0.953-19.355,8.698c-2.942,7.744,0.953,16.407,8.701,19.348c7.645,2.902,14.521,7.431,20.436,13.459
c23.211,23.658,23.211,62.153,0,85.811l-52.648,53.661c-5.803,5.915-5.711,15.412,0.206,21.212
c2.921,2.863,6.714,4.291,10.506,4.291c3.889,0,7.776-1.502,10.714-4.497l52.648-53.661
C438.744,208.616,438.744,151.275,404.169,116.034z"/>
</svg>
<style>
svg {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-30px);
}
100% {
transform: translatey(0px);
}
}
</style>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

2
src/pages/index.astro
View File

@ -3,6 +3,7 @@ import Layout from "../layouts/Layout.astro";
import Prompt from "../components/Prompt.astro"; import Prompt from "../components/Prompt.astro";
import Centerpiece from "../components/Centerpiece.astro"; import Centerpiece from "../components/Centerpiece.astro";
import Icons from "../components/Icons.astro"; import Icons from "../components/Icons.astro";
import Heart from "../components/Heart.astro";
--- ---
<Layout> <Layout>
@ -10,5 +11,6 @@ import Icons from "../components/Icons.astro";
<Prompt /> <Prompt />
<Centerpiece /> <Centerpiece />
<Icons /> <Icons />
<Heart />
</main> </main>
</Layout> </Layout>