How to create SVG design by as per image blocks

See more:

CSS3

HTML5

SVG

Hello all,

I have image of a stadium for reference. I want to recreate it in SVG. How I can convert the image to SVG and paths. I am able to recreate the stadium structure in SVG. But I want to generate the structure dynamically. I am posting here refrance image link and my code. Please let me know if you need more details.

Following is reference Image


Stadium link



I am create SVG stadium like structure

<svg width="768" height="600" xmlns="http://www.w3.org/2000/svg">
    <circle fill="darkseagreen" stroke="gray" cx="500" cy="250" r="80" onclick="alert('hi you have reached on ground!');"></circle>
    <g id="addPath">
    <path d="M 571.7098007796817 151.2999266862564 A 122 122 0 0 0 500 128" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(535.8548889160156 139.64995956420898)" fill="Black" font-size="14">A</text><text transform="translate(535.8548889160156 139.64995956420898)" fill="Black" font-size="14">A</text><path d="M 616.0288949880087 212.2999266862564 A 122 122 0 0 0 571.7098007796817 151.2999266862564" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(593.8692932128906 181.79993438720703)" fill="Black" font-size="14">B</text><text transform="translate(593.8692932128906 181.79993438720703)" fill="Black" font-size="14">B</text><path d="M 616.0288949880087 287.7000733137436 A 122 122 0 0 0 616.0288949880087 212.2999266862564" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(620.0095520019531 249.99999237060547)" fill="Black" font-size="14">C</text><text transform="translate(620.0095520019531 249.99999237060547)" fill="Black" font-size="14">C</text><path d="M 571.7098007796817 348.7000733137436 A 122 122 0 0 0 616.0288949880087 287.7000733137436" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(593.8692626953125 318.2000732421875)" fill="Black" font-size="14">D</text><text transform="translate(593.8692626953125 318.2000732421875)" fill="Black" font-size="14">D</text><path d="M 500 372 A 122 122 0 0 0 571.7098007796817 348.7000733137436" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(535.8548583984375 360.35003662109375)" fill="Black" font-size="14">E</text><text transform="translate(535.8548583984375 360.35003662109375)" fill="Black" font-size="14">E</text><path d="M 428.2901992203183 348.7000733137436 A 122 122 0 0 0 500 372" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(464.1450958251953 360.3500213623047)" fill="Black" font-size="14">F</text><text transform="translate(464.1450958251953 360.3500213623047)" fill="Black" font-size="14">F</text><path d="M 383.97110501199126 287.7000733137436 A 122 122 0 0 0 428.2901992203183 348.7000733137436" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(406.13063049316406 318.2000732421875)" fill="Black" font-size="14">G</text><text transform="translate(406.13063049316406 318.2000732421875)" fill="Black" font-size="14">G</text><path d="M 383.97110501199126 212.29992668625638 A 122 122 0 0 0 383.97110501199126 287.7000733137436" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(379.9903564453125 249.99998474121094)" fill="Black" font-size="14">H</text><text transform="translate(379.9903564453125 249.99998474121094)" fill="Black" font-size="14">H</text><path d="M 428.29019922031824 151.2999266862564 A 122 122 0 0 0 383.97110501199126 212.29992668625638" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(406.1306457519531 181.79991912841797)" fill="Black" font-size="14">I</text><text transform="translate(406.1306457519531 181.79991912841797)" fill="Black" font-size="14">I</text><path d="M 500 128 A 122 122 0 0 0 428.29019922031824 151.2999266862564" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(464.14508056640625 139.6499366760254)" fill="Black" font-size="14">J</text><text transform="translate(464.14508056640625 139.6499366760254)" fill="Black" font-size="14">J</text><path d="M 595.2212108713807 118.93924691125852 A 162 162 0 0 0 500 88" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(547.610595703125 103.46963500976562)" fill="Black" font-size="14">K</text><path d="M 654.0711556398148 199.93924691125852 A 162 162 0 0 0 595.2212108713807 118.93924691125852" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(624.6461791992188 159.43923568725586)" fill="Black" font-size="14">L</text><path d="M 654.0711556398148 300.0607530887415 A 162 162 0 0 0 654.0711556398148 199.93924691125852" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(659.3570861816406 250)" fill="Black" font-size="14">M</text><path d="M 595.2212108713807 381.0607530887415 A 162 162 0 0 0 654.0711556398148 300.0607530887415" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(624.6462097167969 340.5607604980469)" fill="Black" font-size="14">N</text><path d="M 500 412 A 162 162 0 0 0 595.2212108713807 381.0607530887415" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(547.610595703125 396.53041076660156)" fill="Black" font-size="14">N</text><path d="M 404.77878912861934 381.0607530887415 A 162 162 0 0 0 500 412" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(452.38938903808594 396.53038024902344)" fill="Black" font-size="14">O</text><path d="M 345.92884436018517 300.0607530887415 A 162 162 0 0 0 404.77878912861934 381.0607530887415" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(375.3537902832031 340.5607604980469)" fill="Black" font-size="14">Q</text><path d="M 345.92884436018517 199.93924691125846 A 162 162 0 0 0 345.92884436018517 300.0607530887415" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(340.64292907714844 250.00001525878906)" fill="Black" font-size="14">R</text><path d="M 404.77878912861934 118.93924691125852 A 162 162 0 0 0 345.92884436018517 199.93924691125846" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(375.3538055419922 159.43923568725586)" fill="Black" font-size="14">S</text><path d="M 499.99999999999994 88 A 162 162 0 0 0 404.77878912861934 118.93924691125852" style="stroke: rgb(217, 217, 217); stroke-width: 40px;"></path><text transform="translate(452.3893737792969 103.46963500976562)" fill="Black" font-size="14">T</text></g>
    <rect x="480" y="210" width="40" height="80" fill="burlywood" stroke="white"></rect>
</svg>

How can create the stadium like structure dynamically which I am referring to.

Actually I wanted attache my all code here. But I couldn't find the option while posting a question.