Trying to replicate parts of this image using SVG

asasass · October 29, 2017, 3:03am

The Original:

The parts in red I want to replicate and place on top of the image. Then put a play sign in the middle, and then periodically change the colors.

asasass · October 29, 2017, 3:35am

What stroke width should I be using for the lines?

asasass · October 29, 2017, 3:43am

This is what I have so far.

asasass · October 29, 2017, 3:51am

I’m not good at moving lines vertically. Is there an easier way to do this? Is there a site I can use that will help me understand how to position lines?

<svg class="initial" width="266" height="250" style="background-color:black;" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />


<line x1="111" y1="75" x2="6" y2="75" style="stroke: red; stroke-width: 6;" />


<line x1="150" y1="55" x2="80" y2="150" style="stroke: red; stroke-width: 6;" />



</svg>

asasass · October 29, 2017, 4:01am

I keep having to start over and over. This is confusing. I’m stuck.

TechnoBear · October 29, 2017, 11:05am

http://tutorials.jenkov.com/svg/index.html

See also How would I make an X in svg? - #8 by SamA74.

coothead · October 30, 2017, 12:15am

Here you go…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
.initial {
    background-color: #000;
 }
.initial line {
    stroke: #f00; 
    stroke-width: 6;
 }
</style>

</head>
<body> 
 <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
  <image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
   <line x1="111" y1="75"  x2="6"   y2="75" />
   <line x1="86"  y1="44"  x2="192" y2="105"/>
   <line x1="137" y1="12"  x2="137" y2="136"/>
   <line x1="86"  y1="105" x2="192" y2="44" />
   <line x1="150" y1="51"  x2="204" y2="-40"/>
   <line x1="152" y1="99"  x2="188" y2="161"/>
   <line x1="191" y1="166" x2="205" y2="188"/>
</svg>

</body>
</html>

coothead

asasass · October 30, 2017, 12:17am

Thank you very much.

Can you add the circle in?

How would that be done if it’s transparent in the middle.

coothead · October 30, 2017, 12:30am

My first code should have been this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
.initial {
    background-color: #000;
 }
.initial line {
    stroke: #f00; 
    stroke-width: 6;
 }
</style>

</head>
<body> 
 <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
  <image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
   <line x1="111" y1="75"  x2="6"   y2="75" />
   <line x1="86"  y1="44"  x2="192" y2="105"/>
   <line x1="137" y1="12"  x2="137" y2="136"/>
   <line x1="86"  y1="105" x2="192" y2="44" />
   <line x1="152" y1="51"  x2="188" y2="-12"/>
   <line x1="191" y1="-17" x2="205" y2="-40"/>
   <line x1="152" y1="99"  x2="188" y2="161"/>
   <line x1="191" y1="166" x2="205" y2="188"/>
</svg>

</body>
</html>

How do you want the circle to actually look?

coothead

asasass · October 30, 2017, 12:33am

You forgot the clamp on the left side.

You did all of them but that one.

asasass · October 30, 2017, 12:34am

The circle should just be the border of the ring, where you can see through the middle.

coothead · October 30, 2017, 12:51am

You’re right, I overlooked the clamp on the left.

Still better late than never…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

.initial {
    background-color: #000;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: transparent;
 } 
</style>

</head>
<body> 
 <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
  <image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
   <line x1="6"   y1="75"  x2="33"  y2="75" />
   <line x1="40"  y1="75"  x2="111" y2="75" />
   <line x1="86"  y1="44"  x2="192" y2="105"/>
   <line x1="137" y1="12"  x2="137" y2="136"/>
   <line x1="86"  y1="105" x2="192" y2="44" />
   <line x1="152" y1="51"  x2="188" y2="-12"/>
   <line x1="191" y1="-17" x2="205" y2="-40"/>
   <line x1="152" y1="99"  x2="188" y2="161"/>
   <line x1="191" y1="166" x2="205" y2="188"/>
    <circle cx="138" cy="74" r="24.5"/>
</svg>

</body>
</html>

coothead

asasass · October 30, 2017, 1:04am

I changed

<line x1="152" y1="99" x2="188" y2="161"/>

to


 <line x1="151" y1="98"  x2="188" y2="161"/>

asasass · October 30, 2017, 2:29am

I just did this.

<div style="visibility: hidden; position: absolute">
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/DrNBAbe.png" width="266" height="250" alt="" />
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
 <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/IvGhkoU.png" width="16" height="20" alt="" />
</div>

<div id="playButton4" style="width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px ), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
 document.querySelector('#playButton4 .play').style.display='none';
 document.querySelector('#playButton4 .pause').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton4 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton4 .play').style.display='inline-block';
