<div>
<small>color = the individual <br>
white = the unknow <br>
black = the action</small>
</div>
<svg class="project-icon" height="300" viewBox="-10 0 501.94 520.22">
<polygon class="projects-icon__1" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="145 111.18 345 11.18 245 211.18 45 311.18 145 111.18" />
<polygon class="projects-icon__2" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="5 11.18 255 61.18 205 211.18 5 311.18 5 11.18" />
<polygon class="projects-icon__3" fill="var(--text)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--text)" points="65 81.18 165 81.18 265 281.18 65 181.18 65 81.18" />
<polygon class="projects-icon__4" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--accent)" points="425 411.18 225 511.18 275 261.18 475 261.18 425 411.18" />
<circle fill="var(--text)" class="projects-icon__5" cx="385" cy="201.18" r="25" />
</svg>
<svg class="knowledge-icon" height="300" viewBox="0 0 520 510">
<rect class="knowledge-icon__1" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="5" y="5" width="300" height="300" />
<rect class="knowledge-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="215" y="205" width="300" height="300" />
<circle stroke="var(--accent)" cx="385" cy="385" r="50" fill="var(--accent)" />
<polygon class="knowledge-icon__3" fill="var(--text)" points="55 485 105 335 255 285 255 485 55 485" />
<polygon class="knowledge-icon__4" fill="var(--border)" points="45 65 245 165 245 265 45 365 45 65" />
</svg>
<svg class="portfolio-icon" height="300" viewBox="-20 0 470 425">
<circle fill="var(--border)" cx="180" cy="400" r="25" />
<polygon class="portfolio-icon__1" fill="var(--text)" points="100 100 300 0 200 200 0 300 100 100" />
<circle class="portfolio-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" cx="360" cy="170" r="75" />
<rect fill="var(--text)" x="110" y="160" width="100" height="100" />
<rect class="portfolio-icon__2" fill="var(--border)" x="40" y="90" width="200" height="200" />
</svg>
<svg class="journal-icon" height="300" viewBox="0 -100 550 550">
<polygon class="journal-icon__2" fill="var(--border)" points="400 360 250 410 200 160 450 210 400 360" />
<polygon class="journal-icon__1" fill="var(--text)" points="0 0 250 50 300 300 100 200 0 0" />
<circle fill="none" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" cx="310" cy="370" r="75" />
</svg>
<svg class="journal-icon" height="300" viewBox="-20 0 443.09 464.04">
<polygon fill="none" fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="35 109.04 235 9.04 185 259.04 35 209.04 35 109.04" />
<polygon fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="415 459.04 115 459.04 165 209.04 315 259.04 415 459.04" />
<circle fill="var(--text)" cx="75" cy="159.04" r="75" />
<circle class="about-icon__1" fill="var(--accent)" cx="75" cy="179.04" r="25" />
<circle class="about-icon__2" fill="var(--accent)" cx="75" cy="309.04" r="50" />
</svg>
<style>
svg {
margin: 30px;
}
</style>
<div>
<small>color = the individual <br>
white = the unknow <br>
black = the action</small>
</div>
<svg class="project-icon" height="300" viewBox="-10 0 501.94 520.22">
<polygon class="projects-icon__1" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="145 111.18 345 11.18 245 211.18 45 311.18 145 111.18" />
<polygon class="projects-icon__2" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--border)" points="5 11.18 255 61.18 205 211.18 5 311.18 5 11.18" />
<polygon class="projects-icon__3" fill="var(--text)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--text)" points="65 81.18 165 81.18 265 281.18 65 181.18 65 81.18" />
<polygon class="projects-icon__4" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10px" stroke="var(--accent)" points="425 411.18 225 511.18 275 261.18 475 261.18 425 411.18" />
<circle fill="var(--text)" class="projects-icon__5" cx="385" cy="201.18" r="25" />
</svg>
<svg class="knowledge-icon" height="300" viewBox="0 0 520 510">
<rect class="knowledge-icon__1" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="5" y="5" width="300" height="300"/>
<rect class="knowledge-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" x="215" y="205" width="300" height="300"/>
<circle stroke="var(--accent)" cx="385" cy="385" r="50" fill="var(--accent)"/>
<polygon class="knowledge-icon__3" fill="var(--text)" points="55 485 105 335 255 285 255 485 55 485"/>
<polygon class="knowledge-icon__4" fill="var(--border)" points="45 65 245 165 245 265 45 365 45 65"/>
</svg>
<svg class="portfolio-icon" height="300" viewBox="-20 0 470 425">
<circle fill="var(--border)" cx="180" cy="400" r="25"/>
<polygon class="portfolio-icon__1" fill="var(--text)" points="100 100 300 0 200 200 0 300 100 100"/>
<circle class="portfolio-icon__2" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" fill="none" cx="360" cy="170" r="75"/>
<rect fill="var(--text)" x="110" y="160" width="100" height="100"/>
<rect class="portfolio-icon__2" fill="var(--border)" x="40" y="90" width="200" height="200"/>
</svg>
<svg class="journal-icon" height="300" viewBox="0 -100 550 550">
<polygon class="journal-icon__2" fill="var(--border)" points="400 360 250 410 200 160 450 210 400 360"/>
<polygon class="journal-icon__1" fill="var(--text)" points="0 0 250 50 300 300 100 200 0 0"/>
<circle fill="none" stroke="var(--accent)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" cx="310" cy="370" r="75"/>
</svg>
<svg class="journal-icon" height="300" viewBox="-20 0 443.09 464.04">
<polygon fill="none" fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="35 109.04 235 9.04 185 259.04 35 209.04 35 109.04"/>
<polygon fill="none" stroke="var(--border)" stroke-width="10px" stroke-miterlimit="10" stroke-linecap="round" points="415 459.04 115 459.04 165 209.04 315 259.04 415 459.04"/>
<circle fill="var(--text)" cx="75" cy="159.04" r="75"/>
<circle class="about-icon__1" fill="var(--accent)" cx="75" cy="179.04" r="25"/>
<circle class="about-icon__2" fill="var(--accent)" cx="75" cy="309.04" r="50"/>
</svg>
<style>
svg {
margin: 30px;
}
</style>
/* No context defined. */
@media (prefers-reduced-motion: no-preference) {
@keyframes projects-icon__1 {
0% {
transform: rotate(0deg);
transform: skew(0deg);
}
89% {
transform: rotate(0deg);
transform: skew(0deg);
}
90% {
transform: rotate(4deg);
transform: skew(-4deg);
}
91% {
transform: rotate(-4deg);
transform: skew(4deg);
}
100% {
transform: rotate(0deg);
transform: skew(0deg);
}
}
.projects-icon__1 {
animation: projects-icon__1 8s linear infinite;
transform-origin: 40% 30%;
}
@keyframes projects-icon__2 {
0% {
transform: rotate(0deg);
transform: skew(0deg);
}
89% {
transform: rotate(0deg);
transform: skew(0deg);
}
90% {
transform: rotate(4deg);
transform: skew(-4deg);
}
91% {
transform: rotate(-4deg);
transform: skew(4deg);
}
100% {
transform: rotate(0deg);
transform: skew(0deg);
}
}
.projects-icon__2 {
animation: projects-icon__2 7s linear infinite;
transform-origin: 40% 30%;
}
@keyframes projects-icon__3 {
0% {
transform: translate(0, 0);
}
90% {
transform: translate(60px, 60px);
}
92% {
transform: translate(-10px, -10px);
}
100% {
transform: translate(0, 0);
}
}
.projects-icon__3 {
animation: projects-icon__3 5s ease-out infinite;
transform-origin: 70% 70%;
}
@keyframes projects-icon__4 {
0% {
transform: rotate(0deg);
transform: skew(0deg);
}
89% {
transform: rotate(0deg);
transform: skew(0deg);
}
90% {
transform: rotate(4deg);
transform: skew(-4deg);
}
91% {
transform: rotate(-4deg);
transform: skew(4deg);
}
92% {
transform: rotate(4deg);
transform: skew(-4deg);
}
93% {
transform: rotate(-4deg);
transform: skew(4deg);
}
94% {
transform: rotate(4deg);
transform: skew(-4deg);
}
100% {
transform: rotate(0deg);
transform: skew(0deg);
}
}
.projects-icon__4 {
animation: projects-icon__4 5s linear infinite;
transform-origin: 70% 70%;
}
.knowledge-icon__1 {
animation: knowledge-icon__1 8s linear infinite;
position: relative;
}
@keyframes knowledge-icon__1 {
0%,20% {
transform: translate(0, 0);
}
21%, 22% {
transform: translate(0, 10px);
}
23%, 50% {
transform: translate(0, 10px);
}
51%, 52% {
transform: translate(10px, 10px);
}
53%, 75% {
transform: translate(10px, 10px);
}
76%, 77% {
transform: translate(10px, 0);
}
78%, 98% {
transform: translate(10px, 0);
}
99%, 100% {
transform: translate(0, 0);
}
}
.knowledge-icon__2 {
animation: knowledge-icon__2 12s linear infinite;
position: relative;
}
@keyframes knowledge-icon__2 {
0%,20% {
transform: translate(0, 0);
}
21%, 22% {
transform: translate(-10px, 0);
}
23%, 50% {
transform: translate(-10px, 0);
}
51%, 52% {
transform: translate(-10px, -10px);
}
53%, 75% {
transform: translate(-10px, -10px);
}
76%, 77% {
transform: translate(0, -10px);
}
78%, 98% {
transform: translate(0, -10px);
}
99%, 100% {
transform: translate(0, 0);
}
}
.knowledge-icon__3 {
animation: knowledge-icon__3 12s backwards infinite;
position: relative;
transform-origin: 50%;
}
@keyframes knowledge-icon__3 {
0%, 49% {
transform: rotate(0deg);
}
50%, 51%{
transform: rotate(4deg);
}
52%, 78% {
transform: rotate(4deg);
}
79%, 80% {
transform: rotate(0deg);
}
81%, 100% {
transform: rotate(0deg);
}
}
.knowledge-icon__4 {
animation: knowledge-icon__4 12s infinite;
position: relative;
transform-origin: 50%;
}
@keyframes knowledge-icon__4 {
0%, 49% {
transform: rotate(0deg);
}
51% {
transform: rotate(12deg);
}
78%{
transform: rotate(4deg);
}
100%{
transform: rotate(0deg);
}
}
.portfolio-icon__1 {
animation: portfolio-icon__1 6s linear infinite;
transform-origin: 40%;
}
@keyframes portfolio-icon__1 {
0% {
transform: rotate(0deg);
}
35% {
transform: rotate(0deg);
}
40% {
transform: rotate(20deg);
}
60% {
transform: rotate(20deg);
}
65% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.portfolio-icon__2 {
animation: portfolio-icon__2 6s linear infinite;
transform-origin: 50%;
}
@keyframes portfolio-icon__2 {
0% {
transform: scale(1);
}
40% {
transform: scale(1);
}
45% {
transform: scale(1.02);
}
50% {
transform: scale(1);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.journal-icon__1 {
animation: journal-icon__1 8s linear infinite;
transform-origin: 100%;
}
@keyframes journal-icon__1 {
0% {
transform: translate(0);
}
30% {
transform: translate(0);
}
31% {
transform: translate(20px, 50px) rotate(12deg);
}
40% {
transform: translate(20px, 50px) rotate(12deg);
}
41% {
transform: translate(30px, 120px) rotate(26deg);
}
50% {
transform: translate(30px, 120px) rotate(26deg);
}
51% {
transform: translate(15px, 215px) rotate(46deg);
}
98% {
transform: translate(15px, 215px) rotate(46deg);
}
99% {
transform: translate(30px, 25px) rotate(12deg);
}
100% {
transform: translate(0);
}
}
.journal-icon__2 {
animation: journal-icon__2 8s linear infinite;
}
@keyframes journal-icon__2 {
0% {
transform: translate(0);
}
97% {
transform: translate(0);
}
98% {
transform: skew(4deg, 4deg);
transform-origin: 100%;
}
99% {
transform: skew(-4deg, -4deg);
transform-origin: 100%;
}
100% {
transform: translate(0);
}
}
.about-icon__1 {
animation: about-icon__1 8s linear infinite;
}
@keyframes about-icon__1 {
0% {
transform: translate(0, 5px);
}
12.5% {
transform: translate(-15px, 0);
}
25% {
transform: translate(0px, 5px);
}
37.5% {
transform: translate(15px, 0px);
}
45% {
transform: translate(0, -18px);
}
65% {
transform: translate(0, -18px);
}
75% {
transform: translate(0, 5px);
}
87.5% {
transform: translate(15px, 0px);
}
100% {
transform: translate(0, 5px);
}
}
.about-icon__2 {
animation: about-icon__2 4s linear infinite;
}
@keyframes about-icon__2 {
0% {
transform: translate(0);
}
25% {
transform: translate(-40px);
}
50% {
transform: translate(0px);
}
75% {
transform: translate(40px);
}
100% {
transform: translate(0);
}
}
}
No notes defined.