Craft a circular design with an Arc and a Pie using the DIV DOM element

Question

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it:

var body = document.querySelector('body');
var div = document.createElement('div');
div.style.borderRadius = '50%';
div.style.border = '1px solid red'; 
div.style.left = '60px'; 
div.style.top =  '60px';
div.style.width = '100px';
div.style.height = '100px'; 
body.appendChild(div);

It's visualized in this image:

https://i.sstatic.net/gfOb1.png

Next, I aim to create both an arc and a pie shape.

https://i.sstatic.net/rIc6X.png

In the second illustration above, users can input the starting angle and the end angle of the arc. For our example, the starting angle is set at 180 degrees with an ending angle at 360 degrees.

Additonally, I plan on developing a pie chart where users provide the inside radius of the circle/ellipse along with the starting and ending angles.

https://i.sstatic.net/IBRWH.png

For the third image shown above, the inside radius is calculated as 50% of the circle/ellipse width, while the starting angle and ending angle are 90 degrees and 360 degrees respectively.

Is this a feasible task?

P.S: I prefer not to utilize canvas or svg for this project.

javascript html css

Answer 1

Answer №1

Canvas is often suggested as a great solution for drawing these types of designs. However, if you prefer not to use canvas, you can achieve similar effects using border styles to create arcs. The angle of the arc should be in multiples of 90deg, such as 0 90 180 270 360. You can choose any starting angle like 0, 5, 10, or 7.

Here's an example:

To replicate the effect of the second arc you provided, set the start angle as 0 and the end angle as 180. Refer to the standard angle system shown in the following picture:

https://i.sstatic.net/MgkYe.gif

Execute this code:

var border = ['border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'];
var circle;
var standeredRotation = 135;

function getinput() {
  circle = document.getElementById("circle");
  var startAngle = document.getElementById("startangle").value;
  var endAngle = document.getElementById("endtangle").value;
  var angle = endAngle - startAngle;
  if (angle % 90 != 0) {
    alert("Please enter angles that are multiples of 90 degrees.");
  } else {
    var parts = angle / 90;
    draw(parts, startAngle);
  }

}

function draw(parts, startAngle) {
  var style = "";
  for (var i = 0; i < parts; i++) {
    style += border[i] + ": #FF4E4E;";
  }
  circle.setAttribute("style", style);
  totalAngle = standeredRotation + parseInt(startAngle);
  circle.style.transform = 'rotate(' + totalAngle + 'deg)';
}

#circle {
  border-radius: 50%;
  border: 10px solid transparent;
  height: 100px;
  width: 100px;
  margin: 10px auto;
}

<body>
  <div class="user-input">
    <label>Start Angle:</label>
    <input type="text" id="startangle" value="0" />
    <label>End Angle:</label>
    <input type="text" id="endtangle" value="180" />
    <button onclick="getinput()">Draw</button>
  </div>
  <div id="circle">

  </div>
</body>

For the last circle with two overlapping circles, the angles are 0 and 270. To close the circles, you can position two divs and rotate them accordingly.

Answer 2

Canvas is often suggested as a great solution for drawing these types of designs. However, if you prefer not to use canvas, you can achieve similar effects using border styles to create arcs. The angle of the arc should be in multiples of 90deg, such as 0 90 180 270 360. You can choose any starting angle like 0, 5, 10, or 7.

Here's an example:

To replicate the effect of the second arc you provided, set the start angle as 0 and the end angle as 180. Refer to the standard angle system shown in the following picture:

https://i.sstatic.net/MgkYe.gif

Execute this code:

var border = ['border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'];
var circle;
var standeredRotation = 135;

function getinput() {
  circle = document.getElementById("circle");
  var startAngle = document.getElementById("startangle").value;
  var endAngle = document.getElementById("endtangle").value;
  var angle = endAngle - startAngle;
  if (angle % 90 != 0) {
    alert("Please enter angles that are multiples of 90 degrees.");
  } else {
    var parts = angle / 90;
    draw(parts, startAngle);
  }

}

function draw(parts, startAngle) {
  var style = "";
  for (var i = 0; i < parts; i++) {
    style += border[i] + ": #FF4E4E;";
  }
  circle.setAttribute("style", style);
  totalAngle = standeredRotation + parseInt(startAngle);
  circle.style.transform = 'rotate(' + totalAngle + 'deg)';
}

#circle {
  border-radius: 50%;
  border: 10px solid transparent;
  height: 100px;
  width: 100px;
  margin: 10px auto;
}

<body>
  <div class="user-input">
    <label>Start Angle:</label>
    <input type="text" id="startangle" value="0" />
    <label>End Angle:</label>
    <input type="text" id="endtangle" value="180" />
    <button onclick="getinput()">Draw</button>
  </div>
  <div id="circle">

  </div>
</body>

For the last circle with two overlapping circles, the angles are 0 and 270. To close the circles, you can position two divs and rotate them accordingly.

Craft a circular design with an Arc and a Pie using the DIV DOM element

Answer №1

Similar questions

Guide on adjusting shipping costs in Stripe based on the customer's address using NodeJS

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Having trouble with my intricate-box and grid layout - the images are all overlapping!

How to Modify the Data in a Dynamic Object within the Vuex Store in a Nuxt Application

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Searching for a jQuery plugin that can dynamically rearrange tables while automatically updating their corresponding IDs

Node.js: Extracting parameters from the URL

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

Error in NodeJS: 'Cannot alter headers once they have been sent.'

Decreasing the vertical size of the page

Angular and Firefox are flagging the response from my OAuth call as incorrect, however, Fiddler is showing a different result

Is it possible to incorporate a variable into my fetch request?

Using HTML symbols can alter the height of the text

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

Using AngularJS and Web API to generate a dropdown menu from a one-to-many relationship

The value is undefined until a new Resource object is pushed with the item

The process of uploading a React App to Heroku resulted in a critical error: "FATAL ERROR: Heap limit reached, Allocation failed - JavaScript heap out of memory."

Exploring the power of AngularJS with ng-click functionality and utilizing services

How can I add 0-5 images to a column without causing any distortion in the row?

The image is non-adjustable to different screen sizes