uradotdesign
/
ura.design
mirror of https://github.com/uradotdesign/ura.design
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added OTF website illustrations case study

pull/24/head
Anxhelo Lushka 1 year ago
parent
3081215659
commit
5344a81b10
No known key found for this signature in database GPG Key ID: C86D6CF1F7FAAA35
21 changed files with 4500 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      assets/scss/_custom.scss
  2. 65
      content/de/work/otf-website-illustrations.md
  3. 65
      content/en/work/otf-website-illustrations.md
  4. 270
      static/img/work/otf-website-illustrations-color-system-dark-mobile.svg
  5. 92
      static/img/work/otf-website-illustrations-color-system-dark.svg
  6. 468
      static/img/work/otf-website-illustrations-color-system-mobile.svg
  7. BIN
      static/img/work/otf-website-illustrations-color-system-mobile.webp
  8. 468
      static/img/work/otf-website-illustrations-color-system.svg
  9. BIN
      static/img/work/otf-website-illustrations-color-system.webp
  10. 1088
      static/img/work/otf-website-illustrations-compositions-mobile.svg
  11. 1088
      static/img/work/otf-website-illustrations-compositions.svg
  12. BIN
      static/img/work/otf-website-illustrations-compositions.webp
  13. 166
      static/img/work/otf-website-illustrations-cover-dark.svg
  14. 166
      static/img/work/otf-website-illustrations-cover.svg
  15. BIN
      static/img/work/otf-website-illustrations-cover.webp
  16. 235
      static/img/work/otf-website-illustrations-people-mobile.svg
  17. BIN
      static/img/work/otf-website-illustrations-people-mobile.webp
  18. 235
      static/img/work/otf-website-illustrations-people.svg
  19. BIN
      static/img/work/otf-website-illustrations-people.webp
  20. 18
      static/img/work/otf-website-illustrations.svg
  21. BIN
      static/img/work/otf-website-illustrations.webp

90
assets/scss/_custom.scss
View File

