Make Multiplexer Using SVG drawing in html with code.
Make Multiplexer Using SVG drawing in html with code.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg height="180px" width="150px" style="border:1px solid;">
<rect x="50px" y="25px" height="100px" width="50px"></rect>
<line x1="50px" y1="35px" x2="25px" y2="35px" stroke="black"></line>
<line x1="50px" y1="45px" x2="25px" y2="45px" stroke="black"></line>
<line x1="50px" y1="55px" x2="25px" y2="55px" stroke="black"></line>
<line x1="50px" y1="65px" x2="25px" y2="65px" stroke="black"></line>
<line x1="50px" y1="75px" x2="25px" y2="75px" stroke="black"></line>
<line x1="50px" y1="115px" x2="25px" y2="115px" stroke="black"></line>
<line x1="100px" y1="75px" x2="125px" y2="75px" stroke="black"></line>
<line x1="60px" y1="125px" x2="60px" y2="150px" stroke="black"></line>
<line x1="66px" y1="125px" x2="66px" y2="150px" stroke="black"></line>
<line x1="72px" y1="125px" x2="72px" y2="150px" stroke="black"></line>
<line x1="90px" y1="125px" x2="90px" y2="150px" stroke="black"></line>
<text x="65px" y="60px" stroke="white">n:1</text>
<text x="55px" y="80px" stroke="white">MUX</text>
<text x="17px" y="37px" style="font-size:10px">1</text>
<text x="17px" y="47px" style="font-size:10px">2</text>
<text x="17px" y="57px" style="font-size:10px">3</text>
<text x="17px" y="67px" style="font-size:10px">4</text>
<text x="17px" y="77px" style="font-size:10px">5</text>
<text x="17px" y="117px" style="font-size:10px">n</text>
<text x="130px" y="80px" style="font-size:15px">Y</text>
<text x="126px" y="87px" style="font-size:7px">Output</text>
<text x="57.5px" y="160px" style="font-size:10px">1</text>
<text x="63.5px" y="160px" style="font-size:10px">2</text>
<text x="70px" y="160px" style="font-size:10px">3</text>
<text x="86.5px" y="160px" style="font-size:10px">m</text>
<line x1="30px" y1="80px" x2="30px" y2="110px" stroke="red"></line>
<line x1="75px" y1="144px" x2="87px" y2="144px" stroke="red"></line>
<line x1="55px" y1="165px" x2="97px" y2="165px" stroke="blue"></line>
<line x1="55px" y1="165.5px" x2="55px" y2="155px" stroke="blue"></line>
<line x1="97px" y1="165.5px" x2="97px" y2="155px" stroke="blue"></line>
<line x1="76px" y1="165.5px" x2="76px" y2="167.5px" stroke="blue"></line>
<line x1="15px" y1="27px" x2="15px" y2="120px" stroke="blue"></line>
<line x1="14.5px" y1="27px" x2="20px" y2="27px" stroke="blue"></line>
<line x1="20px" y1="120px" x2="14.5px" y2="120px" stroke="blue"></line>
<line x1="15px" y1="70px" x2="7px" y2="70px" stroke="blue"></line>
<line x1="7px" y1="12px" x2="7px" y2="70.5px" stroke="blue"></line>
<text x="42px" y="177px" style="font-size:10px">m - Selection pins (Sm)</text>
<text x="0px" y="10px" style="font-size:10px;">n - input pins (In)</text>
</svg>
</body>
</html>
Output:
This code was written by Dev Shah
Comments
Post a Comment