100daysCSS/day15.html at main · danbodev/100daysCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DAY 15 | CSS CHALLENGE</title>

  <style>
    main {
      display: grid;
      min-height: 100vh;
      place-items: center;
    }

    .frame {
      width: 350px;
      height: 350px;
      border-radius: 1rem;
      box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
      background: #EA4C89;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .line {
      width: 225px;
      height: 2px;
      background: #fff;
      margin: 15px 0;
      animation: line 0.6s ease-out both;
    }

    .text {
      stroke: #EA4C89;
      stroke-dasharray: 270;
      stroke-dashoffset: 0;
    }

    #f {
      stroke-width: 6;
      animation: fill 1.5s ease-in-out both;
    }

    #r {
      stroke-width: 12;
      animation: fill 1.7s ease-in-out both;
    }

    #i {
      stroke-width: 6;
      animation: fill 2.2s ease-in-out both;
    }

    #d {
      stroke-width: 12;
      animation: fill 1.7s ease-in-out both;
    }

    #a {
      stroke-width: 12;
      animation: fill 2.2s ease-in-out both;
    }

    #y {
      stroke-width: 12;
      animation: fill 1.8s ease-in-out both;
    }


    @keyframes fill {
      from {
        fill: none;
        stroke-dashoffset: 0;
      }

      to {
        fill: #fff;
        stroke-dashoffset: 270;
      }
    }

    @keyframes line {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }
  </style>
</head>

