Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interest Rates and Business Performance</title>
<style>
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}
.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  text-align: center;
}
h1 {
  color: #333;
}
.chart {
  width: 100%;
  height: 300px;
  position: relative;
  margin-top: 20px;
}
.line {
  stroke: #2196f3;
  stroke-width: 2;
  fill: none;
}
.axis {
  stroke: #333;
  stroke-width: 1;
}
.axis-label {
  font-size: 12px;
  fill: #333;
}
</style>
</head>
<body>

<div class="container">
  <h1>Interest Rates and Business Performance</h1>
  <svg class="chart" viewBox="0 0 100 50">
    <!-- X and Y axes -->
    <line x1="10" y1="40" x2="90" y2="40" class="axis"/>
    <line x1="10" y1="5" x2="10" y2="40" class="axis"/>

    <!-- Line representing business performance -->
    <polyline points="10,35 30,30 50,25 70,20 90,15" class="line"/>

    <!-- X-axis labels -->
    <text x="10" y="45" class="axis-label">Low</text>
    <text x="90" y="45" class="axis-label">High</text>
    <text x="50" y="47" class="axis-label">Interest Rates</text>

    <!-- Y-axis labels -->
    <text x="5" y="40" class="axis-label">Low</text>
    <text x="5" y="10" class="axis-label">High</text>
    <text x="2" y="25" class="axis-label" transform="rotate(-90 2,25)">Performance</text>
  </svg>
  <p>Macroeconomic factors like interest rates influence business decisions. Businesses adapt their strategies accordingly.</p>
</div>

</body>
</html>
Editor is loading...