@ -4,7 +4,7 @@ html {
height: 100%;
}
html[data-theme='dark'] {
html[data-theme="dark"] {
& #fader {
background: $gray-900;
}
@ -137,20 +137,55 @@ html[data-theme='dark'] {
& .on-dark {
display: block;
}
.d-lg-block.d-none.on-light {
display: none !important;
}
.d-lg-block.d-none.on-dark {
display: block !important;
}
.d-block.d-lg-none.on-light {
display: none !important;
}
.d-block.d-lg-none.on-dark {
display: none !important;
}
@include media-breakpoint-down(lg) {
.d-lg-block.d-none.on-light {
display: none !important;
}
.d-lg-block.d-none.on-dark {
display: none !important;
}
.d-block.d-lg-none.on-light {
display: none !important;
}
.d-block.d-lg-none.on-dark {
display: block !important;
}
}
}
// Body
body {
line-height: 1.6;
font-family: 'Inter', sans-serif;
font-feature-settings: 'calt' 1, 'frac' 1, 'case' 1, 'ccmp' 1, 'ss01' 1, 'ss02' 1, 'ss03' 1, 'zero' 1;
font-family: "Inter", sans-serif;
font-feature-settings: "calt" 1, "frac" 1, "case" 1, "ccmp" 1, "ss01" 1,
"ss02" 1, "ss03" 1, "zero" 1;
overflow-y: scroll;
color: $gray-800;
}
@supports (font-variation-settings: normal) {
body {
font-family: 'Inter var', sans-serif;
font-family: "Inter var", sans-serif;
}
}
@ -217,7 +252,7 @@ h3,
h4,
h5,
h6 {
font-feature-settings: 'ss01' 1, 'ss03' 1, 'zero' 1, 'cv02' 1, 'cv11' 1;
font-feature-settings: "ss01" 1, "ss03" 1, "zero" 1, "cv02" 1, "cv11" 1;
font-weight: 600;
letter-spacing: -0.025em;
}
@ -242,10 +277,10 @@ nav .nav-link {
font-weight: 500;
display: inline-block;
position: relative;
font-feature-settings: 'cv11' 1;
font-feature-settings: "cv11" 1;
&:after {
content: '';
content: "";
position: absolute;
left: 0;
bottom: 0;
@ -421,6 +456,14 @@ nav .nav-link {
display: none;
}
.d-lg-block.d-none.on-light {
display: block !important;
}
.d-lg-block.d-none.on-dark {
display: none !important;
}
// Footer
footer {
@ -777,7 +820,7 @@ address {
}
&-summary {
font-size: 1.5rem;
font-weight: 400;
font-weight: 600;
margin-bottom: 1rem;
}
& .category {
@ -812,7 +855,7 @@ address {
}
}
& .sticky-xl-top {
font-feature-settings: 'cv08' 0, 'cv05' 1;
font-feature-settings: "cv08" 0, "cv05" 1;
}
& p img {
max-width: 100%;
@ -841,7 +884,8 @@ address {
font-size: 1.5rem;
font-weight: 500;
padding: 1rem 1rem 4rem 1rem;
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08), 0px 3px 5px rgba(0, 0, 0, 0.04), 0px 2.5px 2px rgba(0, 0, 0, 0.02);
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08),
0px 3px 5px rgba(0, 0, 0, 0.04), 0px 2.5px 2px rgba(0, 0, 0, 0.02);
& p {
color: #333 !important;
background-color: transparent !important;
@ -1111,7 +1155,9 @@ details[open] summary svg {
&:hover,
&:focus-visible {
& path {
d: path('M0 14.018h45.021L34.899 3.758 38.298.405l15.784 16-15.784 16-3.399-3.353 10.121-10.26H0v-4.775z');
d: path(
"M0 14.018h45.021L34.899 3.758 38.298.405l15.784 16-15.784 16-3.399-3.353 10.121-10.26H0v-4.775z"
);
}
}
}
@ -1124,7 +1170,7 @@ details[open] summary svg {
&:focus-visible {
& path {
d: path(
'M55 18.6658L9.91329 18.6658L20.0344 28.9255L16.6355 32.2785L0.851634 16.2786L16.6355 0.278808L20.0344 3.63184L9.91333 13.8914L55 13.8913L55 18.6658Z'
"M55 18.6658L9.91329 18.6658L20.0344 28.9255L16.6355 32.2785L0.851634 16.2786L16.6355 0.278808L20.0344 3.63184L9.91333 13.8914L55 13.8913L55 18.6658Z"
);
}
}
@ -1301,7 +1347,7 @@ details[open] summary svg {
position: relative;
&:after {
content: '';
content: "";
position: absolute;
left: 0;
bottom: 0;
@ -1554,7 +1600,7 @@ details[open] summary svg {
position: relative;
&:not(:last-of-type):after {
content: '';
content: "";
position: absolute;
left: 0.75rem;
bottom: -1.5rem;
@ -1618,6 +1664,22 @@ details[open] summary svg {
z-index: 10;
transition: 0.2s;
}
.d-lg-block.d-none.on-light {
display: none !important;
}
.d-lg-block.d-none.on-dark {
display: none !important;
}
.d-block.d-lg-none.on-light {
display: block !important;
}
.d-block.d-lg-none.on-dark {
display: none !important;
}
}
// Clients

65
content/de/work/otf-website-illustrations.md
View File

@ -0,0 +1,65 @@
+++
layout = "work/single"
theme = "light"
background = "#FFFFFF"
accent = "#546991"
text = "#404041"
title = "Open Technology Fund - Website Illustrations"
summary = "We created a fresh visual style, offering a series of illustrations for the OTF's new website. These visuals highlight the importance of open technology and, most importantly, the community. They enhance OTF’s website, providing a visually engaging user experience."
date = "2023-10-16 12:00:00 +0200"
images = ["img/work/otf-website-illustrations.webp", "otf-website-illustrations"]
tags = []
categories = ["Illustrations"]
[links]
+++
At the heart of OTF's mission lies the profound connection between people and open technology. By empowering communities worldwide, OTF enables individuals to harness the power of technology for meaningful change. By supporting open-source initiatives, OTF fosters collaboration and knowledge-sharing, paving the way for a more connected world.
In essence, OTF's work is not just about technology; it's about the boundless opportunities it creates for people, bridging gaps, and fostering a global community united by the principles of openness and accessibility.
---
Building upon this connection between technology and community, we designed the new illustrations to 'connect the pixels' between these two essential elements. Each visual element was thoughtfully designed to radiate warmth and inclusivity, offering a welcoming presence on the OTF's website.
{{< figure class="with-js on-light" src="/img/work/otf-website-illustrations-cover.svg" alt="OTF Website Illustrations Cover" >}}
{{< figure class="with-js on-dark" src="/img/work/otf-website-illustrations-cover-dark.svg" alt="OTF Website Illustrations Cover" >}}
{{< figure class="no-js" src="/img/work/otf-website-illustrations-cover.webp" alt="OTF Website Illustrations Cover" >}}
## Color System
We started the design process developing a color system, an extended color palette based on OTF's existing brand colors. This thoughtful approach ensures that the new hues seamlessly integrate with OTF's established visual identity. By offering this color system, we not only maintain brand consistency but also introduce new shades that complement the existing colors for different scenarios, such as the illustrations. This allows the illustrations to harmonize effortlessly with OTF's overall branding, creating a unified and inviting visual experience across all platforms. Every illustration stroke and design element, grounded in this extended color system, subtly reinforces OTF's brand identity.
{{< figure class="with-js on-light d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-light d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system-mobile.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-dark d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system-dark.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-dark d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system-dark-mobile.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system.webp" alt="OTF Website Illustrations Color System" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system.webp" alt="OTF Website Illustrations Color System" >}}
## The People
Human presence is central in OTF’s visual identity. Each composition features people, underlining the idea that technology exists to help us connect. It's a visual reminder that technology serves humanity, not the other way around.We created a variable-based system where each person is customizable in an abstract style. We used colors from our established palette. This approach ensures alignment with OTF's community, not focusing on specific demographic representations, while representing a diverse and inclusive community.
{{< figure class="with-js d-lg-block d-none" src="/img/work/otf-website-illustrations-people.svg" alt="OTF Website Illustrations People" >}}
{{< figure class="with-js d-block d-lg-none" src="/img/work/otf-website-illustrations-people-mobile.svg" alt="OTF Website Illustrations People" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-people.webp" alt="OTF Website Illustrations People" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-people-mobile.webp" alt="OTF Website Illustrations People" >}}
## Compositions
We offered six different compositions, one for each page of The OTF’s website, serving as a visual narrative that depict the collaboration and shared progress. By seamlessly integrating the intricate tapestry of technology and community, these illustrations create an inviting atmosphere, inviting visitors to explore and participate.
{{< figure class="with-js d-lg-block d-none" src="/img/work/otf-website-illustrations-compositions.svg" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="with-js d-block d-lg-none" src="/img/work/otf-website-illustrations-compositions-mobile.svg" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-compositions.webp" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-compositions-mobile.webp" alt="OTF Website Illustrations Compositions" >}}
## How we helped
- **Innovative Visual Language**: Introduced an innovative visual language through pixelated patterns, technology blocks and human avatars, providing a distinctive and recognizable style for OTF's illustrations.
- **Enhanced Brand Identity**: The illustrations, grounded in the extended color system, reinforce OTF's brand identity effectively. Each stroke and design element aligns with the established visual identity, reinforcing brand consistency and recognition.
- **Engaging and Approachable Presence**: The illustrations become a bridge, inviting visitors to explore the world of open technology. Their warm and approachable presence on OTF's website engages visitors, encouraging them to participate.

65
content/en/work/otf-website-illustrations.md
View File

@ -0,0 +1,65 @@
+++
layout = "work/single"
theme = "light"
background = "#FFFFFF"
accent = "#546991"
text = "#404041"
title = "Open Technology Fund - Website Illustrations"
summary = "We created a fresh visual style, offering a series of illustrations for the OTF's new website. These visuals highlight the importance of open technology and, most importantly, the community. They enhance OTF’s website, providing a visually engaging user experience."
date = "2023-10-16 12:00:00 +0200"
images = ["img/work/otf-website-illustrations.webp", "otf-website-illustrations"]
tags = []
categories = ["Illustrations"]
[links]
+++
At the heart of OTF's mission lies the profound connection between people and open technology. By empowering communities worldwide, OTF enables individuals to harness the power of technology for meaningful change. By supporting open-source initiatives, OTF fosters collaboration and knowledge-sharing, paving the way for a more connected world.
In essence, OTF's work is not just about technology; it's about the boundless opportunities it creates for people, bridging gaps, and fostering a global community united by the principles of openness and accessibility.
---
Building upon this connection between technology and community, we designed the new illustrations to 'connect the pixels' between these two essential elements. Each visual element was thoughtfully designed to radiate warmth and inclusivity, offering a welcoming presence on the OTF's website.
{{< figure class="with-js on-light" src="/img/work/otf-website-illustrations-cover.svg" alt="OTF Website Illustrations Cover" >}}
{{< figure class="with-js on-dark" src="/img/work/otf-website-illustrations-cover-dark.svg" alt="OTF Website Illustrations Cover" >}}
{{< figure class="no-js" src="/img/work/otf-website-illustrations-cover.webp" alt="OTF Website Illustrations Cover" >}}
## Color System
We started the design process developing a color system, an extended color palette based on OTF's existing brand colors. This thoughtful approach ensures that the new hues seamlessly integrate with OTF's established visual identity. By offering this color system, we not only maintain brand consistency but also introduce new shades that complement the existing colors for different scenarios, such as the illustrations. This allows the illustrations to harmonize effortlessly with OTF's overall branding, creating a unified and inviting visual experience across all platforms. Every illustration stroke and design element, grounded in this extended color system, subtly reinforces OTF's brand identity.
{{< figure class="with-js on-light d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-light d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system-mobile.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-dark d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system-dark.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="with-js on-dark d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system-dark-mobile.svg" alt="OTF Website Illustrations Color System" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-color-system.webp" alt="OTF Website Illustrations Color System" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-color-system.webp" alt="OTF Website Illustrations Color System" >}}
## The People
Human presence is central in OTF’s visual identity. Each composition features people, underlining the idea that technology exists to help us connect. It's a visual reminder that technology serves humanity, not the other way around.We created a variable-based system where each person is customizable in an abstract style. We used colors from our established palette. This approach ensures alignment with OTF's community, not focusing on specific demographic representations, while representing a diverse and inclusive community.
{{< figure class="with-js d-lg-block d-none" src="/img/work/otf-website-illustrations-people.svg" alt="OTF Website Illustrations People" >}}
{{< figure class="with-js d-block d-lg-none" src="/img/work/otf-website-illustrations-people-mobile.svg" alt="OTF Website Illustrations People" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-people.webp" alt="OTF Website Illustrations People" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-people-mobile.webp" alt="OTF Website Illustrations People" >}}
## Compositions
We offered six different compositions, one for each page of The OTF’s website, serving as a visual narrative that depict the collaboration and shared progress. By seamlessly integrating the intricate tapestry of technology and community, these illustrations create an inviting atmosphere, inviting visitors to explore and participate.
{{< figure class="with-js d-lg-block d-none" src="/img/work/otf-website-illustrations-compositions.svg" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="with-js d-block d-lg-none" src="/img/work/otf-website-illustrations-compositions-mobile.svg" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="no-js d-lg-block d-none" src="/img/work/otf-website-illustrations-compositions.webp" alt="OTF Website Illustrations Compositions" >}}
{{< figure class="no-js d-block d-lg-none" src="/img/work/otf-website-illustrations-compositions-mobile.webp" alt="OTF Website Illustrations Compositions" >}}
## How we helped
- **Innovative Visual Language**: Introduced an innovative visual language through pixelated patterns, technology blocks and human avatars, providing a distinctive and recognizable style for OTF's illustrations.
- **Enhanced Brand Identity**: The illustrations, grounded in the extended color system, reinforce OTF's brand identity effectively. Each stroke and design element aligns with the established visual identity, reinforcing brand consistency and recognition.
- **Engaging and Approachable Presence**: The illustrations become a bridge, inviting visitors to explore the world of open technology. Their warm and approachable presence on OTF's website engages visitors, encouraging them to participate.

270
static/img/work/otf-website-illustrations-color-system-dark-mobile.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

92
static/img/work/otf-website-illustrations-color-system-dark.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

468
static/img/work/otf-website-illustrations-color-system-mobile.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
static/img/work/otf-website-illustrations-color-system-mobile.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

468
static/img/work/otf-website-illustrations-color-system.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
static/img/work/otf-website-illustrations-color-system.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

1088
static/img/work/otf-website-illustrations-compositions-mobile.svg
View File

File diff suppressed because it is too large
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

1088
static/img/work/otf-website-illustrations-compositions.svg
View File

File diff suppressed because it is too large
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
static/img/work/otf-website-illustrations-compositions.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

166
static/img/work/otf-website-illustrations-cover-dark.svg
View File

@ -0,0 +1,166 @@
<svg width="747" height="548" viewBox="0 0 747 548" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4903_10837)">
<circle cx="252.485" cy="252.013" r="180.774" fill="#DEF3FC"/>
<path d="M391.565 258.037L362.198 260.597C358.864 260.888 355.998 263.135 355.44 266.435C353.531 277.725 354.086 301.474 398.855 283.283C448.381 263.159 455.009 245.932 455.443 239.084C455.563 237.196 453.849 236.04 451.964 236.204C451.035 236.285 450.161 236.674 449.465 237.295C437.677 247.818 424.84 253.78 409.405 256.482L414.583 245.884C416.024 242.934 413.694 239.54 410.423 239.825C408.847 239.963 407.38 240.688 406.315 241.857L391.565 258.037Z" fill="url(#paint0_linear_4903_10837)"/>
<path d="M401.907 289.443C396.408 280.694 384.658 261.395 381.659 254.196C356.661 256.196 293.629 270.967 259.417 254.196C221.17 235.446 111.677 111.705 130.426 247.446C148.322 377.007 341.412 320.941 401.907 289.443Z" fill="url(#paint1_radial_4903_10837)"/>
<rect x="33.9453" y="115.1" width="50.796" height="49.8" fill="#DEF3FC"/>
<rect x="715.129" y="17.7549" width="31.872" height="31.872" fill="#DEF3FC"/>
<rect y="60.1383" width="31.872" height="31.872" fill="#25AAE1"/>
<rect x="33.0859" y="24.7463" width="15.936" height="15.936" fill="#F1E83B"/>
<rect x="685.422" y="62.2451" width="15.936" height="15.936" fill="#F1E83B"/>
<rect x="677.281" y="498.523" width="32.868" height="32.868" fill="#F1E83B"/>
<rect x="328.445" y="13.7708" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="485.137" y="142.205" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="17.9023" y="473.796" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="17.9023" y="496.831" width="28.884" height="28.884" fill="#DEF3FC"/>
<rect x="702.68" y="107.91" width="24.9" height="24.9" fill="#25AAE1"/>
<rect x="357.441" y="20.8828" width="35.856" height="35.856" fill="#00709E"/>
<rect x="421.727" y="0.523193" width="15.936" height="15.936" fill="#25AAE1"/>
<rect x="731.066" y="531.391" width="15.936" height="15.936" fill="#25AAE1"/>
<circle cx="589.133" cy="252.013" r="102.09" fill="#FCFAC1"/>
<path d="M338.201 367.785L367.568 370.345C370.901 370.636 373.767 372.884 374.325 376.183C376.234 387.473 375.679 411.222 330.91 393.031C281.385 372.907 274.756 355.68 274.322 348.832C274.203 346.944 275.917 345.788 277.802 345.952C278.731 346.033 279.605 346.422 280.301 347.043C292.088 357.566 304.926 363.528 320.36 366.23L315.183 355.632C313.742 352.682 316.072 349.288 319.343 349.573C320.919 349.711 322.385 350.436 323.451 351.605L338.201 367.785Z" fill="url(#paint2_linear_4903_10837)"/>
<path d="M327.858 399.191C333.358 390.442 345.107 371.143 348.107 363.944C373.105 365.944 436.137 380.715 470.348 363.944C508.596 345.194 618.088 221.453 599.339 357.194C581.444 486.755 388.354 430.689 327.858 399.191Z" fill="url(#paint3_radial_4903_10837)"/>
<path d="M284.397 353.581L314.695 235.913L422.153 273.282L387.457 395.507L284.397 353.581Z" fill="url(#paint4_linear_4903_10837)"/>
<path d="M441.336 383.871L474.724 272.12L422.151 273.281L387.455 395.506L441.336 383.871Z" fill="url(#paint5_linear_4903_10837)"/>
<path d="M370.518 236.53L314.697 235.912L422.155 273.281L474.153 272.015L370.518 236.53Z" fill="url(#paint6_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M405.478 267.481L406.916 267.982L398.298 298.4L388.561 294.968L379.239 330.056C380.431 330.65 381.015 332.057 380.551 333.34C380.051 334.722 378.526 335.437 377.144 334.938C375.762 334.438 375.047 332.913 375.546 331.531C375.9 330.553 376.768 329.908 377.736 329.793L387.122 294.462L378.204 291.32C377.526 292.257 376.286 292.673 375.144 292.261C373.762 291.761 373.047 290.236 373.547 288.854C374.046 287.472 375.571 286.757 376.953 287.256C378.078 287.663 378.762 288.75 378.707 289.885L388.29 293.261L397.277 296.428L405.478 267.481ZM306.759 266.737L307.139 265.26L350.427 280.25C351.131 279.28 352.431 278.877 353.59 279.352C354.949 279.909 355.6 281.463 355.043 282.823C354.485 284.183 352.931 284.833 351.572 284.276C350.5 283.837 349.869 282.779 349.922 281.685L328.241 274.176L326.357 281.43C327.478 282.09 327.974 283.491 327.466 284.731C326.908 286.09 325.355 286.741 323.995 286.184C322.635 285.626 321.985 284.072 322.542 282.713C322.947 281.724 323.88 281.11 324.881 281.063L326.8 273.677L306.759 266.737ZM290.715 329.047L291.097 327.561L322.372 340.339L324.75 331.341L370.442 349.553C371.158 348.459 372.589 348.033 373.804 348.608C375.132 349.235 375.7 350.821 375.072 352.15C374.444 353.478 372.858 354.047 371.53 353.419C370.57 352.965 370.007 352.011 370.005 351.015L348.587 342.478L346.506 350.166L379.531 363.797C380.242 362.687 381.684 362.25 382.908 362.829C384.236 363.456 384.804 365.042 384.176 366.371C383.548 367.699 381.962 368.267 380.634 367.64C379.684 367.191 379.123 366.252 379.11 365.268L344.688 351.061L347.165 341.912L325.781 333.388L323.399 342.401L290.715 329.047ZM381.284 366.265C381.853 366.534 382.533 366.291 382.802 365.721C383.071 365.152 382.827 364.472 382.258 364.203C381.689 363.934 381.009 364.178 380.74 364.747C380.471 365.316 380.714 365.996 381.284 366.265ZM373.698 351.5C373.429 352.07 372.749 352.313 372.179 352.044C371.61 351.775 371.367 351.095 371.636 350.526C371.905 349.957 372.585 349.713 373.154 349.982C373.723 350.251 373.967 350.931 373.698 351.5ZM352.148 282.869C352.731 283.108 353.397 282.829 353.636 282.246C353.875 281.664 353.596 280.998 353.013 280.759C352.43 280.52 351.764 280.799 351.526 281.382C351.287 281.964 351.565 282.63 352.148 282.869ZM326.059 284.154C325.82 284.737 325.154 285.016 324.571 284.777C323.989 284.538 323.71 283.872 323.949 283.289C324.188 282.707 324.854 282.428 325.436 282.667C326.019 282.905 326.298 283.571 326.059 284.154ZM377.661 333.508C377.069 333.294 376.762 332.64 376.976 332.048C377.19 331.456 377.844 331.149 378.436 331.363C379.028 331.577 379.335 332.231 379.121 332.823C378.907 333.416 378.253 333.722 377.661 333.508ZM374.976 289.371C374.762 289.963 375.069 290.617 375.661 290.831C376.253 291.045 376.907 290.738 377.121 290.146C377.335 289.554 377.029 288.9 376.436 288.686C375.844 288.472 375.191 288.779 374.976 289.371Z" fill="#008AC2"/>
<path d="M585.138 300.141C569.839 297.875 527.294 359.637 507.934 390.802C498.786 447.534 549.727 496.76 589.546 496.76C649.233 496.76 624.513 436.881 619.097 375.769C614.139 319.815 604.262 302.974 585.138 300.141Z" fill="url(#paint7_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M581.362 268.896L581.362 268.894C568.625 267.505 564.774 262.151 564.441 259.647L579.166 202.346C590.521 197.09 620.014 195.663 625.156 222.674C628.115 238.217 619.532 247.424 613.517 253.875C611.41 256.135 609.618 258.057 608.748 259.795L613.007 291.913L616.524 324.792L569.376 323.55L561.658 312.676L578.995 288.463L581.17 270.48L586.706 269.176L581.362 268.896Z" fill="url(#paint8_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M574.386 184.6L565.124 214.422L584.449 220.424L587.796 209.647L610.624 216.372L602.08 247.447L624.486 290.049L642.396 280.629L623.712 245.103L635.403 202.577L574.386 184.6Z" fill="url(#paint9_linear_4903_10837)"/>
<path d="M354.705 370.75L384.072 373.31C387.405 373.601 390.271 375.848 390.829 379.148C392.738 390.437 392.183 414.187 347.414 395.996C297.889 375.872 291.26 358.645 290.826 351.797C290.707 349.909 292.421 348.752 294.306 348.917C295.235 348.998 296.109 349.387 296.804 350.008C308.592 360.531 321.43 366.493 336.864 369.195L331.687 358.597C330.246 355.647 332.576 352.253 335.847 352.538C337.423 352.675 338.889 353.401 339.955 354.57L354.705 370.75Z" fill="url(#paint10_linear_4903_10837)"/>
<path d="M344.362 402.156C349.862 393.407 361.611 374.108 364.611 366.909C389.609 368.908 452.641 383.679 486.852 366.909C525.1 348.159 634.592 224.418 615.843 360.159C597.948 489.72 404.858 433.654 344.362 402.156Z" fill="url(#paint11_radial_4903_10837)"/>
<path d="M221.835 281.052L236.124 369.667C238.164 384.077 214.894 389.704 187.128 393.67C152.422 398.628 127.501 398.187 107.163 392.417C86.7323 386.621 94.3429 320.008 99.3009 264.054C104.259 208.101 125.508 193.225 144.631 190.392C159.93 188.125 202.475 249.888 221.835 281.052Z" fill="url(#paint12_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.849 162.822L151.849 162.821C164.586 161.432 168.437 156.077 168.77 153.574L154.044 96.2725C142.69 91.0165 113.197 89.5895 108.055 116.601C105.096 132.144 113.679 141.35 119.694 147.802C121.801 150.062 123.593 151.984 124.463 153.721L120.204 185.84L116.687 218.719L163.835 217.477L171.553 206.603L154.216 182.39L152.041 164.407L146.505 163.103L151.849 162.822Z" fill="url(#paint13_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.076 148.13L148.423 135.826L167.822 130.067L180.039 171.218L118.978 165.203L120.962 145.065L152.076 148.13Z" fill="url(#paint14_linear_4903_10837)"/>
<path d="M290.561 280.752L267.678 161.42L380.8 149.293L401.654 274.623L290.561 280.752Z" fill="url(#paint15_linear_4903_10837)"/>
<path d="M445.4 241.082L427.839 125.779L380.802 149.292L401.656 274.623L445.4 241.082Z" fill="url(#paint16_linear_4903_10837)"/>
<path d="M318.407 138.128L267.674 161.42L380.797 149.292L427.268 125.93L318.407 138.128Z" fill="url(#paint17_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M363.243 151.174L364.757 151.012L369.962 182.195L359.692 183.254L366.256 218.959C367.588 218.987 368.718 220.01 368.847 221.368C368.985 222.831 367.912 224.13 366.449 224.268C364.986 224.407 363.688 223.334 363.549 221.871C363.451 220.835 363.96 219.882 364.785 219.365L358.175 183.41L348.765 184.381C348.553 185.518 347.61 186.424 346.401 186.539C344.938 186.678 343.64 185.604 343.501 184.142C343.362 182.679 344.435 181.38 345.898 181.242C347.089 181.129 348.171 181.819 348.607 182.869L358.718 181.826L368.196 180.849L363.243 151.174ZM273.672 192.68L273.385 191.182L318.923 186.24C319.144 185.062 320.148 184.143 321.398 184.078C322.865 184.001 324.117 185.128 324.194 186.595C324.272 188.062 323.144 189.314 321.677 189.392C320.521 189.452 319.498 188.765 319.079 187.753L296.27 190.228L297.666 197.591C298.963 197.708 300.01 198.763 300.08 200.102C300.157 201.569 299.03 202.821 297.563 202.898C296.096 202.975 294.844 201.848 294.766 200.381C294.71 199.314 295.291 198.361 296.175 197.891L294.753 190.393L273.672 192.68ZM285.79 255.873L285.501 254.366L319.233 252.556L317.539 243.404L366.633 240.346C366.812 239.052 367.924 238.055 369.268 238.055C370.737 238.055 371.929 239.246 371.929 240.716C371.929 242.185 370.737 243.376 369.268 243.376C368.206 243.376 367.29 242.755 366.863 241.855L343.849 243.289L345.252 251.129L380.935 249.342C381.103 248.034 382.22 247.024 383.574 247.024C385.043 247.024 386.234 248.215 386.234 249.685C386.234 251.154 385.043 252.345 383.574 252.345C382.523 252.345 381.615 251.736 381.182 250.852L343.992 252.715L342.322 243.384L319.346 244.815L321.043 253.981L285.79 255.873ZM383.574 250.825C384.204 250.825 384.714 250.314 384.714 249.685C384.714 249.055 384.204 248.544 383.574 248.544C382.944 248.544 382.433 249.055 382.433 249.685C382.433 250.314 382.944 250.825 383.574 250.825ZM370.408 240.716C370.408 241.345 369.898 241.856 369.268 241.856C368.638 241.856 368.128 241.345 368.128 240.716C368.128 240.086 368.638 239.575 369.268 239.575C369.898 239.575 370.408 240.086 370.408 240.716ZM321.597 187.873C322.226 187.84 322.709 187.304 322.676 186.675C322.643 186.046 322.107 185.563 321.478 185.596C320.849 185.629 320.366 186.166 320.399 186.794C320.432 187.423 320.968 187.906 321.597 187.873ZM298.562 200.181C298.595 200.81 298.112 201.347 297.483 201.38C296.854 201.413 296.318 200.93 296.285 200.301C296.252 199.672 296.735 199.136 297.364 199.102C297.992 199.069 298.529 199.552 298.562 200.181ZM366.306 222.755C365.679 222.814 365.122 222.354 365.063 221.727C365.003 221.1 365.463 220.544 366.09 220.484C366.717 220.425 367.274 220.885 367.333 221.512C367.393 222.139 366.933 222.695 366.306 222.755ZM345.014 183.998C345.074 184.625 345.63 185.085 346.257 185.025C346.884 184.966 347.344 184.41 347.285 183.783C347.225 183.156 346.669 182.696 346.042 182.755C345.415 182.815 344.955 183.371 345.014 183.998Z" fill="#008AC2"/>
<path d="M375.061 261.004L345.694 263.564C342.36 263.855 339.495 266.102 338.937 269.401C337.027 280.691 337.583 304.44 382.351 286.249C431.877 266.126 438.505 248.898 438.939 242.051C439.059 240.163 437.345 239.006 435.46 239.17C434.531 239.251 433.657 239.641 432.961 240.262C421.174 250.785 408.336 256.746 392.901 259.449L398.079 248.851C399.52 245.901 397.19 242.507 393.919 242.792C392.343 242.929 390.876 243.654 389.811 244.823L375.061 261.004Z" fill="url(#paint18_linear_4903_10837)"/>
<path d="M385.403 292.41C379.904 283.66 368.155 264.362 365.155 257.162C340.157 259.162 277.125 273.933 242.913 257.162C204.666 238.413 95.1734 114.672 113.923 250.413C131.818 379.973 324.908 323.908 385.403 292.41Z" fill="url(#paint19_radial_4903_10837)"/>
<path d="M241.85 447.255L74.6971 512.813L24.5931 387.181L194.245 323.066L241.85 447.255Z" fill="url(#paint20_linear_4903_10837)"/>
<path d="M194.245 323.065L241.85 447.254L285.915 466.42L240.235 349.617L194.245 323.065Z" fill="url(#paint21_linear_4903_10837)"/>
<path d="M241.848 447.255L74.6953 512.813L130.193 527.514L285.913 466.421L241.848 447.255Z" fill="url(#paint22_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.397 404.018C166.553 403.418 165.383 403.615 164.783 404.46C164.182 405.304 164.38 406.475 165.224 407.075C166.067 407.675 167.238 407.478 167.838 406.633C168.438 405.789 168.241 404.618 167.397 404.018ZM169.012 401.746C166.915 400.253 164.004 400.745 162.512 402.844C161.832 403.801 161.564 404.927 161.672 406.01L111.638 425.817L99.9372 395.365L99.935 395.359L87.7829 363.305L85.1778 364.295L96.837 395.048L76.5128 402.713C76.2785 402.446 76.0096 402.201 75.7075 401.986C73.6097 400.494 70.6993 400.986 69.207 403.085C67.7147 405.184 68.2055 408.095 70.3033 409.588C72.401 411.08 75.3114 410.588 76.8037 408.489C77.4958 407.516 77.7614 406.367 77.6379 405.267L97.8307 397.652L110.046 429.444L162.763 408.575C163.007 408.86 163.289 409.12 163.608 409.347C165.706 410.839 168.616 410.348 170.109 408.249C171.601 406.15 171.11 403.238 169.012 401.746ZM71.4776 404.7C72.0779 403.856 73.2484 403.658 74.0922 404.258C74.936 404.859 75.1334 406.03 74.5331 406.874C73.9329 407.718 72.7623 407.916 71.9185 407.316C71.0748 406.715 70.8774 405.544 71.4776 404.7Z" fill="#008AC2"/>
<path d="M378.361 441.004L368.815 487.438L428.045 499.944L437.754 453.267L378.361 441.004Z" fill="url(#paint23_linear_4903_10837)"/>
<path d="M378.36 441.004L368.814 487.438L355.661 481.063L363.963 441.721L378.36 441.004Z" fill="url(#paint24_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M385.644 475.94C385.756 475.734 385.68 475.477 385.474 475.365C385.268 475.254 385.011 475.33 384.899 475.536C384.787 475.742 384.864 475.999 385.069 476.111C385.275 476.223 385.533 476.146 385.644 475.94ZM386.162 476.221C386.169 476.208 386.175 476.196 386.182 476.183L408.656 480.888L410.419 472.087L432.835 476.893L432.958 476.318L421.889 473.944L423.706 464.889L403.496 460.646C403.449 460.345 403.267 460.068 402.979 459.912C402.487 459.645 401.872 459.827 401.605 460.319C401.339 460.81 401.521 461.425 402.012 461.692C402.504 461.959 403.119 461.776 403.386 461.285C403.395 461.267 403.404 461.249 403.413 461.23L423.014 465.346L421.313 473.821L409.96 471.386L408.196 480.19L386.275 475.601C386.233 475.292 386.049 475.008 385.755 474.848C385.263 474.581 384.648 474.763 384.382 475.255C384.115 475.747 384.297 476.362 384.789 476.628C385.28 476.895 385.895 476.713 386.162 476.221ZM402.698 460.429C402.904 460.541 402.98 460.798 402.868 461.004C402.756 461.21 402.499 461.286 402.293 461.174C402.087 461.063 402.011 460.805 402.123 460.599C402.234 460.394 402.492 460.317 402.698 460.429Z" fill="#008AC2"/>
<path d="M526.309 127.025L552.551 66.1117L474.945 32.1877L448.411 93.3872L526.309 127.025Z" fill="url(#paint25_linear_4903_10837)"/>
<path d="M526.31 127.025L552.552 66.112L568.765 78.574L546.238 130.124L526.31 127.025Z" fill="url(#paint26_linear_4903_10837)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M526.233 77.0938C526.022 77.3442 526.054 77.7185 526.304 77.9299C526.554 78.1413 526.929 78.1097 527.14 77.8593C527.351 77.6089 527.32 77.2346 527.07 77.0232C526.819 76.8119 526.445 76.8435 526.233 77.0938ZM525.604 76.5625C525.591 76.5778 525.579 76.5934 525.566 76.6091L496.108 63.7915L491.197 75.3502L461.848 62.4112L461.516 63.1649L476.01 69.5547L470.953 81.4458L497.438 92.9872C497.417 93.4135 497.588 93.8444 497.939 94.141C498.537 94.6458 499.431 94.5703 499.936 93.9724C500.441 93.3744 500.365 92.4804 499.767 91.9756C499.17 91.4707 498.276 91.5462 497.771 92.1442C497.752 92.166 497.735 92.1881 497.718 92.2106L472.031 81.0168L476.763 69.887L491.629 76.4407L496.541 64.8783L525.273 77.3798C525.243 77.8144 525.414 78.2567 525.772 78.5593C526.37 79.0641 527.264 78.9886 527.769 78.3906C528.274 77.7927 528.199 76.8987 527.601 76.3938C527.003 75.889 526.109 75.9645 525.604 76.5625ZM498.47 93.5116C498.22 93.3002 498.188 92.9259 498.4 92.6755C498.611 92.4252 498.986 92.3936 499.236 92.6049C499.486 92.8163 499.518 93.1906 499.306 93.441C499.095 93.6914 498.721 93.723 498.47 93.5116Z" fill="#008AC2"/>
<rect x="656.34" y="310.986" width="15.936" height="15.936" fill="#25AAE1"/>
</g>
<defs>
<linearGradient id="paint0_linear_4903_10837" x1="416.804" y1="239.269" x2="420.503" y2="281.695" gradientUnits="userSpaceOnUse">
<stop stop-color="#7AD5FA"/>
<stop offset="1" stop-color="#028BC3"/>
</linearGradient>
<radialGradient id="paint1_radial_4903_10837" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(189.463 325.775) rotate(-52.9864) scale(145.471 1102.44)">
<stop stop-color="#E7D905"/>
<stop offset="1" stop-color="#F8F484"/>
</radialGradient>
<linearGradient id="paint2_linear_4903_10837" x1="312.961" y1="349.017" x2="309.263" y2="391.443" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<radialGradient id="paint3_radial_4903_10837" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540.302 435.523) rotate(-127.014) scale(145.471 1102.44)">
<stop stop-color="#E7D905"/>
<stop offset="1" stop-color="#F8F484"/>
</radialGradient>
<linearGradient id="paint4_linear_4903_10837" x1="280.316" y1="376.046" x2="407.232" y2="392.801" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint5_linear_4903_10837" x1="387.455" y1="395.506" x2="454.133" y2="405.778" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint6_linear_4903_10837" x1="311.558" y1="253.193" x2="472.655" y2="227.8" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint7_linear_4903_10837" x1="623.704" y1="526.81" x2="621.653" y2="367.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECEA69"/>
<stop offset="1" stop-color="#FAFAD4"/>
</linearGradient>
<linearGradient id="paint8_linear_4903_10837" x1="597.476" y1="199.352" x2="590.9" y2="324.679" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint9_linear_4903_10837" x1="641.854" y1="290.96" x2="557.068" y2="282.657" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint10_linear_4903_10837" x1="329.465" y1="351.982" x2="325.767" y2="394.408" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<radialGradient id="paint11_radial_4903_10837" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(539.548 441.667) rotate(-104.961) scale(114.806 492.308)">
<stop stop-color="#EAE85D"/>
<stop offset="0.713542" stop-color="#FAF9D3"/>
</radialGradient>
<linearGradient id="paint12_linear_4903_10837" x1="106.066" y1="417.06" x2="108.116" y2="257.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECEA69"/>
<stop offset="1" stop-color="#FAFAD4"/>
</linearGradient>
<linearGradient id="paint13_linear_4903_10837" x1="135.735" y1="93.2787" x2="142.311" y2="218.606" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint14_linear_4903_10837" x1="180.039" y1="171.218" x2="116.138" y2="169.231" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint15_linear_4903_10837" x1="296.471" y1="302.807" x2="418.377" y2="263.728" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint16_linear_4903_10837" x1="401.656" y1="274.623" x2="466.331" y2="255.421" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint17_linear_4903_10837" x1="272.22" y1="178.385" x2="407.022" y2="86.5938" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint18_linear_4903_10837" x1="400.3" y1="242.235" x2="403.999" y2="284.661" gradientUnits="userSpaceOnUse">
<stop stop-color="#7AD5FA"/>
<stop offset="1" stop-color="#028BC3"/>
</linearGradient>
<radialGradient id="paint19_radial_4903_10837" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.218 331.921) rotate(-75.0386) scale(114.806 492.308)">
<stop stop-color="#EAE85D"/>
<stop offset="0.713542" stop-color="#FAF9D3"/>
</radialGradient>
<linearGradient id="paint20_linear_4903_10837" x1="94.7688" y1="265.633" x2="287.531" y2="391.816" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint21_linear_4903_10837" x1="194.245" y1="323.065" x2="322.92" y2="416.313" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint22_linear_4903_10837" x1="147.588" y1="386.559" x2="287.991" y2="479.878" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint23_linear_4903_10837" x1="452.677" y1="463.298" x2="385.107" y2="423.888" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint24_linear_4903_10837" x1="393.283" y1="451.034" x2="366.756" y2="434.595" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint25_linear_4903_10837" x1="430.809" y1="75.4146" x2="512.215" y2="148.563" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint26_linear_4903_10837" x1="508.708" y1="109.053" x2="540.393" y2="139.095" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<clipPath id="clip0_4903_10837">
<rect width="747" height="546.804" fill="white" transform="translate(0 0.523193)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

166
static/img/work/otf-website-illustrations-cover.svg
View File

@ -0,0 +1,166 @@
<svg width="747" height="548" viewBox="0 0 747 548" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4902_4050)">
<circle cx="252.485" cy="252.013" r="180.774" fill="#DEF3FC"/>
<path d="M391.565 258.038L362.198 260.598C358.864 260.888 355.998 263.136 355.44 266.435C353.531 277.725 354.086 301.474 398.855 283.283C448.381 263.159 455.009 245.932 455.443 239.085C455.563 237.196 453.849 236.04 451.964 236.204C451.035 236.285 450.161 236.675 449.465 237.296C437.677 247.819 424.84 253.78 409.405 256.482L414.583 245.885C416.024 242.934 413.694 239.54 410.423 239.826C408.847 239.963 407.38 240.688 406.315 241.857L391.565 258.038Z" fill="url(#paint0_linear_4902_4050)"/>
<path d="M401.907 289.443C396.408 280.694 384.658 261.395 381.659 254.196C356.661 256.196 293.629 270.967 259.417 254.196C221.17 235.447 111.677 111.705 130.426 247.446C148.322 377.007 341.412 320.941 401.907 289.443Z" fill="url(#paint1_radial_4902_4050)"/>
<rect x="33.9453" y="115.1" width="50.796" height="49.8" fill="#DEF3FC"/>
<rect x="715.129" y="17.7551" width="31.872" height="31.872" fill="#DEF3FC"/>
<rect y="60.1385" width="31.872" height="31.872" fill="#25AAE1"/>
<rect x="33.0859" y="24.7465" width="15.936" height="15.936" fill="#F1E83B"/>
<rect x="685.422" y="62.2453" width="15.936" height="15.936" fill="#F1E83B"/>
<rect x="677.281" y="498.523" width="32.868" height="32.868" fill="#F1E83B"/>
<rect x="328.445" y="13.7711" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="485.137" y="142.205" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="17.9023" y="473.797" width="7.968" height="7.968" fill="#F1E83B"/>
<rect x="17.9023" y="496.831" width="28.884" height="28.884" fill="#DEF3FC"/>
<rect x="702.68" y="107.91" width="24.9" height="24.9" fill="#25AAE1"/>
<rect x="357.441" y="20.8831" width="35.856" height="35.856" fill="#00709E"/>
<rect x="421.727" y="0.523438" width="15.936" height="15.936" fill="#25AAE1"/>
<rect x="731.066" y="531.391" width="15.936" height="15.936" fill="#25AAE1"/>
<circle cx="589.133" cy="252.013" r="102.09" fill="#FCFAC1"/>
<path d="M338.201 367.786L367.568 370.346C370.901 370.636 373.767 372.884 374.325 376.183C376.234 387.473 375.679 411.222 330.91 393.031C281.385 372.907 274.756 355.68 274.322 348.832C274.203 346.944 275.917 345.788 277.802 345.952C278.731 346.033 279.605 346.423 280.301 347.044C292.088 357.567 304.926 363.528 320.36 366.23L315.183 355.633C313.742 352.682 316.072 349.288 319.343 349.573C320.919 349.711 322.385 350.436 323.451 351.605L338.201 367.786Z" fill="url(#paint2_linear_4902_4050)"/>
<path d="M327.858 399.191C333.358 390.442 345.107 371.143 348.107 363.944C373.105 365.944 436.137 380.715 470.348 363.944C508.596 345.194 618.088 221.453 599.339 357.194C581.444 486.755 388.354 430.689 327.858 399.191Z" fill="url(#paint3_radial_4902_4050)"/>
<path d="M284.397 353.581L314.695 235.913L422.153 273.282L387.457 395.507L284.397 353.581Z" fill="url(#paint4_linear_4902_4050)"/>
<path d="M441.336 383.872L474.724 272.12L422.151 273.281L387.455 395.506L441.336 383.872Z" fill="url(#paint5_linear_4902_4050)"/>
<path d="M370.518 236.531L314.697 235.912L422.155 273.281L474.153 272.015L370.518 236.531Z" fill="url(#paint6_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M405.478 267.482L406.916 267.982L398.298 298.4L388.561 294.969L379.239 330.056C380.431 330.651 381.015 332.057 380.551 333.34C380.051 334.722 378.526 335.438 377.144 334.938C375.762 334.439 375.047 332.913 375.546 331.531C375.9 330.553 376.768 329.908 377.736 329.793L387.122 294.462L378.204 291.32C377.526 292.257 376.286 292.674 375.144 292.261C373.762 291.761 373.047 290.236 373.547 288.854C374.046 287.472 375.571 286.757 376.953 287.257C378.078 287.663 378.762 288.75 378.707 289.886L388.29 293.261L397.277 296.428L405.478 267.482ZM306.759 266.737L307.139 265.26L350.427 280.251C351.131 279.28 352.431 278.877 353.59 279.352C354.949 279.91 355.6 281.464 355.042 282.823C354.485 284.183 352.931 284.833 351.572 284.276C350.5 283.837 349.869 282.779 349.922 281.685L328.241 274.176L326.357 281.43C327.478 282.091 327.974 283.492 327.466 284.731C326.908 286.091 325.354 286.741 323.995 286.184C322.635 285.626 321.985 284.072 322.542 282.713C322.947 281.724 323.88 281.11 324.881 281.063L326.8 273.677L306.759 266.737ZM290.714 329.047L291.097 327.561L322.372 340.339L324.75 331.341L370.442 349.553C371.158 348.46 372.589 348.034 373.803 348.608C375.132 349.236 375.7 350.822 375.072 352.15C374.444 353.479 372.858 354.047 371.53 353.419C370.57 352.965 370.007 352.011 370.005 351.015L348.587 342.478L346.506 350.167L379.531 363.798C380.242 362.687 381.684 362.251 382.908 362.829C384.236 363.457 384.804 365.043 384.176 366.371C383.548 367.7 381.962 368.268 380.634 367.64C379.684 367.191 379.123 366.253 379.11 365.268L344.688 351.061L347.165 341.912L325.781 333.389L323.399 342.401L290.714 329.047ZM381.284 366.265C381.853 366.535 382.533 366.291 382.802 365.722C383.071 365.152 382.827 364.473 382.258 364.204C381.689 363.934 381.009 364.178 380.74 364.747C380.471 365.317 380.714 365.996 381.284 366.265ZM373.698 351.501C373.429 352.07 372.749 352.313 372.179 352.044C371.61 351.775 371.367 351.096 371.636 350.526C371.905 349.957 372.584 349.713 373.154 349.982C373.723 350.252 373.967 350.931 373.698 351.501ZM352.148 282.869C352.731 283.108 353.397 282.829 353.636 282.247C353.875 281.664 353.596 280.998 353.013 280.759C352.43 280.52 351.764 280.799 351.526 281.382C351.287 281.964 351.565 282.63 352.148 282.869ZM326.059 284.154C325.82 284.737 325.154 285.016 324.571 284.777C323.989 284.538 323.71 283.872 323.949 283.289C324.188 282.707 324.854 282.428 325.436 282.667C326.019 282.906 326.298 283.572 326.059 284.154ZM377.661 333.508C377.069 333.294 376.762 332.641 376.976 332.048C377.19 331.456 377.844 331.15 378.436 331.364C379.028 331.578 379.335 332.231 379.121 332.824C378.907 333.416 378.253 333.722 377.661 333.508ZM374.976 289.371C374.762 289.963 375.069 290.617 375.661 290.831C376.253 291.045 376.907 290.739 377.121 290.146C377.335 289.554 377.029 288.901 376.436 288.686C375.844 288.472 375.191 288.779 374.976 289.371Z" fill="#008AC2"/>
<path d="M585.138 300.142C569.839 297.875 527.294 359.638 507.934 390.802C498.786 447.534 549.727 496.76 589.546 496.76C649.233 496.76 624.513 436.882 619.097 375.77C614.139 319.816 604.262 302.975 585.138 300.142Z" fill="url(#paint7_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M581.362 268.896L581.362 268.894C568.625 267.505 564.774 262.151 564.441 259.647L579.166 202.346C590.521 197.09 620.014 195.663 625.156 222.674C628.115 238.217 619.532 247.424 613.517 253.875C611.41 256.135 609.618 258.057 608.748 259.795L613.007 291.913L616.524 324.792L569.376 323.55L561.658 312.676L578.995 288.463L581.17 270.48L586.706 269.176L581.362 268.896Z" fill="url(#paint8_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M574.386 184.601L565.124 214.422L584.449 220.425L587.796 209.647L610.624 216.373L602.08 247.447L624.486 290.049L642.396 280.63L623.712 245.103L635.403 202.578L574.386 184.601Z" fill="url(#paint9_linear_4902_4050)"/>
<path d="M354.705 370.75L384.072 373.31C387.405 373.601 390.271 375.849 390.829 379.148C392.738 390.438 392.183 414.187 347.414 395.996C297.889 375.872 291.26 358.645 290.826 351.797C290.707 349.909 292.421 348.753 294.306 348.917C295.235 348.998 296.109 349.387 296.804 350.008C308.592 360.531 321.43 366.493 336.864 369.195L331.687 358.597C330.246 355.647 332.576 352.253 335.847 352.538C337.423 352.676 338.889 353.401 339.955 354.57L354.705 370.75Z" fill="url(#paint10_linear_4902_4050)"/>
<path d="M344.362 402.156C349.862 393.407 361.611 374.108 364.611 366.909C389.609 368.909 452.641 383.68 486.852 366.909C525.1 348.159 634.592 224.418 615.843 360.159C597.948 489.72 404.858 433.654 344.362 402.156Z" fill="url(#paint11_radial_4902_4050)"/>
<path d="M221.835 281.053L236.124 369.668C238.164 384.078 214.894 389.704 187.128 393.671C152.422 398.629 127.501 398.187 107.163 392.417C86.7323 386.621 94.3429 320.009 99.3009 264.055C104.259 208.101 125.508 193.225 144.631 190.392C159.93 188.125 202.475 249.888 221.835 281.053Z" fill="url(#paint12_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.849 162.823L151.849 162.821C164.586 161.432 168.437 156.077 168.77 153.574L154.044 96.2726C142.69 91.0166 113.197 89.5895 108.055 116.601C105.096 132.144 113.679 141.35 119.694 147.802C121.801 150.062 123.593 151.984 124.463 153.721L120.204 185.84L116.687 218.719L163.835 217.477L171.553 206.603L154.216 182.39L152.041 164.407L146.505 163.103L151.849 162.823Z" fill="url(#paint13_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.076 148.13L148.423 135.826L167.822 130.067L180.039 171.218L118.978 165.203L120.962 145.065L152.076 148.13Z" fill="url(#paint14_linear_4902_4050)"/>
<path d="M290.561 280.753L267.678 161.421L380.8 149.293L401.654 274.624L290.561 280.753Z" fill="url(#paint15_linear_4902_4050)"/>
<path d="M445.4 241.082L427.839 125.779L380.802 149.292L401.656 274.623L445.4 241.082Z" fill="url(#paint16_linear_4902_4050)"/>
<path d="M318.407 138.129L267.674 161.42L380.797 149.292L427.268 125.93L318.407 138.129Z" fill="url(#paint17_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M363.243 151.174L364.757 151.012L369.962 182.195L359.692 183.254L366.256 218.96C367.588 218.987 368.718 220.01 368.847 221.369C368.985 222.831 367.912 224.13 366.449 224.269C364.986 224.407 363.688 223.334 363.549 221.871C363.451 220.836 363.96 219.883 364.785 219.365L358.175 183.41L348.765 184.381C348.553 185.518 347.61 186.424 346.401 186.539C344.938 186.678 343.64 185.605 343.501 184.142C343.362 182.679 344.435 181.38 345.898 181.242C347.089 181.129 348.171 181.819 348.607 182.869L358.718 181.826L368.196 180.849L363.243 151.174ZM273.672 192.681L273.385 191.183L318.923 186.241C319.144 185.062 320.148 184.144 321.398 184.078C322.865 184.001 324.117 185.128 324.194 186.595C324.272 188.063 323.145 189.315 321.677 189.392C320.521 189.453 319.498 188.765 319.079 187.753L296.27 190.228L297.666 197.591C298.963 197.708 300.01 198.764 300.08 200.102C300.157 201.569 299.03 202.821 297.563 202.898C296.096 202.975 294.844 201.848 294.766 200.381C294.71 199.314 295.291 198.362 296.175 197.891L294.753 190.393L273.672 192.681ZM285.79 255.873L285.501 254.366L319.233 252.556L317.539 243.404L366.633 240.347C366.812 239.052 367.924 238.055 369.268 238.055C370.737 238.055 371.929 239.247 371.929 240.716C371.929 242.185 370.737 243.377 369.268 243.377C368.206 243.377 367.29 242.755 366.863 241.856L343.849 243.289L345.252 251.129L380.935 249.342C381.103 248.035 382.22 247.024 383.574 247.024C385.043 247.024 386.234 248.215 386.234 249.685C386.234 251.154 385.043 252.345 383.574 252.345C382.523 252.345 381.615 251.736 381.182 250.852L343.992 252.715L342.322 243.384L319.346 244.815L321.043 253.981L285.79 255.873ZM383.574 250.825C384.204 250.825 384.714 250.314 384.714 249.685C384.714 249.055 384.204 248.544 383.574 248.544C382.944 248.544 382.434 249.055 382.433 249.685C382.434 250.314 382.944 250.825 383.574 250.825ZM370.408 240.716C370.408 241.346 369.898 241.856 369.268 241.856C368.638 241.856 368.128 241.346 368.128 240.716C368.128 240.086 368.638 239.576 369.268 239.576C369.898 239.576 370.408 240.086 370.408 240.716ZM321.597 187.874C322.226 187.841 322.709 187.304 322.676 186.675C322.643 186.046 322.107 185.563 321.478 185.596C320.849 185.629 320.366 186.166 320.399 186.795C320.432 187.424 320.968 187.907 321.597 187.874ZM298.562 200.182C298.595 200.81 298.112 201.347 297.483 201.38C296.854 201.413 296.318 200.93 296.285 200.301C296.252 199.672 296.735 199.136 297.364 199.103C297.992 199.07 298.529 199.553 298.562 200.182ZM366.306 222.755C365.679 222.814 365.122 222.354 365.063 221.728C365.003 221.101 365.463 220.544 366.09 220.485C366.717 220.425 367.274 220.885 367.333 221.512C367.393 222.139 366.933 222.696 366.306 222.755ZM345.014 183.998C345.074 184.625 345.63 185.085 346.257 185.026C346.884 184.966 347.344 184.41 347.285 183.783C347.225 183.156 346.669 182.696 346.042 182.755C345.415 182.815 344.955 183.371 345.014 183.998Z" fill="#008AC2"/>
<path d="M375.061 261.004L345.694 263.564C342.36 263.855 339.495 266.102 338.937 269.402C337.027 280.692 337.583 304.441 382.351 286.25C431.877 266.126 438.505 248.899 438.939 242.051C439.059 240.163 437.345 239.007 435.46 239.171C434.531 239.252 433.657 239.641 432.961 240.262C421.174 250.785 408.336 256.747 392.901 259.449L398.079 248.851C399.52 245.901 397.19 242.507 393.919 242.792C392.343 242.93 390.876 243.655 389.811 244.824L375.061 261.004Z" fill="url(#paint18_linear_4902_4050)"/>
<path d="M385.403 292.41C379.904 283.661 368.155 264.362 365.155 257.163C340.157 259.162 277.125 273.933 242.913 257.163C204.666 238.413 95.1734 114.672 113.923 250.413C131.818 379.974 324.908 323.908 385.403 292.41Z" fill="url(#paint19_radial_4902_4050)"/>
<path d="M241.85 447.255L74.6971 512.813L24.5931 387.181L194.245 323.066L241.85 447.255Z" fill="url(#paint20_linear_4902_4050)"/>
<path d="M194.245 323.065L241.85 447.254L285.915 466.42L240.235 349.617L194.245 323.065Z" fill="url(#paint21_linear_4902_4050)"/>
<path d="M241.848 447.255L74.6953 512.813L130.193 527.515L285.913 466.421L241.848 447.255Z" fill="url(#paint22_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.397 404.018C166.553 403.418 165.383 403.615 164.783 404.46C164.182 405.304 164.38 406.475 165.224 407.075C166.067 407.675 167.238 407.478 167.838 406.633C168.438 405.789 168.241 404.618 167.397 404.018ZM169.012 401.746C166.915 400.253 164.004 400.745 162.512 402.844C161.832 403.801 161.564 404.927 161.672 406.01L111.638 425.817L99.9372 395.364L99.935 395.359L87.7829 363.305L85.1778 364.294L96.837 395.048L76.5127 402.713C76.2784 402.446 76.0096 402.201 75.7075 401.986C73.6097 400.494 70.6994 400.986 69.207 403.085C67.7147 405.184 68.2055 408.095 70.3033 409.588C72.401 411.08 75.3114 410.588 76.8037 408.489C77.4959 407.516 77.7614 406.367 77.6379 405.267L97.8307 397.651L110.046 429.444L162.763 408.575C163.007 408.86 163.289 409.12 163.608 409.347C165.706 410.839 168.616 410.348 170.109 408.249C171.601 406.149 171.11 403.238 169.012 401.746ZM71.4776 404.7C72.0779 403.856 73.2484 403.658 74.0922 404.258C74.936 404.858 75.1334 406.029 74.5331 406.874C73.9329 407.718 72.7623 407.916 71.9185 407.316C71.0748 406.715 70.8774 405.544 71.4776 404.7Z" fill="#008AC2"/>
<path d="M378.361 441.004L368.815 487.438L428.045 499.944L437.754 453.268L378.361 441.004Z" fill="url(#paint23_linear_4902_4050)"/>
<path d="M378.36 441.004L368.814 487.438L355.661 481.063L363.963 441.721L378.36 441.004Z" fill="url(#paint24_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M385.644 475.94C385.756 475.734 385.68 475.477 385.474 475.365C385.268 475.254 385.011 475.33 384.899 475.536C384.787 475.742 384.864 475.999 385.069 476.111C385.275 476.222 385.533 476.146 385.644 475.94ZM386.162 476.221C386.169 476.208 386.175 476.195 386.182 476.183L408.656 480.888L410.419 472.087L432.835 476.893L432.958 476.318L421.889 473.944L423.706 464.889L403.496 460.646C403.449 460.345 403.267 460.068 402.979 459.911C402.487 459.645 401.872 459.827 401.605 460.319C401.339 460.81 401.521 461.425 402.012 461.692C402.504 461.959 403.119 461.776 403.386 461.285C403.395 461.267 403.404 461.248 403.413 461.23L423.014 465.345L421.313 473.821L409.96 471.386L408.196 480.19L386.275 475.601C386.233 475.292 386.049 475.008 385.755 474.848C385.263 474.581 384.648 474.763 384.382 475.255C384.115 475.747 384.297 476.361 384.789 476.628C385.28 476.895 385.895 476.713 386.162 476.221ZM402.698 460.429C402.904 460.541 402.98 460.798 402.868 461.004C402.756 461.21 402.499 461.286 402.293 461.174C402.087 461.063 402.011 460.805 402.123 460.599C402.234 460.394 402.492 460.317 402.698 460.429Z" fill="#008AC2"/>
<path d="M526.309 127.025L552.551 66.1119L474.945 32.188L448.411 93.3875L526.309 127.025Z" fill="url(#paint25_linear_4902_4050)"/>
<path d="M526.31 127.026L552.552 66.1123L568.765 78.5742L546.238 130.124L526.31 127.026Z" fill="url(#paint26_linear_4902_4050)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M526.233 77.094C526.022 77.3443 526.054 77.7187 526.304 77.93C526.554 78.1414 526.929 78.1098 527.14 77.8594C527.351 77.609 527.32 77.2347 527.07 77.0233C526.819 76.812 526.445 76.8436 526.233 77.094ZM525.604 76.5626C525.591 76.578 525.579 76.5935 525.566 76.6093L496.108 63.7916L491.197 75.3503L461.848 62.4113L461.516 63.165L476.01 69.5548L470.953 81.446L497.438 92.9873C497.417 93.4136 497.588 93.8446 497.939 94.1412C498.537 94.646 499.431 94.5705 499.936 93.9725C500.441 93.3746 500.365 92.4806 499.767 91.9757C499.17 91.4709 498.276 91.5464 497.771 92.1444C497.752 92.1661 497.735 92.1882 497.718 92.2107L472.031 81.0169L476.763 69.8871L491.629 76.4408L496.541 64.8784L525.273 77.3799C525.243 77.8145 525.414 78.2569 525.772 78.5594C526.37 79.0642 527.264 78.9887 527.769 78.3908C528.274 77.7928 528.199 76.8988 527.601 76.394C527.003 75.8891 526.109 75.9646 525.604 76.5626ZM498.47 93.5118C498.22 93.3004 498.189 92.9261 498.4 92.6757C498.611 92.4254 498.986 92.3937 499.236 92.6051C499.486 92.8165 499.518 93.1908 499.307 93.4412C499.095 93.6916 498.721 93.7232 498.47 93.5118Z" fill="#008AC2"/>
<rect x="656.34" y="310.986" width="15.936" height="15.936" fill="#25AAE1"/>
</g>
<defs>
<linearGradient id="paint0_linear_4902_4050" x1="416.804" y1="239.269" x2="420.503" y2="281.695" gradientUnits="userSpaceOnUse">
<stop stop-color="#7AD5FA"/>
<stop offset="1" stop-color="#028BC3"/>
</linearGradient>
<radialGradient id="paint1_radial_4902_4050" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(189.463 325.776) rotate(-52.9864) scale(145.471 1102.44)">
<stop stop-color="#E7D905"/>
<stop offset="1" stop-color="#F8F484"/>
</radialGradient>
<linearGradient id="paint2_linear_4902_4050" x1="312.961" y1="349.017" x2="309.263" y2="391.443" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<radialGradient id="paint3_radial_4902_4050" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(540.302 435.523) rotate(-127.014) scale(145.471 1102.44)">
<stop stop-color="#E7D905"/>
<stop offset="1" stop-color="#F8F484"/>
</radialGradient>
<linearGradient id="paint4_linear_4902_4050" x1="280.316" y1="376.046" x2="407.232" y2="392.801" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint5_linear_4902_4050" x1="387.455" y1="395.506" x2="454.133" y2="405.779" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint6_linear_4902_4050" x1="311.558" y1="253.193" x2="472.655" y2="227.8" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint7_linear_4902_4050" x1="623.704" y1="526.81" x2="621.653" y2="367.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECEA69"/>
<stop offset="1" stop-color="#FAFAD4"/>
</linearGradient>
<linearGradient id="paint8_linear_4902_4050" x1="597.476" y1="199.352" x2="590.9" y2="324.679" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint9_linear_4902_4050" x1="641.854" y1="290.96" x2="557.068" y2="282.658" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint10_linear_4902_4050" x1="329.465" y1="351.982" x2="325.767" y2="394.408" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<radialGradient id="paint11_radial_4902_4050" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(539.548 441.667) rotate(-104.961) scale(114.806 492.308)">
<stop stop-color="#EAE85D"/>
<stop offset="0.713542" stop-color="#FAF9D3"/>
</radialGradient>
<linearGradient id="paint12_linear_4902_4050" x1="106.066" y1="417.06" x2="108.116" y2="257.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECEA69"/>
<stop offset="1" stop-color="#FAFAD4"/>
</linearGradient>
<linearGradient id="paint13_linear_4902_4050" x1="135.735" y1="93.2788" x2="142.311" y2="218.606" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint14_linear_4902_4050" x1="180.039" y1="171.218" x2="116.138" y2="169.232" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint15_linear_4902_4050" x1="296.471" y1="302.807" x2="418.377" y2="263.728" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint16_linear_4902_4050" x1="401.656" y1="274.623" x2="466.331" y2="255.421" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint17_linear_4902_4050" x1="272.22" y1="178.385" x2="407.022" y2="86.5941" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint18_linear_4902_4050" x1="400.3" y1="242.236" x2="403.999" y2="284.662" gradientUnits="userSpaceOnUse">
<stop stop-color="#7AD5FA"/>
<stop offset="1" stop-color="#028BC3"/>
</linearGradient>
<radialGradient id="paint19_radial_4902_4050" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.218 331.921) rotate(-75.0386) scale(114.806 492.308)">
<stop stop-color="#EAE85D"/>
<stop offset="0.713542" stop-color="#FAF9D3"/>
</radialGradient>
<linearGradient id="paint20_linear_4902_4050" x1="94.7688" y1="265.633" x2="287.531" y2="391.816" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint21_linear_4902_4050" x1="194.245" y1="323.065" x2="322.92" y2="416.313" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint22_linear_4902_4050" x1="147.588" y1="386.559" x2="287.991" y2="479.878" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<linearGradient id="paint23_linear_4902_4050" x1="452.677" y1="463.298" x2="385.107" y2="423.888" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint24_linear_4902_4050" x1="393.283" y1="451.034" x2="366.756" y2="434.596" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint25_linear_4902_4050" x1="430.809" y1="75.4148" x2="512.215" y2="148.564" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#25AAE1"/>
</linearGradient>
<linearGradient id="paint26_linear_4902_4050" x1="508.708" y1="109.053" x2="540.393" y2="139.095" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<clipPath id="clip0_4902_4050">
<rect width="747" height="546.804" fill="white" transform="translate(0 0.523438)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
static/img/work/otf-website-illustrations-cover.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

235
static/img/work/otf-website-illustrations-people-mobile.svg
View File

@ -0,0 +1,235 @@
<svg width="310" height="298" viewBox="0 0 310 298" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="45.9818" cy="46.2684" r="45.7916" transform="rotate(90 45.9818 46.2684)" fill="url(#paint0_radial_4908_2847)"/>
<mask id="mask0_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="92" height="93">
<circle cx="45.9808" cy="46.2685" r="45.9802" transform="rotate(90 45.9808 46.2685)" fill="url(#paint1_radial_4908_2847)"/>
</mask>
<g mask="url(#mask0_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.176 63.7714L54.176 63.7703C62.1742 63.3186 64.754 60.0899 65.0441 58.5319L57.7271 22.1372C50.8096 18.4699 32.4419 16.6057 28.3463 33.3644C25.9895 43.008 31.0471 49.0598 34.5911 53.3006C35.8327 54.7862 36.8885 56.0495 37.3748 57.1672L33.6634 77.1558L30.3904 97.6452L59.8692 98.417L65.0441 91.8561L55.0128 76.1122L54.2438 64.771L50.8291 63.7714H54.176Z" fill="url(#paint2_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.0332 11.0652L65.8089 29.8694L53.6233 32.9641L51.8975 26.1686L37.5156 29.5982L41.8046 49.156L26.5163 74.8583L15.7109 68.4311L28.4601 46.9975L22.5905 20.2323L61.0332 11.0652Z" fill="url(#paint3_linear_4908_2847)"/>
</g>
<circle cx="45.7916" cy="45.7916" r="45.7916" transform="matrix(4.44093e-08 1 1 -4.44093e-08 110.078 103.118)" fill="url(#paint4_radial_4908_2847)"/>
<mask id="mask1_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="109" y="102" width="93" height="93">
<circle cx="45.9802" cy="45.9802" r="45.9802" transform="matrix(4.44093e-08 1 1 -4.44093e-08 109.891 102.929)" fill="url(#paint5_radial_4908_2847)"/>
</mask>
<g mask="url(#mask1_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M147.676 166.413L147.676 166.411C139.677 165.96 137.098 162.731 136.807 161.173L144.125 124.778C151.042 121.111 169.41 119.247 173.505 136.006C175.862 145.649 170.804 151.701 167.26 155.942C166.019 157.427 164.963 158.691 164.477 159.808L168.188 179.797L171.461 200.286L141.982 201.058L136.807 194.497L146.839 178.753L147.608 167.412L151.022 166.413H147.676Z" fill="url(#paint6_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M137.157 106.943L147.132 135.866L160.127 132.541V146.927L184.52 141.681L181.869 129.263L172.779 131.218V116.199L155.282 120.675L149.113 102.789L137.157 106.943Z" fill="url(#paint7_linear_4908_2847)"/>
</g>
<circle cx="263.939" cy="251.551" r="45.7916" transform="rotate(90 263.939 251.551)" fill="url(#paint8_radial_4908_2847)"/>
<mask id="mask2_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="217" y="205" width="93" height="93">
<circle cx="263.942" cy="251.551" r="45.9802" transform="rotate(90 263.942 251.551)" fill="url(#paint9_radial_4908_2847)"/>
</mask>
<g mask="url(#mask2_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M272.137 269.054L272.137 269.053C280.135 268.601 282.715 265.372 283.005 263.814L275.688 227.419C268.771 223.752 250.403 221.888 246.307 238.647C243.95 248.29 249.008 254.342 252.552 258.583C253.794 260.068 254.849 261.332 255.336 262.449L251.624 282.438L248.351 302.927L277.83 303.699L283.005 297.138L272.974 281.394L272.205 270.053L268.79 269.054H272.137Z" fill="url(#paint10_linear_4908_2847)"/>
<path d="M251.967 256.869L235.188 244.883L248.703 213.993H288.883L280.733 253.033L275.522 228.62L251.967 256.869Z" fill="url(#paint11_linear_4908_2847)"/>
</g>
<circle cx="154.13" cy="46.2684" r="45.7916" transform="rotate(90 154.13 46.2684)" fill="url(#paint12_radial_4908_2847)"/>
<mask id="mask3_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="108" y="0" width="93" height="93">
<circle cx="154.129" cy="46.2685" r="45.9802" transform="rotate(90 154.129 46.2685)" fill="url(#paint13_radial_4908_2847)"/>
</mask>
<g mask="url(#mask3_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.324 63.7714L162.324 63.7703C170.323 63.3186 172.902 60.0899 173.193 58.5319L165.875 22.1372C158.958 18.4699 140.59 16.6057 136.495 33.3644C134.138 43.008 139.196 49.0598 142.74 53.3006C143.981 54.7862 145.037 56.0495 145.523 57.1672L141.812 77.1558L138.539 97.6452L168.018 98.417L173.193 91.8561L163.161 76.1122L162.392 64.771L158.978 63.7714H162.324Z" fill="url(#paint14_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.937 11.0691L166.83 25.0554L155.559 19.2855L162.666 5.2992L173.937 11.0691Z" fill="url(#paint15_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M146.025 5.30955L153.217 19.2521L141.981 25.0909L134.789 11.1484L146.025 5.30955Z" fill="url(#paint16_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M124.933 24.1L140.389 26.5164L138.442 39.0643L122.986 36.6479L124.933 24.1Z" fill="url(#paint17_linear_4908_2847)"/>
</g>
<circle cx="45.7916" cy="45.7916" r="45.7916" transform="matrix(4.44093e-08 1 1 -4.44093e-08 218.129 103.118)" fill="url(#paint18_radial_4908_2847)"/>
<mask id="mask4_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="217" y="102" width="93" height="93">
<circle cx="45.9802" cy="45.9802" r="45.9802" transform="matrix(4.44093e-08 1 1 -4.44093e-08 217.941 102.929)" fill="url(#paint19_radial_4908_2847)"/>
</mask>
<g mask="url(#mask4_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M255.726 166.413L255.726 166.411C247.728 165.96 245.148 162.731 244.858 161.173L252.175 124.778C259.093 121.111 277.46 119.247 281.556 136.006C283.913 145.649 278.855 151.701 275.311 155.942C274.07 157.427 273.014 158.691 272.528 159.808L276.239 179.797L279.512 200.286L250.033 201.058L244.858 194.497L254.89 178.753L255.659 167.412L259.073 166.413H255.726Z" fill="url(#paint20_linear_4908_2847)"/>
<path d="M275.896 154.228L292.676 142.242L279.161 111.352H238.98L247.13 150.392L252.341 125.979L275.896 154.228Z" fill="url(#paint21_linear_4908_2847)"/>
</g>
<circle cx="45.9779" cy="251.551" r="45.7916" transform="rotate(90 45.9779 251.551)" fill="url(#paint22_radial_4908_2847)"/>
<mask id="mask5_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="205" width="92" height="93">
<circle cx="45.9808" cy="251.55" r="45.9802" transform="rotate(90 45.9808 251.55)" fill="url(#paint23_radial_4908_2847)"/>
</mask>
<g mask="url(#mask5_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.176 269.053L54.176 269.052C62.1742 268.601 64.754 265.372 65.0441 263.814L57.7271 227.419C50.8096 223.752 32.4419 221.888 28.3463 238.646C25.9895 248.29 31.0471 254.342 34.5911 258.583C35.8327 260.068 36.8885 261.332 37.3748 262.449L33.6634 282.438L30.3904 302.927L59.8692 303.699L65.0441 297.138L55.0128 281.394L54.2438 270.053L50.8291 269.053H54.176Z" fill="url(#paint24_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M64.6942 209.584L54.7197 238.507L41.7246 235.182V249.568L17.332 244.322L19.983 231.904L29.0724 233.859V218.84L46.5697 223.317L52.7381 205.43L64.6942 209.584Z" fill="url(#paint25_linear_4908_2847)"/>
</g>
<circle cx="264.021" cy="46.2684" r="45.7916" transform="rotate(90 264.021 46.2684)" fill="url(#paint26_radial_4908_2847)"/>
<mask id="mask6_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="218" y="0" width="93" height="93">
<circle cx="264.028" cy="46.2685" r="45.9802" transform="rotate(90 264.028 46.2685)" fill="url(#paint27_radial_4908_2847)"/>
</mask>
<g mask="url(#mask6_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M272.223 63.7713L272.223 63.7704C280.221 63.3186 282.801 60.0899 283.091 58.5319L275.774 22.1372C268.856 18.4699 250.489 16.6057 246.393 33.3644C244.036 43.008 249.094 49.0598 252.638 53.3006C253.88 54.7862 254.935 56.0495 255.422 57.1672L251.71 77.1558L248.437 97.6452L277.916 98.417L283.091 91.8561L273.06 76.1122L272.291 64.7712L268.875 63.7713H272.223Z" fill="url(#paint28_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M272.844 54.571L270.967 46.7404L283.268 43.7693L289.547 69.96L251.619 64.1825L253.518 51.627L272.844 54.571Z" fill="url(#paint29_linear_4908_2847)"/>
</g>
<circle cx="45.7916" cy="45.7916" r="45.7916" transform="matrix(4.44093e-08 1 1 -4.44093e-08 0.191406 103.118)" fill="url(#paint30_radial_4908_2847)"/>
<mask id="mask7_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="102" width="93" height="93">
<circle cx="45.9802" cy="45.9802" r="45.9802" transform="matrix(4.44093e-08 1 1 -4.44093e-08 -0.00390625 102.929)" fill="url(#paint31_radial_4908_2847)"/>
</mask>
<g mask="url(#mask7_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.781 166.412L37.7811 166.411C29.7828 165.96 27.2031 162.731 26.913 161.173L34.23 124.778C41.1475 121.111 59.5151 119.247 63.6107 136.006C65.9675 145.649 60.91 151.701 57.3659 155.942C56.1244 157.427 55.0685 158.691 54.5823 159.808L58.2936 179.797L61.5667 200.286L32.0879 201.058L26.913 194.497L36.9442 178.753L37.7132 167.412L41.1288 166.412H37.781Z" fill="url(#paint32_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.0981 161.54L39.04 149.382L26.739 146.41L23.8516 157.125L43.0981 161.54Z" fill="url(#paint33_linear_4908_2847)"/>
<path d="M57.8621 154.746L63.4205 149.818L71.0233 125.971L44.414 113.252L40.2959 125.971L50.4329 124.064L57.8621 154.746Z" fill="url(#paint34_linear_4908_2847)"/>
</g>
<circle cx="154.029" cy="251.551" r="45.7916" transform="rotate(90 154.029 251.551)" fill="url(#paint35_radial_4908_2847)"/>
<mask id="mask8_4908_2847" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="108" y="205" width="93" height="93">
<circle cx="154.032" cy="251.551" r="45.9802" transform="rotate(90 154.032 251.551)" fill="url(#paint36_radial_4908_2847)"/>
</mask>
<g mask="url(#mask8_4908_2847)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M162.465 269.054L162.465 269.053C170.463 268.601 173.043 265.372 173.333 263.814L166.016 227.419C159.099 223.752 140.731 221.888 136.635 238.647C134.279 248.29 139.336 254.342 142.88 258.583C144.122 260.068 145.178 261.332 145.664 262.449L141.952 282.438L138.679 302.927L168.158 303.699L173.333 297.138L163.302 281.394L162.533 270.053L159.118 269.054H162.465Z" fill="url(#paint37_linear_4908_2847)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M169.322 216.347L174.098 235.152L161.912 238.246L160.187 231.451L145.805 234.88L150.094 254.438L134.805 280.141L124 273.713L136.749 252.28L130.88 225.514L169.322 216.347Z" fill="url(#paint38_linear_4908_2847)"/>
</g>
<defs>
<radialGradient id="paint0_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.952 22.8736) rotate(70.8359) scale(73.2455)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint1_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.885 22.7774) rotate(70.8359) scale(73.5471)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint2_linear_4908_2847" x1="46.3932" y1="19.6589" x2="46.3932" y2="98.417" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint3_linear_4908_2847" x1="15.7109" y1="74.8583" x2="68.5856" y2="72.4673" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint4_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.7618 22.3968) rotate(70.8359) scale(73.2455)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint5_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.8844 22.4891) rotate(70.8359) scale(73.5471)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint6_linear_4908_2847" x1="155.458" y1="122.3" x2="155.458" y2="201.058" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint7_linear_4908_2847" x1="184.52" y1="146.927" x2="134.621" y2="143.844" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint8_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(247.909 228.156) rotate(70.8359) scale(73.2455)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint9_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(247.846 228.06) rotate(70.8359) scale(73.5471)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint10_linear_4908_2847" x1="264.354" y1="224.941" x2="264.354" y2="303.699" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint11_linear_4908_2847" x1="235.188" y1="256.869" x2="291.681" y2="252.795" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint12_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(138.1 22.8736) rotate(70.8359) scale(73.2455)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint13_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(138.033 22.7774) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint14_linear_4908_2847" x1="154.542" y1="19.6589" x2="154.542" y2="98.417" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint15_linear_4908_2847" x1="157.429" y1="27.2725" x2="177.453" y2="21.3778" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint16_linear_4908_2847" x1="149.54" y1="28.2149" x2="156.428" y2="8.44359" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint17_linear_4908_2847" x1="145.419" y1="34.7905" x2="133.501" y2="17.5974" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint18_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.7618 22.3968) rotate(70.8359) scale(73.2455)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint19_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.8844 22.4891) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint20_linear_4908_2847" x1="263.509" y1="122.3" x2="263.509" y2="201.058" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint21_linear_4908_2847" x1="292.676" y1="154.228" x2="236.182" y2="150.154" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint22_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.9481 228.156) rotate(70.8359) scale(73.2455)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint23_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.885 228.059) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint24_linear_4908_2847" x1="46.3932" y1="224.941" x2="46.3932" y2="303.699" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint25_linear_4908_2847" x1="17.332" y1="249.568" x2="67.231" y2="246.485" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint26_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(247.991 22.8736) rotate(70.8359) scale(73.2455)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint27_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(247.932 22.7774) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint28_linear_4908_2847" x1="264.44" y1="19.6589" x2="264.44" y2="98.417" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint29_linear_4908_2847" x1="289.547" y1="69.96" x2="249.712" y2="66.6382" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint30_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.7618 22.3968) rotate(70.8359) scale(73.2455)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint31_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.8844 22.4891) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint32_linear_4908_2847" x1="45.5639" y1="122.3" x2="45.5639" y2="201.058" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint33_linear_4908_2847" x1="23.8516" y1="161.54" x2="44.0978" y2="160.057" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint34_linear_4908_2847" x1="71.0234" y1="154.746" x2="38.5855" y2="153.363" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint35_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(137.999 228.156) rotate(70.8359) scale(73.2455)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint36_radial_4908_2847" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(137.936 228.06) rotate(70.8359) scale(73.5471)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint37_linear_4908_2847" x1="154.682" y1="224.941" x2="154.682" y2="303.699" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint38_linear_4908_2847" x1="124" y1="280.141" x2="176.875" y2="277.749" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/img/work/otf-website-illustrations-people-mobile.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

235
static/img/work/otf-website-illustrations-people.svg
View File

@ -0,0 +1,235 @@
<svg width="747" height="548" viewBox="0 0 747 548" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="197.32" cy="107.74" r="74" transform="rotate(90 197.32 107.74)" fill="url(#paint0_radial_4903_4755)"/>
<mask id="mask0_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="123" y="33" width="149" height="150">
<circle cx="197.32" cy="107.74" r="74.3047" transform="rotate(90 197.32 107.74)" fill="url(#paint1_radial_4903_4755)"/>
</mask>
<g mask="url(#mask0_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M210.565 136.025L210.565 136.023C223.49 135.293 227.659 130.076 228.128 127.558L216.304 68.7436C205.125 62.8172 175.442 59.8046 168.824 86.8869C165.015 102.471 173.188 112.251 178.916 119.104C180.922 121.505 182.628 123.546 183.414 125.353L177.416 157.655L172.127 190.766L219.765 192.013L228.128 181.41L211.917 155.968L210.675 137.641L205.156 136.025H210.565Z" fill="url(#paint2_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M221.648 50.8507L229.365 81.2386L209.673 86.2397L206.884 75.2581L183.643 80.8003L190.574 112.406L165.868 153.941L148.406 143.555L169.009 108.918L159.524 65.6649L221.648 50.8507Z" fill="url(#paint3_linear_4903_4755)"/>
</g>
<circle cx="74" cy="74" r="74" transform="matrix(4.44093e-08 1 1 -4.44093e-08 300.902 199.609)" fill="url(#paint4_radial_4903_4755)"/>
<mask id="mask1_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="300" y="199" width="150" height="149">
<circle cx="74.3047" cy="74.3047" r="74.3047" transform="matrix(4.44093e-08 1 1 -4.44093e-08 300.598 199.305)" fill="url(#paint5_radial_4903_4755)"/>
</mask>
<g mask="url(#mask1_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M361.657 301.895L361.658 301.893C348.732 301.163 344.563 295.945 344.095 293.428L355.919 234.613C367.098 228.687 396.78 225.674 403.399 252.756C407.207 268.341 399.034 278.12 393.307 284.974C391.301 287.374 389.594 289.416 388.809 291.222L394.806 323.524L400.096 356.635L352.457 357.882L344.095 347.28L360.305 321.837L361.548 303.51L367.066 301.895H361.657Z" fill="url(#paint6_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M344.657 205.791L360.776 252.531L381.777 247.158V270.406L421.195 261.927L416.911 241.861L402.223 245.02V220.748L373.947 227.983L363.978 199.078L344.657 205.791Z" fill="url(#paint7_linear_4903_4755)"/>
</g>
<circle cx="549.539" cy="439.479" r="74" transform="rotate(90 549.539 439.479)" fill="url(#paint8_radial_4903_4755)"/>
<mask id="mask2_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="475" y="365" width="149" height="149">
<circle cx="549.539" cy="439.479" r="74.3047" transform="rotate(90 549.539 439.479)" fill="url(#paint9_radial_4903_4755)"/>
</mask>
<g mask="url(#mask2_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M562.784 467.764L562.784 467.762C575.709 467.032 579.878 461.815 580.347 459.297L568.522 400.483C557.344 394.556 527.661 391.544 521.043 418.626C517.234 434.21 525.407 443.99 531.134 450.843C533.141 453.244 534.847 455.285 535.633 457.091L529.635 489.393L524.346 522.504L571.984 523.752L580.347 513.149L564.136 487.707L562.893 469.379L557.375 467.764H562.784Z" fill="url(#paint10_linear_4903_4755)"/>
<path d="M530.191 448.073L503.074 428.703L524.915 378.785H589.847L576.676 441.875L568.256 402.423L530.191 448.073Z" fill="url(#paint11_linear_4903_4755)"/>
</g>
<circle cx="372.094" cy="107.74" r="74" transform="rotate(90 372.094 107.74)" fill="url(#paint12_radial_4903_4755)"/>
<mask id="mask3_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="297" y="33" width="150" height="150">
<circle cx="372.094" cy="107.74" r="74.3047" transform="rotate(90 372.094 107.74)" fill="url(#paint13_radial_4903_4755)"/>
</mask>
<g mask="url(#mask3_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M385.339 136.025L385.339 136.024C398.264 135.293 402.433 130.076 402.902 127.558L391.077 68.7437C379.898 62.8173 350.216 59.8047 343.597 86.887C339.789 102.471 347.962 112.251 353.689 119.104C355.695 121.505 357.402 123.547 358.187 125.353L352.19 157.655L346.901 190.766L394.539 192.013L402.902 181.411L386.691 155.968L385.448 137.64L379.93 136.025H385.339Z" fill="url(#paint14_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M404.104 50.8571L392.619 73.4591L374.405 64.1348L385.891 41.5328L404.104 50.8571Z" fill="url(#paint15_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M359 41.5496L370.623 64.0809L352.466 73.5165L340.843 50.9852L359 41.5496Z" fill="url(#paint16_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M324.917 71.9152L349.894 75.8201L346.747 96.0977L321.77 92.1928L324.917 71.9152Z" fill="url(#paint17_linear_4903_4755)"/>
</g>
<circle cx="74" cy="74" r="74" transform="matrix(4.44093e-08 1 1 -4.44093e-08 475.512 199.609)" fill="url(#paint18_radial_4903_4755)"/>
<mask id="mask4_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="475" y="199" width="149" height="149">
<circle cx="74.3047" cy="74.3047" r="74.3047" transform="matrix(4.44093e-08 1 1 -4.44093e-08 475.207 199.305)" fill="url(#paint19_radial_4903_4755)"/>
</mask>
<g mask="url(#mask4_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M536.267 301.895L536.267 301.893C523.342 301.163 519.173 295.945 518.704 293.428L530.528 234.613C541.707 228.687 571.39 225.674 578.008 252.757C581.817 268.341 573.644 278.121 567.916 284.974C565.91 287.374 564.204 289.416 563.418 291.222L569.416 323.524L574.705 356.635L527.067 357.883L518.704 347.28L534.915 321.838L536.157 303.51L541.676 301.895H536.267Z" fill="url(#paint20_linear_4903_4755)"/>
<path d="M568.86 282.204L595.977 262.834L574.136 212.916H509.204L522.375 276.006L530.795 236.553L568.86 282.204Z" fill="url(#paint21_linear_4903_4755)"/>
</g>
<circle cx="197.32" cy="439.479" r="74" transform="rotate(90 197.32 439.479)" fill="url(#paint22_radial_4903_4755)"/>
<mask id="mask5_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="123" y="365" width="149" height="149">
<circle cx="197.32" cy="439.479" r="74.3047" transform="rotate(90 197.32 439.479)" fill="url(#paint23_radial_4903_4755)"/>
</mask>
<g mask="url(#mask5_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M210.565 467.764L210.565 467.762C223.49 467.032 227.659 461.815 228.128 459.297L216.304 400.483C205.125 394.556 175.442 391.544 168.824 418.626C165.015 434.21 173.188 443.99 178.916 450.843C180.922 453.244 182.628 455.285 183.414 457.091L177.416 489.393L172.127 522.504L219.765 523.752L228.128 513.149L211.917 487.707L210.675 469.379L205.156 467.764H210.565Z" fill="url(#paint24_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M227.565 371.661L211.446 418.4L190.446 413.027V436.275L151.027 427.797L155.311 407.73L170 410.889V386.618L198.276 393.852L208.244 364.948L227.565 371.661Z" fill="url(#paint25_linear_4903_4755)"/>
</g>
<circle cx="549.676" cy="107.74" r="74" transform="rotate(90 549.676 107.74)" fill="url(#paint26_radial_4903_4755)"/>
<mask id="mask6_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="475" y="33" width="149" height="150">
<circle cx="549.676" cy="107.74" r="74.3047" transform="rotate(90 549.676 107.74)" fill="url(#paint27_radial_4903_4755)"/>
</mask>
<g mask="url(#mask6_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M562.921 136.025L562.921 136.023C575.846 135.293 580.015 130.076 580.484 127.558L568.659 68.7436C557.48 62.8172 527.798 59.8046 521.179 86.8869C517.371 102.471 525.544 112.251 531.271 119.104C533.277 121.505 534.984 123.546 535.77 125.353L529.772 157.655L524.483 190.766L572.121 192.013L580.484 181.41L564.273 155.968L563.03 137.641L557.512 136.025H562.921Z" fill="url(#paint28_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M563.93 121.157L560.896 108.503L580.775 103.701L590.922 146.026L529.63 136.689L532.698 116.4L563.93 121.157Z" fill="url(#paint29_linear_4903_4755)"/>
</g>
<circle cx="74" cy="74" r="74" transform="matrix(4.44093e-08 1 1 -4.44093e-08 123.32 199.609)" fill="url(#paint30_radial_4903_4755)"/>
<mask id="mask7_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="123" y="199" width="149" height="149">
<circle cx="74.3047" cy="74.3047" r="74.3047" transform="matrix(4.44093e-08 1 1 -4.44093e-08 123.016 199.305)" fill="url(#paint31_radial_4903_4755)"/>
</mask>
<g mask="url(#mask7_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M184.075 301.895L184.076 301.893C171.15 301.163 166.981 295.945 166.513 293.428L178.337 234.613C189.516 228.687 219.198 225.674 225.817 252.756C229.625 268.341 221.452 278.12 215.725 284.974C213.719 287.374 212.012 289.416 211.227 291.222L217.224 323.524L222.513 356.635L174.875 357.882L166.513 347.28L182.723 321.837L183.966 303.51L189.484 301.895H184.075Z" fill="url(#paint32_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.661 294.02L186.103 274.372L166.225 269.571L161.559 286.886L192.661 294.02Z" fill="url(#paint33_linear_4903_4755)"/>
<path d="M216.524 283.041L225.506 275.077L237.793 236.54L194.792 215.987L188.137 236.54L204.518 233.458L216.524 283.041Z" fill="url(#paint34_linear_4903_4755)"/>
</g>
<circle cx="371.93" cy="439.479" r="74" transform="rotate(90 371.93 439.479)" fill="url(#paint35_radial_4903_4755)"/>
<mask id="mask8_4903_4755" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="297" y="365" width="150" height="149">
<circle cx="371.93" cy="439.479" r="74.3047" transform="rotate(90 371.93 439.479)" fill="url(#paint36_radial_4903_4755)"/>
</mask>
<g mask="url(#mask8_4903_4755)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M385.565 467.764L385.565 467.762C398.49 467.032 402.659 461.815 403.128 459.297L391.304 400.483C380.125 394.556 350.442 391.544 343.824 418.626C340.015 434.21 348.188 443.99 353.916 450.843C355.922 453.244 357.628 455.285 358.414 457.092L352.416 489.394L347.127 522.505L394.765 523.752L403.128 513.149L386.917 487.707L385.675 469.379L380.156 467.764H385.565Z" fill="url(#paint37_linear_4903_4755)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M396.648 382.59L404.365 412.977L384.673 417.979L381.884 406.997L358.643 412.539L365.574 444.145L340.868 485.68L323.406 475.294L344.009 440.657L334.524 397.404L396.648 382.59Z" fill="url(#paint38_linear_4903_4755)"/>
</g>
<defs>
<radialGradient id="paint0_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(171.416 69.9335) rotate(70.8359) scale(118.366)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint1_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(171.309 69.7778) rotate(70.8359) scale(118.853)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint2_linear_4903_4755" x1="197.988" y1="64.7386" x2="197.988" y2="192.013" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint3_linear_4903_4755" x1="148.406" y1="153.941" x2="233.853" y2="150.077" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint4_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.0956 36.1936) rotate(70.8359) scale(118.366)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint5_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.2936 36.3427) rotate(70.8359) scale(118.853)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint6_linear_4903_4755" x1="374.235" y1="230.608" x2="374.235" y2="357.882" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint7_linear_4903_4755" x1="421.195" y1="270.406" x2="340.558" y2="265.423" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint8_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(523.635 401.672) rotate(70.8359) scale(118.366)">
<stop stop-color="#25AAE1"/>
<stop offset="1" stop-color="#00709E"/>
</radialGradient>
<radialGradient id="paint9_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(523.528 401.517) rotate(70.8359) scale(118.853)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<linearGradient id="paint10_linear_4903_4755" x1="550.207" y1="396.478" x2="550.207" y2="523.752" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint11_linear_4903_4755" x1="503.074" y1="448.073" x2="594.369" y2="441.489" gradientUnits="userSpaceOnUse">
<stop stop-color="#F1E83B"/>
<stop offset="1" stop-color="#FEFCE8"/>
</linearGradient>
<radialGradient id="paint12_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(346.189 69.9335) rotate(70.8359) scale(118.366)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint13_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(346.083 69.7778) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint14_linear_4903_4755" x1="372.761" y1="64.7388" x2="372.761" y2="192.013" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint15_linear_4903_4755" x1="377.427" y1="77.042" x2="409.787" y2="67.5161" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint16_linear_4903_4755" x1="364.68" y1="78.565" x2="375.812" y2="46.6142" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint17_linear_4903_4755" x1="358.023" y1="89.1912" x2="338.763" y2="61.4069" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint18_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.0956 36.1936) rotate(70.8359) scale(118.366)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint19_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.2936 36.3427) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint20_linear_4903_4755" x1="548.844" y1="230.608" x2="548.844" y2="357.883" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint21_linear_4903_4755" x1="595.977" y1="282.204" x2="504.682" y2="275.62" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint22_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(171.416 401.672) rotate(70.8359) scale(118.366)">
<stop stop-color="#B7E7FB"/>
<stop offset="1" stop-color="#27ABE2"/>
</radialGradient>
<radialGradient id="paint23_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(171.309 401.517) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint24_linear_4903_4755" x1="197.988" y1="396.478" x2="197.988" y2="523.752" gradientUnits="userSpaceOnUse">
<stop stop-color="#B8E7FB"/>
<stop offset="1" stop-color="#7BD5FA"/>
</linearGradient>
<linearGradient id="paint25_linear_4903_4755" x1="151.027" y1="436.275" x2="231.665" y2="431.292" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint26_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(523.771 69.9335) rotate(70.8359) scale(118.366)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint27_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(523.665 69.7778) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint28_linear_4903_4755" x1="550.343" y1="64.7386" x2="550.343" y2="192.013" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint29_linear_4903_4755" x1="590.922" y1="146.026" x2="526.549" y2="140.658" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint30_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.0956 36.1936) rotate(70.8359) scale(118.366)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint31_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.2936 36.3427) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint32_linear_4903_4755" x1="196.653" y1="230.608" x2="196.653" y2="357.882" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint33_linear_4903_4755" x1="161.559" y1="294.02" x2="194.277" y2="291.624" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<linearGradient id="paint34_linear_4903_4755" x1="237.793" y1="283.041" x2="185.373" y2="280.806" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
<radialGradient id="paint35_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(346.025 401.672) rotate(70.8359) scale(118.366)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<radialGradient id="paint36_radial_4903_4755" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(345.919 401.517) rotate(70.8359) scale(118.853)">
<stop stop-color="#FCFAC1"/>
<stop offset="1" stop-color="#F1E83B"/>
</radialGradient>
<linearGradient id="paint37_linear_4903_4755" x1="372.988" y1="396.478" x2="372.988" y2="523.752" gradientUnits="userSpaceOnUse">
<stop stop-color="#7BD5FA"/>
<stop offset="1" stop-color="#008AC2"/>
</linearGradient>
<linearGradient id="paint38_linear_4903_4755" x1="323.406" y1="485.68" x2="408.853" y2="481.816" gradientUnits="userSpaceOnUse">
<stop stop-color="#008AC2"/>
<stop offset="1" stop-color="#035C81"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/img/work/otf-website-illustrations-people.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

18
static/img/work/otf-website-illustrations.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
static/img/work/otf-website-illustrations.webp
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

Write Preview
Loading…
Cancel
Save