Excercises

Budget Smiley

<svg class="smiley" width="240" height="240">
  <circle
    r="120"
    cx="120"
    cy="120"
    fill="hsl(45deg 100% 50%)"
  />
  <ellipse class="eye"
    cx="80"
    cy="100"
    rx="15"
    ry="20"
    fill="hsl(35deg 80% 20%)"
  />
  <ellipse class="eye"
    cx="160"
    cy="100"
    rx="15"
    ry="20"
    fill="hsl(35deg 80% 20%)"
  />
  <circle
    cx="120"
    cy="120"
    r="60"
    fill="none"
    stroke="hsl(35deg 80% 20%)"
    stroke-width="10"
    stroke-dasharray="100,450"
    stroke-dashoffset="-45"
    stroke-linecap="round"
  />
</svg>

Animated budget smiley

Aufgabenstellung:

• Augenzwinkern alle zwei Sekunden
• dafür muss der vertikale Radius signifikant reduziert werden
• prefers-reduced-motion beachten!

Spark Lines

<svg width="200" height="100">
  <polyline
    points=""
    fill="none"
    stroke="hotpink"
    stroke-width="3"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Hamburger / X

Ein gebräuchliches Pattern ist ein Hamburgermenü, das auf Klick zu einem X wird und somit zu einem Close-Button. Aufgabenstellung:

• Auf Klick wird der Hamburger zu einem X. Ein neuer Klick macht wieder einen Hamburger draus.
• Für Bewegungs-Sensitive soll die Transition sofort erfolgen.
• Für die Lösung sollte die Motion Library verwendet werden.