131 lines
7.7 KiB
XML
131 lines
7.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 344" role="img" aria-labelledby="t-akad">
|
|
<title id="t-akad">Akademia Wodociągowca - obieg kompetencji: praktyka wdrożeniowa i doradcza zasila platformę kursową, a wyszkolone zespoły wracają z pytaniami z rynku</title>
|
|
<defs>
|
|
<pattern id="akad-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/>
|
|
</pattern>
|
|
<marker id="akad-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
|
</marker>
|
|
<style><![CDATA[
|
|
/* Rysunek powstaje jak na ploterze: linie same się kreślą.
|
|
pathLength="1" sprawia, że długość ścieżki nie ma znaczenia. */
|
|
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: akad-draw 1.1s ease-out forwards; }
|
|
.d1 { animation-delay: .05s } .d2 { animation-delay: .3s }
|
|
.d3 { animation-delay: .55s } .d4 { animation-delay: .8s }
|
|
@keyframes akad-draw { to { stroke-dashoffset: 0 } }
|
|
|
|
.fade { opacity: 0; animation: akad-fade .5s ease-out forwards; }
|
|
.f1 { animation-delay: .5s } .f2 { animation-delay: .75s }
|
|
.f3 { animation-delay: 1s } .f4 { animation-delay: 1.25s }
|
|
@keyframes akad-fade { to { opacity: 1 } }
|
|
|
|
/* Przepływ wiedzy - kreska sunie w stronę odbiorcy. */
|
|
.flow { stroke-dasharray: 7 7; animation: akad-flow 1.4s linear infinite; }
|
|
@keyframes akad-flow { to { stroke-dashoffset: -14 } }
|
|
|
|
.pulse { animation: akad-pulse 2s ease-in-out infinite; }
|
|
@keyframes akad-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.draw, .fade, .flow, .pulse {
|
|
animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: 1;
|
|
}
|
|
}
|
|
]]></style>
|
|
</defs>
|
|
<rect width="720" height="344" fill="#eaeef2"/>
|
|
<rect width="720" height="344" fill="url(#akad-grid)"/>
|
|
|
|
<!-- ── Źródła wiedzy ─────────────────────────────────────────────────── -->
|
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
|
<rect class="draw d1" pathLength="1" x="40" y="66" width="150" height="44"/>
|
|
<rect class="draw d1" pathLength="1" x="40" y="124" width="150" height="44"/>
|
|
<rect class="draw d1" pathLength="1" x="40" y="182" width="150" height="44"/>
|
|
</g>
|
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10.5"
|
|
text-anchor="middle" class="fade f1">
|
|
<text x="115" y="92" textLength="120" lengthAdjust="spacingAndGlyphs">WDROŻENIA U KLIENTÓW</text>
|
|
<text x="115" y="150" textLength="112" lengthAdjust="spacingAndGlyphs">PROJEKTY DORADCZE</text>
|
|
<text x="115" y="208" textLength="120" lengthAdjust="spacingAndGlyphs">PYTANIA CZYTELNIKÓW</text>
|
|
</g>
|
|
<text x="40" y="46" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="11" textLength="90" lengthAdjust="spacingAndGlyphs" opacity=".72" class="fade f1">CO ROBIMY</text>
|
|
|
|
<!-- zbiorczy przepływ do Akademii -->
|
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
|
<path class="draw d2" pathLength="1" d="M190 88 H228 V146"/>
|
|
<path class="draw d2" pathLength="1" d="M190 146 H228"/>
|
|
<path class="draw d2" pathLength="1" d="M190 204 H228 V146"/>
|
|
<path class="flow" d="M228 146 H266" marker-end="url(#akad-arrow)"/>
|
|
</g>
|
|
|
|
<!-- ── Akademia Wodociągowca ─────────────────────────────────────────── -->
|
|
<rect class="draw d3" pathLength="1" x="270" y="96" width="200" height="150"
|
|
fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
|
<rect x="270" y="96" width="200" height="34" fill="#1d2d3d" class="fade f2"/>
|
|
<text x="370" y="119" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="14" font-weight="600" text-anchor="middle"
|
|
textLength="164" lengthAdjust="spacingAndGlyphs" class="fade f2">AKADEMIA WODOCIĄGOWCA</text>
|
|
|
|
<!-- znacznik transmisji na żywo -->
|
|
<g class="fade f3">
|
|
<rect x="286" y="144" width="46" height="15" fill="#1d2d3d"/>
|
|
<circle cx="295" cy="151.5" r="3" fill="#f2f2f3" class="pulse"/>
|
|
<text x="303" y="155" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="9.5" textLength="24" lengthAdjust="spacingAndGlyphs">LIVE</text>
|
|
</g>
|
|
|
|
<!-- ekran kursu -->
|
|
<g stroke="#f2f2f3" stroke-width="1.6" fill="none" class="fade f3">
|
|
<rect x="286" y="170" width="52" height="36"/>
|
|
<path d="M352 178h102M352 188h74M352 198h102"/>
|
|
</g>
|
|
<path d="m305 182 12 6-12 6z" fill="#f2f2f3" class="fade f3"/>
|
|
<text x="370" y="230" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="10" text-anchor="middle" opacity=".92"
|
|
textLength="176" lengthAdjust="spacingAndGlyphs" class="fade f3">WEBINARIA · KURSY · CERTYFIKATY</text>
|
|
|
|
<!-- ── Zespoły w przedsiębiorstwach ──────────────────────────────────── -->
|
|
<path class="flow" d="M470 171 H516" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#akad-arrow)"/>
|
|
<text x="493" y="160" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="9.5" text-anchor="middle" textLength="44" lengthAdjust="spacingAndGlyphs" class="fade f3">WIEDZA</text>
|
|
|
|
<rect class="draw d4" pathLength="1" x="520" y="96" width="160" height="150" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
|
<rect x="520" y="96" width="160" height="30" fill="#5980a6" fill-opacity=".2" class="fade f4"/>
|
|
<text x="600" y="116" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="11" font-weight="600" text-anchor="middle"
|
|
textLength="132" lengthAdjust="spacingAndGlyphs" class="fade f4">ZESPOŁY W FIRMACH</text>
|
|
|
|
<g stroke="#416180" stroke-width="1.5" fill="none" class="fade f4">
|
|
<circle cx="558" cy="152" r="11"/><path d="M542 182v-12a16 16 0 0 1 32 0v12"/>
|
|
<circle cx="600" cy="152" r="11"/><path d="M584 182v-12a16 16 0 0 1 32 0v12"/>
|
|
<circle cx="642" cy="152" r="11"/><path d="M626 182v-12a16 16 0 0 1 32 0v12"/>
|
|
</g>
|
|
<g fill="#5980a6" fill-opacity=".24" class="fade f4">
|
|
<circle cx="558" cy="152" r="11"/><circle cx="600" cy="152" r="11"/><circle cx="642" cy="152" r="11"/>
|
|
</g>
|
|
<!-- certyfikat -->
|
|
<g class="fade f4">
|
|
<rect x="556" y="200" width="88" height="26" fill="#f2f2f3" stroke="#416180" stroke-width="1.4"/>
|
|
<path d="m566 213 5 5 9-11" stroke="#5980a6" stroke-width="2" fill="none"/>
|
|
<text x="608" y="217" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="9.5" text-anchor="middle" textLength="46" lengthAdjust="spacingAndGlyphs">CERTYFIKAT</text>
|
|
</g>
|
|
|
|
<!-- ── Pętla zwrotna: rynek podpowiada tematy ────────────────────────── -->
|
|
<path class="draw d4" pathLength="1" d="M600 246 V310 H115 V232" stroke="#5980a6" stroke-width="1.8"
|
|
fill="none" marker-end="url(#akad-arrow)"/>
|
|
<rect x="276" y="298" width="172" height="22" fill="#eaeef2" class="fade f4"/>
|
|
<text x="362" y="314" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
|
font-size="10.5" text-anchor="middle" textLength="158" lengthAdjust="spacingAndGlyphs" class="fade f4">PYTANIA WRACAJĄ DO PROGRAMU</text>
|
|
|
|
<!-- ── krzyżyki rejestracyjne ────────────────────────────────────────── -->
|
|
<g stroke="#1d1f20" stroke-width="1" opacity=".45">
|
|
<path d="M263 89v13M257 95h13"/>
|
|
<path d="M477 89v13M471 95h13"/>
|
|
<path d="M263 241v13M257 247h13"/>
|
|
<path d="M477 241v13M471 247h13"/>
|
|
</g>
|
|
</svg>
|
