academic-cap

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  signal,
7} from "@angular/core";
8 
9@Component({
10  selector: "hi-academic-cap",
11  standalone: true,
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  host: {
14    "[attr.aria-label]": "'academic-cap'",
15    role: "img",
16    "(mouseenter)": "onMouseEnter()",
17    "(mouseleave)": "onMouseLeave()",
18  },
19  template: `<svg
20    xmlns="http://www.w3.org/2000/svg"
21    [attr.width]="size()"
22    [attr.height]="size()"
23    viewBox="0 0 24 24"
24    fill="none"
25    [attr.stroke]="color()"
26    [attr.stroke-width]="strokeWidth()"
27    stroke-linecap="round"
28    stroke-linejoin="round"
29    class="icon-svg"
30  >
31    <g [class.cap-animate]="shouldAnimate()" style="transform-origin: center center">
32      <path
33        d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342"
34      />
35    </g>
36    <g [class.tassel-animate]="shouldAnimate()" style="transform-origin: 6.75px 14.25px">
37      <path
38        d="M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
39      />
40    </g>
41  </svg>`,
42  styles: [
43    `
44      :host {
45        display: inline-block;
46      }
47 
48      .icon-svg {
49        transform-box: fill-box;
50        transform-origin: center;
51      }
52 
53      g {
54        transform-box: fill-box;
55      }
56 
57      g.cap-animate {
58        animation: cap-animate 0.5s ease-in-out;
59      }
60 
61      g.tassel-animate {
62        animation: tassel-animate 0.6s ease-in-out;
63      }
64 
65      @keyframes cap-animate {
66        0% {
67          transform: translateY(0) rotate(0deg);
68        }
69        33% {
70          transform: translateY(-3px) rotate(-5deg);
71        }
72        66% {
73          transform: translateY(-3px) rotate(5deg);
74        }
75        100% {
76          transform: translateY(0) rotate(0deg);
77        }
78      }
79 
80      @keyframes tassel-animate {
81        0% {
82          transform: rotate(0deg);
83        }
84        25% {
85          transform: rotate(10deg);
86        }
87        50% {
88          transform: rotate(-10deg);
89        }
90        75% {
91          transform: rotate(5deg);
92        }
93        100% {
94          transform: rotate(0deg);
95        }
96      }
97    `,
98  ],
99})
100// … truncated