Creating linear rounded css elements

Question

I want to create something like this image below not the same but this kind of shape it does not matter line would be different. enter image description here

However I tried to write some codes using only css

Here is my code

.main{
  width:100%;
  height:400px;
  background:#ddd;
}

.js{
  width:110px;
  height:110px;
  background:red;
  border-radius: 50%;
  float:right;
  margin:30px;
  color:#000;
  text-align:center;
  font-size:44px;
  line-height:110px;
}

.line1{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-230deg);
  float:right;
  margin:120px -55px 0 0;
}

.line2{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(330deg);
  float:right;
  margin:188px -30px 0 0;
}

.line3{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-330deg);
  float:right;
  margin:244px -110px 0 0;
}

.round1{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:160px -25px 0 0;
}

.round2{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:210px -25px 0 0;
}

.round3{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:260px -105px 0 0;
}

However I think I used lots of codes and codes which I wrote did not like me and I want to achieve the similar result using jQuery or more complicated CSS feutures. What do you think is it possible? Could you give me some advices to make my css more accurate or to create similar result using jQuery. Thank you

Fiddle

why jQuery? what about canvas or svg? if you use css3 you don't need jquery and you can use svg and canvas.i would go for canvas. — cocco, May 27 '14 at 15:26
if i use svg or css i should also write bunch of code to add one more line with round... — Tukhsanov, May 27 '14 at 15:28
is this kind of shape used one time? such as without any further adding more lines, points, ...? If it's dynamic, I would recommend you to try writing some code to draw line and point using script. No canvas, you can still draw line and point using script with parameters passed in (like as using `drawLine` function...). It's not too hard, just requires a little time but its benefit is obvious, very intersting to use it. — King King, May 27 '14 at 15:32
Here's a fiddle (http://jsfiddle.net/YYjYL/) I wrote for a different question. (http://stackoverflow.com/questions/23216994/js-drawing-a-line-from-the-edge-of-a-circle-to-another-circle-edge/23225660) This implements dynamic drawing of circles and lines. In the code, you can clearly see that the number of circles and the size/position of each circle is entirely arbitrary. If you altered the `drawCircle` function, you could solid-fill the circles instead of just drawing their outlines. — enhzflep, May 27 '14 at 15:46

score 2 · Accepted Answer · answered May 27 '14 at 15:48

Canvas

Like i said in the comments i would go for canvas. You are already using css3 which means the support is here only for modern browsers. Said that a better way is svg or canvas.

canvas has best performance , but if you want click events you need to add a collision detection script. in that case svg is easier to handle.

here is how it could be done in canvas .. as you can see i wrote this in 20min... which means it could be written much better.

Using canvas

var c=document.createElement('canvas');c.width=500;c.height=500;
document.body.appendChild(c);
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle='red';
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.lineTo(250,130);
ctx.lineTo(200,170);
ctx.stroke();
ctx.fillStyle='red';
ctx.beginPath();
ctx.arc(200,170,32,0,2*Math.PI,false);
ctx.fill();
ctx.arc(300,150,8,0,2*Math.PI,false);
ctx.fill();
ctx.beginPath();
ctx.arc(250,130,5,0,2*Math.PI,false);
ctx.fill();
ctx.fillStyle='white';
ctx.font = 'italic 40pt Calibri';
ctx.fillText('JS',181,185);

Demo

http://jsfiddle.net/e9N5y/1/

Creating linear rounded css elements

1 Answers1