How to create circle/square shapes using React with text inside them without using SVG images?

user_11370383 0
Viewed 12039

What is the way to create circle and square shapes using React which can contain custom text inside them without using SVG images? An example: enter image description here

I have tried the following code but it doesn't render any shapes:

import React from 'react';

export default function Circle(){
  return(
    <div height="110" width="500">
      <circle
        cx="50"
        cy="55"
        r="45"
        fill="none"
        stroke="#F0CE01"
        strokeWidth="4"
      />
    </div>
  );
 }
reactjs css html javascript
1 Answers

You can use even a div tag to do that. Just add border-radius to create a circle.

React example: https://codesandbox.io/s/shapes-qbf1f

Here is a snippet for a quick overview:

.square {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: red;
}

.circle {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}

.text {
  margin: auto;
}
<div class="square">
  <p class="text">Square text</p>
</div>
<div class="circle">
  <p class="text">Circle text</p>
</div>

user_107050340
Related