<div id="bubble"></div>
<svg viewBox="0 0 211.66666 211.66667">
 <g id="layer1">
  <path id="path843" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#ff7f2a" d="m122.06 127.8c-4.28 3.18-13.46 4.84-20.52 6.53-8.994 0.37-15.401-2.47-23.074-6.3-0.09-2.21 2.983-6.09 4.14-8.83 6.004-2.02 8.241-0.02 14.646 0.02v-3.6l8.158-0.18v3.87c6.87-0.82 6.22-2.04 11.09-1.3 1.06 3.43 5.77 7.51 5.56 9.79z"/>
  <path id="path854" style="stroke-width:0;fill:#f00;fill-rule:evenodd" d="m99.473 141.88 1.187-2.8-2.884-1.08 3.164-3.68 1.14 0.33 3.45-0.49-0.33 4.75-3.27-0.14 2.41 3.21z"/>
  <path id="face" d="m67.349 66.758c-1.417 3.076-0.808 6.405-0.101 9.746 0.689 3.574 1.92 4.982 3.137 6.446 1.648 2.106 2.121-0.096 3.036-0.675 0.337 4.949 0.409 10.428 1.012 14.844 0.277 6.581 1.683 12.031 2.699 17.881 4.163 8.16 7.964 10.58 11.872 12.42 12.256 5.49 25.416 0.54 30.636-8.37 2.38-3.6 5.8-9.23 6.17-12.73l4.7-30.762 0.73 3.329c2.38 2.034 3.73 1.69 4.66-1.038 2.63-3.432 2.37-6.167 2.6-5.933 0.13-3.928-1.04-3.58-1.34-5.586-1.72-3.389-2.82-4.794-6.28 1.085-0.48-8.856-1.35-15.873-1.83-23.735-0.59-3.462 0.15-3.419-4.77-8.96-2.71-5.248-11-3.429-17.16 3.851-1.07 3.22-2.35 12.787-4.84-0.237-8.557-8.076-21.417-12.963-26.047 3.848l-2.474 22.552c-1.38-1.131-2.254-3.271-4.89-1.89z" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#ff7f2a" class="head"/>
  <path id="hair" d="m66.767 63.07c0.813 8.607 4.62 5.234 8.876 4.66l12.427-19.972-9.542-5.548 11.761 6.435c10.961 2.902 11.461 1.053 16.641 1.332l15.54-3.995 5.54-4.66-3.1 5.104-0.89 1.332 1.55 8.987 3.67 8.544c5.9 1.561 6.84-0.662 9.65-3.329-2.85-4.336-9.2-8.654-6.38-15.421l-7.49 0.664c10.17-1.631 14.72-6.256 20.75-10.097l-12.43-0.666c-3.46-0.52 14.83-0.92 9.16-3.919-2.55-1.485-24.59 0.7-28.98-3.202l-12.13-5.306c-3.408-0.644-6.81-1.247-10.213-0.444-7.362-0.982-12.674 0.7-17.087 3.551-2.583 2.007-2.316 4.371-2.663 6.657-1.25 6.025-0.439 11.02 0 16.2-0.436 4.811-2.866 8.825-4.66 13.093z" style="fill-rule:evenodd;stroke:#000;stroke-width:.465;fill:#f60" class="head"/>
  <path id="mouth" d="m103.06 82.526c1.29 0.603 0.86 1.02 1.53 1.79 1.09-1.104 1.1-1.331 2.04-1.721 0.37 7.594 2.02 10.388 1.58 8.78 1.2 4.062 3.02 8.211 3.41 9.315-0.6-0.11-2.41-2.557-2.58-0.829 2.63-3.718-1.32 1.769-1.88 5.489-0.79 2.81-1.83 4.54-2.58 6.34-4.16 3.57-6.069 1.84-7.628-3.38-0.234-3.69-0.078-7.19 0.97-10.88-0.093-0.874 0.276-1.892-2.613-0.905 1.453-0.576 4.155-3.795 4.648-4.248 1.713-2.995 2.053-1.605 2.463-7.965 0.36-0.41 0.27-1.645 0.64-1.786z" style="stroke:#000;stroke-width:.26458px;fill-rule:evenodd" class="head entire-mouth"/>
  <path id="nose" d="m101.6 75.014-1.04 1.514 1.17 1.334c1.08 0.054 1.21-0.457 1.26-1.02l0.47-0.235 0.47 0.47v0.706l0.08 0.942 1.18 0.549 1.17-0.549 0.24-0.706 0.31-1.02 0.55-0.785 0.86 0.628 0.32 0.706 1.25-0.785 0.32-0.47v-0.863l-0.4-0.314-0.47-0.314" style="stroke:#000;stroke-width:.365;fill:none" class="head"/>
  <path id="eye-crease-right" d="m100.49 66.083c0.81 1.073 1.03 3.151-0.07 4.223" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="eye-crease-left" d="m110.81 66.411c-1.03 1.271-1.24 2.918-0.54 3.714" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="top-teeth" d="m102.87 85.59 0.88-0.567h0.83l1.13-0.962 0.55 0.16 0.41 3.153-2.05 0.374-0.16-1.229-0.13 1.389-2.01-0.213z" style="fill-rule:evenodd;stroke:#000;stroke-width:.29667px;fill:#fff" class="head entire-mouth"/>
  <path id="bottom-teeth" d="m100.46 112.4 2.52-0.67 1.51-1.28-6.712-2.11 1.085 2.29z" style="fill-rule:evenodd;stroke:#000;stroke-width:.31314px;fill:#fff" class="head entire-mouth"/>
  <path id="chin" d="m89.006 113.05c1.376 3.28-0.021 6.77 4.971 9.56 3.125 2.36 6.613 2.71 9.733 2.11 4.38-1 6.08-2.58 8.37-3.83 1.32-1.8 3.67-3.03 3.28-5.57 0.04-1.15 0.06-2.47-0.41-3.62l0.51-0.11" style="stroke:#000;stroke-width:.26458px;fill:none" class="head"/>
  <ellipse id="right-eye-bag" style="paint-order:stroke fill markers;fill:#fff" rx="5.3501" ry="2.3531" class="head" cy="67.251" cx="94.442"/>
  <ellipse id="left-eye-bag" style="paint-order:stroke fill markers;fill:#fff" rx="4.9976" ry="1.9957" class="head" cy="68.313" cx="117.48"/>
  <path id="left-eye" d="m115.54 68.185c0.55 0.901 0.29 0.474 0.53 0.947 0.39 0.462 1.43 0.522 1.96 0.112 0.24-0.284 0.43-0.567 0.52-0.85l0.17-0.617c0.34-0.131 0.49-0.078 0.83 0.022l0.65 0.06-0.04-0.033c-0.31-0.029-0.66 0.018-1.21-0.249-0.21-0.065-0.35-0.201-0.68-0.441-0.45-0.108-0.66-0.273-1.03-0.229-0.41 0.078-0.24-0.052-1.02 0.27-0.18 0.013-0.23 0.051-0.81 0.538-0.2 0.238-0.4 0.387-0.6 0.571-0.41 0.062-0.51-0.044-0.79 0.234l0.93-0.054z" style="stroke:#000;stroke-width:.26458px;fill-rule:evenodd" class="head eye"/>
  <path id="right-wrinkle1" d="m85.92 65.129c0.582 1.263 1.422 1.624 2.385 1.55" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="right-wrinkle2" d="m85.974 68.559c0.659-0.683 1.416-0.871 2.266-0.597" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="left-wrinkle1" d="m123.22 67.373c1.03-0.051 1.91-0.546 2.74-1.168" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="left-wrinkle2" d="m123.32 69.002c1.22-0.324 2.11 0.193 2.95 0.813" style="stroke:#000;stroke-width:.565;fill:none" class="head"/>
  <path id="right-eyebrow" d="m85.781 60.845 4.105-1.553 4.216 3.772 5.104-0.887 3.214 2.33-3.768-8.655-1.998 3.107-7.434-6.879 0.888 4.549z" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#a40" class="head"/>
  <path id="left-eyebrow" d="m110.3 64.84 4-2.885 5.88-0.777 0.55-6.214-5.1 3.44-6.77-0.333 3 2.33z" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#520" class="head"/>
  <path id="right-eye" d="m91.782 66.656c0.446-0.197 0.928-0.304 1.377-0.495 0.568-0.178 1.225-0.27 1.437-0.191 0.863 0.123 1.119 0.404 1.385 0.694 0.171 0.245 0.233 0.518 0.336 0.617 0.111 0.385 0.627 0.661 0.93 0.77l-0.553-0.198-0.745-0.235c-0.128 0.225-0.334 0.372-0.545 0.513-0.246 0.135-0.73 0.222-1.01 0.128-0.395-0.149-0.691-0.392-0.785-0.585-0.341-0.665-0.205-0.377-0.353-0.681-0.175-0.572-0.092-0.488 0.016-0.641l-0.56 0.112-0.673 0.256z" style="stroke:#000;stroke-width:.26458px;fill-rule:evenodd" class="head"/>
  <path id="path846" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#fff" d="m79.552 128.65 13.576 14.37 7.852-8.58c-5.828 0.02-15.371-2.84-21.428-5.79z"/>
  <path id="path848" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#fff" d="m101.66 134.47c7.31-1.45 13.51-2.82 19.71-6.16-3.56 7.34-4.16 10.25-8.52 15.23-5.41-2.95-7.63-4.49-11.19-9.07z"/>
  <path id="path850" style="fill:#f00;fill-rule:evenodd" d="m99.471 141.78-3.07 21.22 1.85 40.37 8.809 5.56 7.41-8.34-3.68-37.59-6.51-21.08z"/>
  <path id="arm" style="stroke:#000;stroke-width:.26458px;fill:#005;fill-rule:evenodd" d="m55.448 165.87c-8.619 2.26-19.835 0.57-30.214-3.03-4.391-3.24-10.977-5.92-12.971-10.58-3.12-7.3-0.23-17.38-0.241-26.09 0.333-13.38 5.456-24.19 9.695-33.664 0.517 3.629 2.958 12.184 7.778 12.654l7.69-0.47c2.641-0.65 3.721 1.15 7.093-0.17l-3.687 25.03 0.622 19.31-0.828-18.37 7.192-1.77c0.494 5.29 1.733 12.88 2.718 18.16 0.849 4.56 3.595 14.44 5.153 18.99z" class="raised-arm"/>
  <path id="path856" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#005" d="m93.614 184.17-0.542 15.04-49.131-0.46 8.822-37.88-6.407-32.35 31.314-1.08 15.402 15.41z"/>
  <path id="path852" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#005" d="m77.342 126.79v16.06l9.176 2.29-5.899 5.24 13.109 34.09-0.983-41.95c-4.972-4.59-8.315-9.87-15.403-15.73z"/>
  <path id="hand" style="stroke:#000;stroke-width:.26458px;fill:#ff7f2a;fill-rule:evenodd" d="m23.874 96.473c-2.811-1.128-1.85-9.779-1.85-9.779-2.062-6.677-0.067-10.832-0.067-17.585l-2.225-10.768 0.064-6.042c0.764-1.501 3.035-2.435 3.8-0.56l1.634 5.117 0.332 7.665 1.361-10.159 2.979-6.711c2.529-2.825 4.473-1 4.624 0.947l-2.334 6.447-0.939 9.264 4.652-17.393c1.038-2.66 4.393-0.175 4.04 1.371-0.399 6.534-2.419 8.949-3.724 17.637 0.448-1.979 0.304-3.47 3.953-6.323 0.946-1.252 3.162-1.136 4.932-1.771 5.596-1.077 5.985 1.552 3.661 3.509l-2.559 1.215c-2.903 0.818-3.615 2.454-3.047 4.804l0.907 3.796 1.932-2.482c-0.342-2.72 0.578-4.662 1.231-6.563 2.271-1.409 2.748 0.405 3.107 1.932 0.228 0.972 0.628 2.386 0.962 2.909-0.382 1.832 0.506 3.943 0.37 5.736-0.108 1.417-5.79 6.091-6.065 6.919-2.268 5.492-2.698 3.468-3.107 9.442l-0.578 10.478c-5.485 3.145-14.907 3.615-18.046-3.052z" class="raised-arm"/>
  <path id="sleeve" style="stroke:#000;stroke-width:.26458px;fill:#fff;fill-rule:evenodd" d="m21.987 92.118c5.367 8.602 15.053 7.154 21.983 2.843 0.113 3.257 0.754 5.839 0.308 9.559-3.595 1.37-9.236 1.06-13.227 0.91-5.265-0.2-11.601-4.78-12.211-7.838-0.185-2.465 2.047-5.058 3.147-5.474z" class="raised-arm"/>
  <path id="path868" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#005" d="m127.77 129.81c16.53 0.32 24.03 2.66 41.41 4.19 3.53 13.18 9.3 27 9.21 66.58l-25.93 0.33c-7.7-0.32 7 0.32-32.42-0.37-1.39-19.46-6.95-57.93-6.95-57.93z"/>
  <path id="path866" style="fill-rule:evenodd;stroke:#000;stroke-width:.26458px;fill:#005" d="m122.7 124.07 5.45 7.19 6.49 9.5-3.25 8.57-2.31 4.4 6.48 4.87-15.06 39.86-7.41-55.62c4.51-5.29 7.6-12.2 9.61-18.77z"/>
  <path id="path844" style="stroke:#000;stroke-width:.26458px;fill:none" d="m156.1 199.38v-39.75l-1.8-7.22"/>
 </g>
