|
9 | 9 | </div> |
10 | 10 | <div class="d-flex justify-content-end mb-4"> |
11 | 11 | <svg xmlns="http://www.w3.org/2000/svg" class="border-0" viewBox="0 0 465 285" role="img" aria-labelledby="title"> |
12 | | - <title id="title">A code panel with a traffic cone.</title> |
| 12 | + <title id="title">Bob worried about the maintenance.</title> |
13 | 13 | <defs> |
14 | 14 | <filter id="drop" x="-20%" y="-20%" width="140%" height="140%"> |
15 | 15 | <feGaussianBlur in="SourceAlpha" stdDeviation="6"/> |
|
21 | 21 | <style> |
22 | 22 | .bob { animation: bob 2.2s ease-in-out infinite; transform-origin: center bottom; } |
23 | 23 | .blink { animation: blink 1.4s ease-in-out infinite; } |
| 24 | + .bubble { animation: lookAround 4s ease-in-out infinite alternate; } |
24 | 25 | @keyframes bob { 0%,100%{ transform: translateY(160)} 50%{ transform: translateY(-8px)} } |
25 | 26 | @keyframes blink { 0%,100%{ opacity: .25 } 50%{ opacity: 1 } } |
| 27 | + @keyframes lookAround { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } |
26 | 28 | </style> |
27 | 29 | <g transform="translate(70,0)" filter="url(#drop)"> |
28 | 30 | <rect x="0" y="0" rx="16" ry="16" width="380" height="240" fill="var(--bs-dark)"/> |
|
41 | 43 | <path fill="var(--bs-warning)" d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/> |
42 | 44 | <path fill="var(--bs-warning)" d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/> |
43 | 45 | </g> |
44 | | - <g class="bob"> |
45 | | - <g transform="translate(0,180)"> |
| 46 | + <g transform="translate(0,180)" filter="url(#drop)"> |
| 47 | + <g class="bob"> |
46 | 48 | <ellipse cx="0" cy="75" rx="64" ry="16" fill="#000" opacity=".1"/> |
47 | 49 | <path transform="scale(7) translate(-8,-3)" fill="var(--bs-light)" d="M7.03 1.88 c.252-1.01 1.688-1.01 1.94 0 l2.905 11.62 H4.125 Z"/> |
48 | 50 | <path transform="scale(7) translate(-8,-3)" fill="var(--bs-orange)" d="m9.97 4.88.953 3.811C10.159 8.878 9.14 9 8 9s-2.158-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12m-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.275 3.9C6.8 3.965 7.382 4 8 4s1.2-.036 1.725-.098m4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257z"/> |
|
51 | 53 | <circle cx="-9" cy="21" r="1" fill="var(--bs-light)"/> |
52 | 54 | <circle cx="11" cy="21" r="1" fill="var(--bs-light)"/> |
53 | 55 | <rect x="-6" y="32" width="12" height="3" rx="2" fill="var(--bs-dark)"/> |
54 | | - <g filter="url(#drop)"> |
55 | | - <path transform="scale(3) translate(-8,-25)" fill="var(--bs-light)" d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> |
56 | | - <path transform="scale(3) translate(-8,-25)" fill="var(--bs-light)" d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/> |
57 | | - </g> |
| 56 | + </g> |
| 57 | + <g class="bubble"> |
| 58 | + <path transform="scale(4) translate(-8,-25)" fill="var(--bs-warning)" d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> |
| 59 | + <path class="blink" transform="scale(2) translate(-8,-45)" fill="var(--bs-warning)" d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/> |
58 | 60 | </g> |
59 | 61 | </g> |
60 | 62 | </g> |
|
0 commit comments