<body>
  <main>
    <div class="frame">
      <div>
        <div class="line"></div>
        <svg width="227.969" height="80.195" viewBox="0 0 227.969 80.195" xmlns="http://www.w3.org/2000/svg">
          <g id="svgGroup" class="text">
            <path
              d="M 12.617 20.508 L 12.617 29.414 L 26.484 29.414 Q 27.368 29.414 27.835 29.692 A 1.263 1.263 0 0 1 27.891 29.727 A 19.632 19.632 0 0 1 29.058 30.604 A 25.38 25.38 0 0 1 30 31.406 Q 31.094 32.383 32.305 33.75 A 3.396 3.396 0 0 1 32.476 33.992 Q 32.632 34.237 32.677 34.427 A 0.624 0.624 0 0 1 32.695 34.57 Q 32.695 34.922 32.305 35.352 A 33.504 33.504 0 0 1 31.159 36.584 Q 30.601 37.154 30.071 37.632 A 20.36 20.36 0 0 1 30 37.695 A 24.983 24.983 0 0 1 28.926 38.604 A 19.314 19.314 0 0 1 27.891 39.375 Q 27.344 39.688 26.484 39.688 L 12.617 39.688 L 12.617 59.336 A 4.407 4.407 0 0 1 12.585 59.892 Q 12.508 60.493 12.25 60.825 A 1.074 1.074 0 0 1 12.129 60.957 A 1.39 1.39 0 0 1 11.69 61.222 Q 11.284 61.381 10.669 61.403 A 5.66 5.66 0 0 1 10.469 61.406 L 2.149 61.406 A 4.819 4.819 0 0 1 1.574 61.375 Q 0.977 61.303 0.628 61.067 A 1.188 1.188 0 0 1 0.488 60.957 A 1.245 1.245 0 0 1 0.191 60.518 Q 0.026 60.13 0.004 59.531 A 5.194 5.194 0 0 1 0 59.336 L 0 15.859 A 34.554 34.554 0 0 1 0.071 13.576 Q 0.221 11.317 0.69 9.774 A 9.943 9.943 0 0 1 0.723 9.668 A 5.555 5.555 0 0 1 1.765 7.731 A 5.225 5.225 0 0 1 3.535 6.387 Q 5.625 5.391 9.649 5.391 L 28.086 5.391 Q 28.969 5.391 29.437 5.668 A 1.263 1.263 0 0 1 29.492 5.703 A 19.632 19.632 0 0 1 30.66 6.581 A 25.38 25.38 0 0 1 31.602 7.383 Q 32.695 8.359 33.906 9.727 A 3.396 3.396 0 0 1 34.077 9.968 Q 34.234 10.214 34.279 10.403 A 0.624 0.624 0 0 1 34.297 10.547 Q 34.297 10.898 33.906 11.328 A 33.504 33.504 0 0 1 32.761 12.561 Q 32.203 13.13 31.672 13.609 A 20.36 20.36 0 0 1 31.602 13.672 A 24.983 24.983 0 0 1 30.527 14.58 A 19.314 19.314 0 0 1 29.492 15.352 Q 28.945 15.664 28.086 15.664 L 17.07 15.664 Q 14.492 15.664 13.555 16.758 A 3.11 3.11 0 0 0 13.022 17.691 Q 12.617 18.762 12.617 20.508 Z"
              id="f" vector-effect="non-scaling-stroke" />
            <path
              d="M 53.672 25.938 L 53.672 28.828 L 53.828 28.828 Q 56.691 20.888 64.032 20.707 A 13.988 13.988 0 0 1 64.375 20.703 Q 65.352 20.703 65.977 20.801 A 15.451 15.451 0 0 1 66.256 20.847 Q 66.658 20.917 66.836 20.977 Q 67.288 21.127 67.392 21.581 A 1.327 1.327 0 0 1 67.422 21.875 L 67.422 31.289 Q 67.422 32.5 66.016 31.953 Q 65.547 31.758 64.668 31.543 A 5.988 5.988 0 0 0 64.052 31.43 Q 63.406 31.342 62.522 31.33 A 21.312 21.312 0 0 0 62.227 31.328 Q 58.203 31.328 55.938 34.277 A 10.176 10.176 0 0 0 54.247 37.727 Q 53.852 39.115 53.728 40.758 A 20.626 20.626 0 0 0 53.672 42.305 L 53.672 59.336 A 4.407 4.407 0 0 1 53.64 59.892 Q 53.563 60.493 53.304 60.825 A 1.074 1.074 0 0 1 53.184 60.957 A 1.39 1.39 0 0 1 52.744 61.222 Q 52.339 61.381 51.724 61.403 A 5.66 5.66 0 0 1 51.524 61.406 L 43.477 61.406 A 4.819 4.819 0 0 1 42.902 61.375 Q 42.305 61.303 41.956 61.067 A 1.188 1.188 0 0 1 41.816 60.957 A 1.245 1.245 0 0 1 41.519 60.518 Q 41.354 60.13 41.332 59.531 A 5.194 5.194 0 0 1 41.328 59.336 L 41.328 26.602 Q 41.328 25.976 41.502 25.542 A 1.61 1.61 0 0 1 41.719 25.156 A 17.797 17.797 0 0 1 42.747 23.913 A 22.874 22.874 0 0 1 43.691 22.93 A 24.498 24.498 0 0 1 44.801 21.909 Q 45.579 21.233 46.524 20.508 A 2.074 2.074 0 0 1 46.816 20.322 A 1.539 1.539 0 0 1 47.149 20.195 A 3.084 3.084 0 0 1 47.372 20.148 Q 47.488 20.128 47.591 20.121 A 1.566 1.566 0 0 1 47.695 20.117 A 1.658 1.658 0 0 1 48.362 20.262 A 2.354 2.354 0 0 1 48.789 20.508 Q 52.031 23.047 53.32 24.844 A 1.758 1.758 0 0 1 53.671 25.87 A 2.177 2.177 0 0 1 53.672 25.938 Z"
              id="r" vector-effect="non-scaling-stroke" />
            <path
              d="M 85.586 23.477 L 85.586 59.336 A 4.407 4.407 0 0 1 85.554 59.892 Q 85.477 60.493 85.219 60.825 A 1.074 1.074 0 0 1 85.098 60.957 A 1.39 1.39 0 0 1 84.658 61.222 Q 84.253 61.381 83.638 61.403 A 5.66 5.66 0 0 1 83.438 61.406 L 75.391 61.406 A 4.819 4.819 0 0 1 74.816 61.375 Q 74.219 61.303 73.87 61.067 A 1.188 1.188 0 0 1 73.731 60.957 A 1.245 1.245 0 0 1 73.433 60.518 Q 73.268 60.13 73.246 59.531 A 5.194 5.194 0 0 1 73.242 59.336 L 73.242 23.477 A 4.407 4.407 0 0 1 73.275 22.92 Q 73.351 22.319 73.61 21.987 A 1.074 1.074 0 0 1 73.731 21.855 A 1.39 1.39 0 0 1 74.17 21.591 Q 74.576 21.431 75.191 21.41 A 5.66 5.66 0 0 1 75.391 21.406 L 83.438 21.406 A 4.819 4.819 0 0 1 84.012 21.438 Q 84.61 21.51 84.958 21.746 A 1.188 1.188 0 0 1 85.098 21.855 A 1.245 1.245 0 0 1 85.395 22.294 Q 85.56 22.683 85.582 23.282 A 5.194 5.194 0 0 1 85.586 23.477 Z M 71.758 7.383 A 1.398 1.398 0 0 0 71.445 8.281 A 1.321 1.321 0 0 0 71.758 9.16 A 41.526 41.526 0 0 1 71.915 9.348 Q 72.1 9.57 72.337 9.86 A 130.472 130.472 0 0 1 72.578 10.156 Q 73.672 11.445 75.039 12.832 A 33.469 33.469 0 0 0 77.969 15.469 Q 78.438 15.82 78.72 15.985 A 2.088 2.088 0 0 0 78.887 16.074 Q 79.18 16.211 79.453 16.211 Q 79.607 16.211 79.773 16.168 A 1.79 1.79 0 0 0 80.039 16.074 Q 80.274 15.972 80.64 15.682 A 8.42 8.42 0 0 0 80.899 15.469 A 49.83 49.83 0 0 0 83.789 12.832 A 55.425 55.425 0 0 0 85.108 11.489 A 40.654 40.654 0 0 0 86.25 10.234 Q 86.797 9.57 87.129 9.18 Q 87.461 8.789 87.461 8.281 A 1.422 1.422 0 0 0 87.129 7.363 A 20.288 20.288 0 0 0 87.128 7.362 Q 86.879 7.055 86.532 6.649 A 60.042 60.042 0 0 0 86.289 6.367 Q 84.063 3.789 80.899 1.055 A 9.838 9.838 0 0 0 80.762 0.953 Q 80.135 0.493 79.733 0.363 A 0.925 0.925 0 0 0 79.453 0.313 A 0.637 0.637 0 0 0 79.407 0.314 Q 79.047 0.34 78.435 0.765 A 7.758 7.758 0 0 0 78.047 1.055 A 79.964 79.964 0 0 0 75.117 3.73 A 48.52 48.52 0 0 0 73.76 5.083 A 36.646 36.646 0 0 0 72.578 6.367 A 323.672 323.672 0 0 0 72.473 6.496 Q 72.037 7.033 71.758 7.383 Z"
              id="i" vector-effect="non-scaling-stroke" />
            <path
              d="M 122.539 21.055 L 122.539 6.484 Q 122.539 5.859 122.713 5.425 A 1.61 1.61 0 0 1 122.93 5.039 Q 124.122 3.478 126.118 1.732 A 41.995 41.995 0 0 1 127.734 0.391 Q 128.079 0.144 128.378 0.053 A 1.143 1.143 0 0 1 128.711 0 Q 129.219 0 129.688 0.391 Q 131.131 1.498 132.185 2.491 A 21.533 21.533 0 0 1 132.52 2.813 A 22.216 22.216 0 0 1 133.696 4.057 A 17.277 17.277 0 0 1 134.492 5.039 Q 134.797 5.435 134.864 6.093 A 3.867 3.867 0 0 1 134.883 6.484 L 134.883 59.609 A 1.765 1.765 0 0 1 134.375 60.879 A 1.699 1.699 0 0 1 133.159 61.405 A 2.259 2.259 0 0 1 133.086 61.406 L 127.266 61.406 A 3.798 3.798 0 0 1 126.684 61.364 A 2.859 2.859 0 0 1 126.152 61.23 A 1.849 1.849 0 0 1 125.654 60.953 Q 125.438 60.787 125.234 60.547 L 122.813 57.422 L 122.539 57.422 A 5.53 5.53 0 0 1 122.167 57.922 Q 121.643 58.557 120.723 59.395 A 7.77 7.77 0 0 1 119.576 60.247 Q 118.962 60.627 118.203 60.971 A 17.615 17.615 0 0 1 116.934 61.484 Q 114.453 62.383 110.352 62.383 Q 105.156 62.383 101.504 59.824 A 15.51 15.51 0 0 1 96.592 54.116 A 19.135 19.135 0 0 1 95.957 52.754 Q 94.063 48.242 94.063 42.344 A 36.08 36.08 0 0 1 94.388 37.348 Q 94.757 34.714 95.544 32.528 A 17.672 17.672 0 0 1 96.816 29.746 Q 99.57 24.922 104.59 22.656 Q 109.609 20.391 116.445 20.391 Q 118.132 20.391 119.404 20.512 A 16.864 16.864 0 0 1 120.332 20.625 A 41.903 41.903 0 0 1 121.049 20.74 Q 121.715 20.853 122.159 20.956 A 6.938 6.938 0 0 1 122.539 21.055 Z M 122.539 47.695 L 122.539 31.328 A 5.214 5.214 0 0 0 122.175 31.123 Q 121.752 30.904 121.116 30.644 A 27.148 27.148 0 0 0 120.469 30.391 A 6.863 6.863 0 0 0 119.394 30.091 Q 118.165 29.844 116.406 29.844 A 11.737 11.737 0 0 0 113.488 30.184 A 7.716 7.716 0 0 0 109.141 33.008 Q 107.014 35.786 106.755 40.25 A 21.952 21.952 0 0 0 106.719 41.523 Q 106.719 47.07 108.75 49.727 Q 110.731 52.318 113.977 52.381 A 8.375 8.375 0 0 0 114.141 52.383 A 15.062 15.062 0 0 0 116.286 52.24 Q 118.316 51.947 119.668 51.055 A 8.059 8.059 0 0 0 121.545 49.365 A 7.086 7.086 0 0 0 122.539 47.695 Z"
              id="d" vector-effect="non-scaling-stroke" />
            <path
              d="M 179.961 37.5 L 179.961 59.609 A 2.238 2.238 0 0 1 179.865 60.278 A 1.882 1.882 0 0 1 179.551 60.879 Q 179.141 61.406 178.164 61.406 L 172.305 61.406 A 3.798 3.798 0 0 1 171.723 61.364 A 2.859 2.859 0 0 1 171.191 61.23 A 1.849 1.849 0 0 1 170.693 60.953 Q 170.477 60.787 170.274 60.547 L 167.852 57.422 L 167.578 57.422 Q 165.781 60.039 162.754 61.211 Q 159.727 62.383 155.781 62.383 A 16.578 16.578 0 0 1 151.959 61.967 A 11.278 11.278 0 0 1 146.66 59.16 A 10.617 10.617 0 0 1 143.595 53.498 A 15.737 15.737 0 0 1 143.281 50.273 Q 143.281 47.344 144.356 44.824 A 9.657 9.657 0 0 1 146.308 41.921 A 13.189 13.189 0 0 1 148.106 40.371 A 14.6 14.6 0 0 1 150.415 39.028 Q 151.638 38.449 153.128 37.963 A 33.665 33.665 0 0 1 155.606 37.266 Q 160.43 36.094 167.93 35.898 A 11.214 11.214 0 0 0 167.789 34.057 Q 167.627 33.082 167.276 32.319 A 4.537 4.537 0 0 0 166.152 30.781 A 5.582 5.582 0 0 0 164.257 29.713 Q 163.426 29.427 162.407 29.307 A 13.524 13.524 0 0 0 160.82 29.219 Q 157.617 29.219 155.586 30.313 Q 153.961 31.188 153.311 31.613 A 4.34 4.34 0 0 0 153.047 31.797 Q 152.521 32.248 151.777 32.156 A 2.24 2.24 0 0 1 151.719 32.148 Q 150.664 31.992 149.473 31.602 A 62.591 62.591 0 0 1 148.237 31.182 A 78.506 78.506 0 0 1 146.914 30.703 A 1.433 1.433 0 0 1 146.749 30.624 Q 146.624 30.554 146.484 30.449 Q 146.25 30.273 146.211 29.922 Q 146.211 29.727 146.25 29.434 A 5.783 5.783 0 0 1 146.275 29.269 Q 146.326 28.958 146.445 28.359 A 20.357 20.357 0 0 1 146.578 27.75 Q 146.646 27.457 146.73 27.126 A 45.005 45.005 0 0 1 146.914 26.426 Q 147.227 25.273 147.5 24.648 A 2.961 2.961 0 0 1 147.933 24.043 Q 148.16 23.794 148.461 23.557 A 5.657 5.657 0 0 1 148.672 23.398 Q 149.207 22.958 151.492 22.086 A 69.655 69.655 0 0 1 152.695 21.641 A 16.13 16.13 0 0 1 155.089 21.002 Q 158.045 20.43 162.422 20.43 A 26.049 26.049 0 0 1 169.256 21.247 Q 177.076 23.378 179.183 31.068 A 24.369 24.369 0 0 1 179.961 37.5 Z M 167.852 47.695 L 167.852 43.359 Q 163.337 43.359 160.699 43.94 A 12.342 12.342 0 0 0 159.707 44.199 A 12.501 12.501 0 0 0 158.358 44.696 Q 156.989 45.301 156.312 46.098 A 3.121 3.121 0 0 0 156.094 46.387 A 5.146 5.146 0 0 0 155.195 49.297 A 5.674 5.674 0 0 0 155.304 50.447 Q 155.585 51.806 156.602 52.441 A 5.571 5.571 0 0 0 158.394 53.152 Q 159.124 53.31 159.965 53.32 A 9.625 9.625 0 0 0 160.078 53.32 A 11.217 11.217 0 0 0 162.153 53.141 Q 163.314 52.922 164.219 52.436 A 5.462 5.462 0 0 0 165.508 51.484 Q 167.117 49.876 167.706 48.177 A 6.339 6.339 0 0 0 167.852 47.695 Z"
              id="a" vector-effect="non-scaling-stroke" />
            <path
              d="M 227.969 26.953 L 227.969 26.875 L 227.969 26.992 L 227.969 26.953 Q 227.969 26.476 227.859 26.109 A 1.726 1.726 0 0 0 227.578 25.547 A 17.383 17.383 0 0 0 226.695 24.513 A 22.641 22.641 0 0 0 225.508 23.32 Q 224.827 22.683 223.973 21.996 A 40.817 40.817 0 0 0 222.539 20.898 A 1.969 1.969 0 0 0 222.376 20.776 A 1.502 1.502 0 0 0 221.524 20.508 A 1.242 1.242 0 0 0 221.236 20.543 Q 221.053 20.586 220.858 20.684 A 2.68 2.68 0 0 0 220.508 20.898 A 48.897 48.897 0 0 0 220.035 21.258 Q 219.34 21.792 218.735 22.299 A 28.388 28.388 0 0 0 217.578 23.32 A 26.855 26.855 0 0 0 216.578 24.304 A 21.179 21.179 0 0 0 215.469 25.547 A 1.61 1.61 0 0 0 215.252 25.933 Q 215.078 26.367 215.078 26.992 L 215.078 26.875 Q 215.078 28.347 214.905 30.06 A 47.526 47.526 0 0 1 214.531 32.871 Q 213.984 36.25 213.125 39.668 A 88.593 88.593 0 0 1 212.241 42.93 A 67.936 67.936 0 0 1 211.309 45.879 Q 210.651 47.799 210.076 49.101 A 17.203 17.203 0 0 1 209.57 50.156 L 209.375 50.156 A 13.186 13.186 0 0 1 208.836 49.637 Q 207.404 48.178 206.055 45.957 A 34.478 34.478 0 0 1 204.898 43.892 A 41.781 41.781 0 0 1 203.164 40.059 Q 201.875 36.797 201.133 33.359 A 35.321 35.321 0 0 1 200.71 31.038 A 28.924 28.924 0 0 1 200.391 26.836 L 200.391 26.992 A 3.619 3.619 0 0 0 200.377 26.671 Q 200.314 25.964 199.961 25.547 A 16.631 16.631 0 0 0 199.009 24.443 A 21.942 21.942 0 0 0 197.871 23.32 Q 196.641 22.188 194.844 20.898 A 2.855 2.855 0 0 0 194.712 20.81 Q 194.515 20.685 194.323 20.612 A 1.492 1.492 0 0 0 193.789 20.508 A 1.317 1.317 0 0 0 193.453 20.554 Q 193.119 20.642 192.734 20.898 Q 190.659 22.412 189.179 23.849 A 19.125 19.125 0 0 0 187.617 25.547 Q 187.339 25.876 187.241 26.353 A 2.789 2.789 0 0 0 187.188 26.914 A 23.718 23.718 0 0 0 187.188 26.948 Q 187.191 29.091 187.579 31.44 A 38.077 38.077 0 0 0 188.574 35.781 A 57.659 57.659 0 0 0 188.935 36.983 A 63.412 63.412 0 0 0 192.266 45.41 A 69.621 69.621 0 0 0 192.629 46.16 A 63.01 63.01 0 0 0 197.441 54.355 Q 200.313 58.477 203.281 61.211 A 37.568 37.568 0 0 1 203.04 61.615 Q 200.306 66.129 197.5 67.813 Q 194.57 69.57 191.875 69.57 Q 191.314 69.57 190.954 69.53 A 2.989 2.989 0 0 1 190.703 69.492 A 6.915 6.915 0 0 0 190.538 69.461 Q 190.269 69.414 190.117 69.414 A 0.933 0.933 0 0 0 189.996 69.422 Q 189.842 69.443 189.649 69.512 Q 189.452 69.582 189.175 69.783 A 5.059 5.059 0 0 0 188.945 69.961 Q 188.535 70.294 188.007 70.787 A 35.152 35.152 0 0 0 187.422 71.348 A 18.331 18.331 0 0 0 186.592 72.212 A 13.62 13.62 0 0 0 185.899 73.047 A 3.836 3.836 0 0 0 185.43 73.711 A 1.52 1.52 0 0 0 185.327 73.938 A 1.635 1.635 0 0 0 185.234 74.492 Q 185.234 74.883 185.547 75.449 Q 185.859 76.016 186.133 76.445 Q 187.291 78.183 188.297 79.157 A 8.823 8.823 0 0 0 188.32 79.18 A 3.882 3.882 0 0 0 188.887 79.575 A 5.12 5.12 0 0 0 189.57 79.902 Q 190.104 80.113 191.001 80.172 A 11.533 11.533 0 0 0 191.758 80.195 A 20.762 20.762 0 0 0 198.632 79.022 A 25.32 25.32 0 0 0 204.844 75.781 A 28.233 28.233 0 0 0 208.26 72.936 Q 212.636 68.696 216.563 61.719 Q 220.195 55.313 222.734 48.633 A 111.961 111.961 0 0 0 224.971 42.192 A 83.436 83.436 0 0 0 226.602 36.23 A 87.661 87.661 0 0 0 226.72 35.712 Q 227.535 32.103 227.819 29.387 A 26.357 26.357 0 0 0 227.969 26.953 Z M 187.188 26.992 L 187.188 26.875 L 187.188 26.914 L 187.188 26.992 Z"
              id="y" vector-effect="non-scaling-stroke" />
          </g>
        </svg>
        <div class="line"></div>
      </div>
    </div>
  </main>
</body>

</html>