player.pause();
}">

 <svg class="play" width="266" height="250" viewbox="0 0 266 150">
  <circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange"   />
  <line x1="6"   y1="75"  x2="32"  y2="75" stroke="#f00" stroke-width="6" />
   <line x1="39"  y1="75"  x2="111" y2="75" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="44"  x2="192" y2="105" stroke="#f00" stroke-width="6" />
   <line x1="137" y1="12"  x2="137" y2="136" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
   <line x1="152" y1="51"  x2="188" y2="-12" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
   <line x1="151" y1="98"  x2="188" y2="161" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
    <circle cx="138" cy="74" r="24.5"  stroke="red" stroke-width="6" fill="black"   />
 <image x="133" y="64" width="16" height="20" xlink:href="https://i.imgur.com/9JZdJz0.png" />

</svg>

 <svg class="pause" style="display: none;" width="266" height="250" viewbox="0 0 266 150">
  <circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange"   />
  <line x1="6"   y1="75"  x2="32"  y2="75" stroke="#f00" stroke-width="6" />
   <line x1="39"  y1="75"  x2="111" y2="75" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="44"  x2="192" y2="105" stroke="#f00" stroke-width="6" />
   <line x1="137" y1="12"  x2="137" y2="136" stroke="#f00" stroke-width="6" />
   <line x1="86"  y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6" />
   <line x1="152" y1="51"  x2="188" y2="-12" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6" />
   <line x1="151" y1="98"  x2="188" y2="161" stroke="#f00" stroke-width="6" />
   <line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6" />
    <circle cx="138" cy="74" r="24.5"  stroke="red" stroke-width="6" fill="black"   />
  <image x="130" y="64" width="16" height="20" xlink:href="https://i.imgur.com/IvGhkoU.png" />
</svg>


</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

John_Betong · October 30, 2017, 4:07am

Very good.

For future reference the way I design lines and boxes is similar to a cork board with pins joined by a coloured string.

Following is tedious but worth the effort for precision.

Lines:

cork board pin co-ordinates start top-left to bottom right
lines have two pins x1, y1 and x2, y2 co-ordinates
use two colour, strokes, one for testing and one for finished
create single statements with the testing colour
when complete change the testing colour to finished colour

Boxes, triangles, shapes, etc are similar to above.

Center is the pin for a circle with a radius, stroke, fill, etc.

asasass · November 4, 2017, 6:28am

Using your code, how would I set the linear-gradient like this?

Placing linear-gradient over image, and before the SVG

I was thinking something like this, but I can’t get it to work.

  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

 <div id="grad"></div>

coothead · November 4, 2017, 2:14pm

Hi there asasass,

check out the attachment.

asasass-two-players.zip (209.9 KB)

coothead

asasass · November 4, 2017, 2:20pm

How would the code be set up for the 2 lines going down?

In code format please.

No images.

asasass · November 4, 2017, 2:21pm

<style>
  #playButton5 {
    position: relative;
    width: 266px;
    height: 250px;
    cursor: pointer;
    background-color: #000000;
    background-image: linear-gradient( to right, transparent 0, transparent 86px, #0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px);
    box-Shadow: inset 0 0 0 3px #0059dd;
    background-repeat: no-repeat;
  }

.initial {
    background-color: transparent;
 }

.initial line {
    stroke-width: 6;
    stroke: #f00; 
 }

.initial circle {
    stroke-width: 6;
    stroke: #f00; 
    fill: black;
 } 
  
  .button2 div {
    width: 44px;
    height: 44px;
    top: 102px;
    left: 116px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">

  <svg class="initial" width="266" height="250" viewbox="0 0 266 150">
<image x="0" y="-50" width="266" height="250" xlink:href="https://i.imgur.com/sVt3ks7.png" />
    <line x1="6" y1="75" x2="32" y2="75" ></line>
    <line x1="39" y1="75" x2="111" y2="75" ></line>
    <line x1="86" y1="44" x2="192" y2="105" ></line>
    <line x1="137" y1="12" x2="137" y2="136" ></line>
    <line x1="86" y1="105" x2="192" y2="44" ></line>
    <line x1="152" y1="51" x2="188" y2="-12" ></line>
    <line x1="191" y1="-17" x2="205" y2="-40" ></line>
    <line x1="151" y1="98" x2="188" y2="161" ></line>
    <line x1="191" y1="166" x2="205" y2="188" ></line>
    <circle cx="138" cy="74" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
    </div>
  </div>
</div>

<audio id="player5" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

coothead · November 4, 2017, 2:42pm

Hi there asasass,

my post #18 fully resolved the problem that
was posed in your post #17, did it not ?

coothead