</svg>

/* Code available at: https://github.com/robole/artifice */
*,
*:after {
  box-sizing: border-box;
}

:root {
  --bubble-color: #ff9933;
  --top-margin: 200px;
}

svg {
  --width: 800px;

  display: block;
  position: absolute;
  width: var(--width);
  top: var(--top-margin);
  left: calc((100% - var(--width)) / 2);
}

#bubble {
  --size: 800px;

  position: absolute;
  width: var(--size);
  top: 10px;
  left: calc((100% - var(--size)) / 2);

  background: var(--bubble-color);
  border-radius: 0.4em;

  text-align: center;
  padding: 0.25rem;
  margin: 0 2px;
  font-size: calc(0.75em + 1vw);
  font-family: "Comic Sans MS", cursive;
  text-transform: uppercase;
  z-index: 50;
}

#bubble:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 2.3em solid transparent;
  border-top-color: var(--bubble-color);
  border-bottom: 0;
  border-left: 0;
  margin-left: -1em;
  margin-bottom: -2.2em;
}

@media only screen and (max-width: 599px) {
  :root {
    --top-margin: 150px;
  }
  
  #bubble {
    --size: 100%;
    left: 0;
  }

  svg {
    --width: 300px;
  }
}

@media only screen and (min-width: 600px)and (max-width: 800px) {
  svg {
    --width: 600px;
  }
  
   #bubble {
    --size: 600px;
  }
}

.head {
  animation-name: head;
  animation-duration: 0.9s;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes head {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-9deg);
  }
  20% {
    transform: translate(-5px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(0px, 5px) rotate(-9deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(5deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(7deg);
  }
  70% {
    transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(-4deg);
  }
  90% {
    transform: translate(2px, 2px) rotate(2deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.raised-arm {
  animation-name: raise;
  animation-duration: 2s;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes raise {
  100% {
    transform: translate(1px, 1px) rotate(1deg);
  }
}

const bubble = document.getElementById("bubble");

saySomething();

setInterval(function () {
  saySomething();
}, 3000);

function saySomething() {
  fetch("https://api.kanye.rest/")
    .then((response) => response.json())
    .then((data) => {
      bubble.textContent = data.quote;
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}