Skip to main content
Formatação do botão
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código"azul ► Executar que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão azul ► Executar que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

4 traços um pouco maiores
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Consegui. Eis o fiddle: https://jsfiddle.net/f90dLznn/https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle: https://jsfiddle.net/f90dLznn/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle: https://jsfiddle.net/m5ojvsbe/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", i % 3 == 0 ? "2" : "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Espaço
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189

Consegui. Eis o fiddle:  https://jsfiddle.net/f90dLznn/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle:https://jsfiddle.net/f90dLznn/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Consegui. Eis o fiddle:  https://jsfiddle.net/f90dLznn/

E aqui vai o código-fonte. Pode ser executado aqui mesmo com o botão "► Executar trecho de código" que está lá em baixo:

// Raio do círculo.
var r = 50;

// Raio das linhas internas e externas
var r1 = 40;
var r2 = 60;

// Calcula os senos e co-senos.
var a = Math.sqrt(3) / 2;
var b = 0.5;
var sins = [0, b, a, 1,  a,  b,  0, -b, -a, -1, -a, -b];
var coss = [1, a, b, 0, -b, -a, -1, -a, -b,  0,  b,  a];

// Posição.
var x = 100;
var y = 100;

// Desenha o círculo.
var circle = document.getElementById("circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", r);

var svg = document.getElementById('svg');

// Desenha as doze linhas.
for (var i = 0; i < 12; i++) {
    var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    newLine.setAttributeNS(null, 'id', 'line' + i);
    newLine.setAttributeNS(null, 'x1', x + coss[i] * r1);
    newLine.setAttributeNS(null, 'y1', y + sins[i] * r1);
    newLine.setAttributeNS(null, 'x2', x + coss[i] * r2);
    newLine.setAttributeNS(null, 'y2', y + sins[i] * r2);
    newLine.setAttributeNS(null, "stroke", "black");
    newLine.setAttributeNS(null, "stroke-width", "1");
    svg.appendChild(newLine);
}
<svg width=200 height=200 id=svg>
<circle id="circle" title="horloge" cx="100" cy="100" r="50" stroke-width="2px" fill="Aqua" stroke="black" />
</svg>

Link errado
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189
Carregando
Fonte Link
Victor Stafusa
  • 64,9mil
  • 9
  • 120
  • 189
Carregando