implement hero section

This commit is contained in:
Michi 2025-03-09 17:25:58 +01:00
parent 4a703050ec
commit 1f4af3a112
8 changed files with 251 additions and 4 deletions

View file

@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1920" height="1080" preserveAspectRatio="none" viewBox="0 0 1920 1080"><g mask="url(&quot;#SvgjsMask1046&quot;)" fill="none"><path d="M1224.156,1058.12C1262.517,1058.259,1299.188,1041.578,1319.727,1009.179C1341.84,974.298,1350.292,928.83,1328.265,893.894C1307.257,860.574,1263.486,855.421,1224.156,857.599C1189.262,859.531,1156.801,874.785,1138.269,904.414C1118.486,936.043,1111.58,975.924,1129.778,1008.491C1148.361,1041.747,1186.06,1057.982,1224.156,1058.12" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path><path d="M1028.184,384.367C1060.123,385.106,1090.994,370.492,1107.55,343.168C1124.705,314.856,1126.344,278.892,1109.281,250.524C1092.685,222.934,1060.38,211.472,1028.184,211.219C995.46,210.961,961.059,220.804,944.845,249.23C928.743,277.46,937.876,311.973,954.935,339.635C971.03,365.734,997.529,383.658,1028.184,384.367" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path><path d="M776.568,820.399C829.975,817.345,871.243,777.124,895.516,729.454C917.432,686.413,915.933,636.088,891.685,594.317C867.541,552.726,824.592,527.089,776.568,524.546C723.269,521.724,667.593,536.341,638.207,580.897C605.989,629.747,602.198,693.882,631.47,744.552C660.73,795.202,718.169,823.738,776.568,820.399" fill="rgba(22, 22, 22, 0.4)" class="triangle-float1"></path><path d="M1537.468,782.473C1637.907,782.337,1718.82,706.214,1764.617,616.824C1806.329,535.407,1793.164,443.397,1753.393,361.014C1706.096,263.041,1646.232,148.784,1537.468,146.296C1426.556,143.759,1352.087,250.883,1303.724,350.727C1262.176,436.502,1263.874,533.627,1309.25,617.44C1357.154,705.924,1436.849,782.609,1537.468,782.473" fill="rgba(22, 22, 22, 0.4)" class="triangle-float2"></path></g><defs><mask id="SvgjsMask1046"><rect width="1920" height="1080" fill="#ffffff"></rect></mask><style>
@keyframes float1 {
0%{transform: translate(0, 0)}
50%{transform: translate(-10px, 0)}
100%{transform: translate(0, 0)}
}
.triangle-float1 {
animation: float1 5s infinite;
}
@keyframes float2 {
0%{transform: translate(0, 0)}
50%{transform: translate(-5px, -5px)}
100%{transform: translate(0, 0)}
}
.triangle-float2 {
animation: float2 4s infinite;
}
@keyframes float3 {
0%{transform: translate(0, 0)}
50%{transform: translate(0, -10px)}
100%{transform: translate(0, 0)}
}
.triangle-float3 {
animation: float3 6s infinite;
}
</style></defs></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB