Code complet | Typo claire pour fond sombre
<style>
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");
.v-lt *{ color: #FFFCF7; }
.logo-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
font-size: 16px;
position: relative;
}
.logo-wrapper svg.logo {
max-width: 240px;
max-height: 240px;
width: 50vw;
height: 50vw;
overflow: visible;
animation: logo-scale 1s cubic-bezier(0.7, 0, 0.3, 1) 0.5s both;
transform-origin: center;
}
.logo-wrapper .app-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
justify-content: center;
font-family: "Outfit", sans-serif;
margin-top: 1rem;
animation: reveal-up-2 0.5s cubic-bezier(0.1, 0, 0.4, 1) 1.25s backwards;
}
.app-title .name-op {
font-weight: 900;
font-size: 1.8rem;
}
.app-title .separator {
font-weight: 200;
font-size: 2rem;
display: inline-block;
transform: rotate(30deg);
}
.app-title .name-suite {
font-weight: 500;
font-size: 1.8rem;
}
.app-title .baseline {
text-align: center;
width: 100%;
font-weight: 400;
font-size: 0.9rem;
margin-top: 0.4rem;
}
#cr-left-1,
#cr-top-2,
#cr-right-3,
#cr-bottom-center-4,
#cr-bottom-5,
#cr-top-center-6 {
transform-box: fill-box;
}
/* Forme 1 — démarre lentement */
#cr-left-1 {
animation: reveal-up 0.5s cubic-bezier(0.4, 0, 0.6, 0.4) 0s both;
}
/* Forme 2 — s'accélère */
#cr-top-2 {
animation: reveal-right 0.4s cubic-bezier(0.3, 0, 0.3, 0.7) 0.35s both;
}
/* Forme 3 — vitesse max */
#cr-right-3 {
animation: reveal-down 0.3s cubic-bezier(0.2, 0, 0.2, 1) 0.6s both;
}
/* Forme 4 — commence à décélérer */
#cr-bottom-center-4 {
animation: reveal-left 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.8s both;
}
/* Forme 5 — ralentit */
#cr-bottom-5 {
animation: reveal-up 0.4s cubic-bezier(0.1, 0, 0.4, 1) 1s both;
}
/* Forme 6 — finit très doucement */
#cr-top-center-6 {
animation: reveal-diagonal-30 0.25s cubic-bezier(0, 0, 0.2, 1) 1.15s both;
}
@keyframes logo-scale {
from {
transform: scale(0.7);
}
to {
transform: scale(1);
}
}
@keyframes reveal-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes reveal-down {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes reveal-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes reveal-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes reveal-diagonal-30 {
from {
transform: translate(-50%, 87%);
}
to {
transform: translate(0, 0);
}
}
@keyframes reveal-up-2 {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
<div class="logo-wrapper v-lt">
<svg
class="logo"
style="
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: optimizeQuality;
fill-rule: evenodd;
clip-rule: evenodd;
"
viewBox="0 0 1.422 1.422"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-left-1"
x1=".249"
x2=".249"
y1="1.256"
y2=".366"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #cf65ae"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #0068b3"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-bottom-5"
x1=".557"
x2=".557"
y1=".546"
y2="1.433"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #fcd465"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #5ce6a1"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-bottom-center-4"
x1=".773"
x2="1.265"
y1="1.331"
y2="1.003"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #5ce6a1"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #57b9ff"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-top-center-6"
x1=".768"
x2=".646"
y1=".367"
y2=".728"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #fc9265"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #fcd465"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-right-3"
x1="1.173"
x2="1.173"
y1="1.078"
y2=".366"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #57b9ff"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #0068b3"
/>
</linearGradient>
<clipPath id="clip-left-1">
<rect
height="1.622"
id="cr-left-1"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-top-2">
<rect
height="1.622"
id="cr-top-2"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-right-3">
<rect
height="1.622"
id="cr-right-3"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-bottom-center-4">
<rect
height="1.622"
id="cr-bottom-center-4"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-bottom-5">
<rect
height="1.622"
id="cr-bottom-5"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-top-center-6">
<rect
height="1.622"
id="cr-top-center-6"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
</defs>
<path d="M0 0h1.422v1.422H0z" style="fill: none" />
<path
d="M.371.523.269.453.141.389a.05.05 0 0 0-.008.025v.614c0 .016.008.032.023.04l.209.121V.544q0-.012.006-.021"
style="fill: url(#grad-left-1)"
class="shape left-1"
clip-path="url(#clip-left-1)"
/>
<path
d="m.447.569.231.134A.03.03 0 0 1 .692.689L.923.555C.93.552.938.542.917.529L.731.422a.04.04 0 0 0-.039 0L.463.554C.451.561.45.564.447.569"
style="fill: url(#grad-top-center-6)"
class="shape top-center-6"
clip-path="url(#clip-top-center-6)"
/>
<path
d="m1.051.922.102.07.128.063a.04.04 0 0 0 .008-.025V.414a.05.05 0 0 0-.008-.025l-.128.064-.102.07.002.004.001.001v.001h.001l.002.012v.001h.001V.9a.04.04 0 0 1-.007.022"
style="fill: url(#grad-right-3)"
class="shape right-3"
clip-path="url(#clip-right-3)"
/>
<path
d="M1.283 1.052 1.052.919a.04.04 0 0 1-.015.015L.749 1.1v.267l.514-.297a.04.04 0 0 0 .02-.018"
style="fill: url(#grad-bottom-center-4)"
class="shape bottom-center-4"
clip-path="url(#clip-bottom-center-4)"
/>
<path
d="m1.052.525.231-.133a.1.1 0 0 0-.017-.016L.736.069A.05.05 0 0 0 .69.067l-.139.08-.395.229a.04.04 0 0 0-.017.016L.37.525A.03.03 0 0 1 .384.511L.692.333a.04.04 0 0 1 .039 0l.307.178h.001l.001.001.001.001.001.001h.001l.001.001h.001v.001h.001v.001h.001v.001l.001.001.001.001z"
style="fill: #0068b3"
class="shape top-2"
clip-path="url(#clip-top-2)"
/>
<path
d="M.68.7.582.629.449.566S.441.575.441.587v.646l.232.134V.722Q.673.71.68.7"
style="fill: url(#grad-bottom-5)"
class="shape bottom-5"
clip-path="url(#clip-bottom-5)"
/>
</svg>
<div class="app-title">
<span class="name-op">OP</span>
<span class="separator">|</span>
<span class="name-suite">Custom Ops Suite</span>
<span class="baseline">By My Digital Buildings</span>
</div>
</div>
Code complet | Typo sombre pour fond clair
<style>
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");
.v-dk *{ color: #002540; }
.logo-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
font-size: 16px;
position: relative;
}
.logo-wrapper svg.logo {
max-width: 240px;
max-height: 240px;
width: 50vw;
height: 50vw;
overflow: visible;
animation: logo-scale 1s cubic-bezier(0.7, 0, 0.3, 1) 0.5s both;
transform-origin: center;
}
.logo-wrapper .app-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
justify-content: center;
font-family: "Outfit", sans-serif;
margin-top: 1rem;
animation: reveal-up-2 0.5s cubic-bezier(0.1, 0, 0.4, 1) 1.25s backwards;
}
.app-title .name-op {
font-weight: 900;
font-size: 1.8rem;
}
.app-title .separator {
font-weight: 200;
font-size: 2rem;
display: inline-block;
transform: rotate(30deg);
}
.app-title .name-suite {
font-weight: 500;
font-size: 1.8rem;
}
.app-title .baseline {
text-align: center;
width: 100%;
font-weight: 400;
font-size: 0.9rem;
margin-top: 0.4rem;
}
#cr-left-1,
#cr-top-2,
#cr-right-3,
#cr-bottom-center-4,
#cr-bottom-5,
#cr-top-center-6 {
transform-box: fill-box;
}
/* Forme 1 — démarre lentement */
#cr-left-1 {
animation: reveal-up 0.5s cubic-bezier(0.4, 0, 0.6, 0.4) 0s both;
}
/* Forme 2 — s'accélère */
#cr-top-2 {
animation: reveal-right 0.4s cubic-bezier(0.3, 0, 0.3, 0.7) 0.35s both;
}
/* Forme 3 — vitesse max */
#cr-right-3 {
animation: reveal-down 0.3s cubic-bezier(0.2, 0, 0.2, 1) 0.6s both;
}
/* Forme 4 — commence à décélérer */
#cr-bottom-center-4 {
animation: reveal-left 0.3s cubic-bezier(0.2, 0, 0.3, 1) 0.8s both;
}
/* Forme 5 — ralentit */
#cr-bottom-5 {
animation: reveal-up 0.4s cubic-bezier(0.1, 0, 0.4, 1) 1s both;
}
/* Forme 6 — finit très doucement */
#cr-top-center-6 {
animation: reveal-diagonal-30 0.25s cubic-bezier(0, 0, 0.2, 1) 1.15s both;
}
@keyframes logo-scale {
from {
transform: scale(0.7);
}
to {
transform: scale(1);
}
}
@keyframes reveal-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes reveal-down {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes reveal-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes reveal-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes reveal-diagonal-30 {
from {
transform: translate(-50%, 87%);
}
to {
transform: translate(0, 0);
}
}
@keyframes reveal-up-2 {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
<div class="logo-wrapper v-dk">
<svg
class="logo"
style="
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
image-rendering: optimizeQuality;
fill-rule: evenodd;
clip-rule: evenodd;
"
viewBox="0 0 1.422 1.422"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-left-1"
x1=".249"
x2=".249"
y1="1.256"
y2=".366"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #cf65ae"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #0068b3"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-bottom-5"
x1=".557"
x2=".557"
y1=".546"
y2="1.433"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #fcd465"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #5ce6a1"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-bottom-center-4"
x1=".773"
x2="1.265"
y1="1.331"
y2="1.003"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #5ce6a1"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #57b9ff"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-top-center-6"
x1=".768"
x2=".646"
y1=".367"
y2=".728"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #fc9265"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #fcd465"
/>
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="grad-right-3"
x1="1.173"
x2="1.173"
y1="1.078"
y2=".366"
>
<stop
offset="0"
style="stop-opacity: 1; stop-color: #57b9ff"
/>
<stop
offset="1"
style="stop-opacity: 1; stop-color: #0068b3"
/>
</linearGradient>
<clipPath id="clip-left-1">
<rect
height="1.622"
id="cr-left-1"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-top-2">
<rect
height="1.622"
id="cr-top-2"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-right-3">
<rect
height="1.622"
id="cr-right-3"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-bottom-center-4">
<rect
height="1.622"
id="cr-bottom-center-4"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-bottom-5">
<rect
height="1.622"
id="cr-bottom-5"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
<clipPath id="clip-top-center-6">
<rect
height="1.622"
id="cr-top-center-6"
width="1.622"
x="-0.1"
y="-0.1"
/>
</clipPath>
</defs>
<path d="M0 0h1.422v1.422H0z" style="fill: none" />
<path
d="M.371.523.269.453.141.389a.05.05 0 0 0-.008.025v.614c0 .016.008.032.023.04l.209.121V.544q0-.012.006-.021"
style="fill: url(#grad-left-1)"
class="shape left-1"
clip-path="url(#clip-left-1)"
/>
<path
d="m.447.569.231.134A.03.03 0 0 1 .692.689L.923.555C.93.552.938.542.917.529L.731.422a.04.04 0 0 0-.039 0L.463.554C.451.561.45.564.447.569"
style="fill: url(#grad-top-center-6)"
class="shape top-center-6"
clip-path="url(#clip-top-center-6)"
/>
<path
d="m1.051.922.102.07.128.063a.04.04 0 0 0 .008-.025V.414a.05.05 0 0 0-.008-.025l-.128.064-.102.07.002.004.001.001v.001h.001l.002.012v.001h.001V.9a.04.04 0 0 1-.007.022"
style="fill: url(#grad-right-3)"
class="shape right-3"
clip-path="url(#clip-right-3)"
/>
<path
d="M1.283 1.052 1.052.919a.04.04 0 0 1-.015.015L.749 1.1v.267l.514-.297a.04.04 0 0 0 .02-.018"
style="fill: url(#grad-bottom-center-4)"
class="shape bottom-center-4"
clip-path="url(#clip-bottom-center-4)"
/>
<path
d="m1.052.525.231-.133a.1.1 0 0 0-.017-.016L.736.069A.05.05 0 0 0 .69.067l-.139.08-.395.229a.04.04 0 0 0-.017.016L.37.525A.03.03 0 0 1 .384.511L.692.333a.04.04 0 0 1 .039 0l.307.178h.001l.001.001.001.001.001.001h.001l.001.001h.001v.001h.001v.001h.001v.001l.001.001.001.001z"
style="fill: #0068b3"
class="shape top-2"
clip-path="url(#clip-top-2)"
/>
<path
d="M.68.7.582.629.449.566S.441.575.441.587v.646l.232.134V.722Q.673.71.68.7"
style="fill: url(#grad-bottom-5)"
class="shape bottom-5"
clip-path="url(#clip-bottom-5)"
/>
</svg>
<div class="app-title">
<span class="name-op">OP</span>
<span class="separator">|</span>
<span class="name-suite">Custom Ops Suite</span>
<span class="baseline">By My Digital Buildings</span>
</div>
</div>