Help please

bethloudin · Jul 7, 2023

I have been working on this for a few months now. I'm not real sure what I need to do to make it work right. I'm new to coding and learning as I go. Here is my page asmsroofvisualizer.atwebpages.com/index.html. I have an svg file of a roof that I'm layering over the roof on the house. I need it to change to the colors when they are clicked. I don't have it lined up exactly and don't really know how to. Any help is much appreciated.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Metal Roof Visualizer</title>
    <style type="text/css">
      
      .house2.png
    {
      position: relative;
      top: 1;
      left: 0;
    }
    .roof
    {
      position: absolute;
      top: 1px;
      left: 0px;
    }
.hiddenRadioButton{ display:none; }
</head>
  </style>
  </head>
  <body>
    <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">
    &nbsp;
    <div id="label-container"> <label for="r1">hide</label> <label for="r2" title="Earth Brown"></label>
      <label for="r3" title="Black"></label><label for="r4" title="Charcoal Gray"></label>
      <label for="r5" title="Pewter Gray"></label><label for="r6" title="Burnished Slate"></label>
      <label for="r7" title="Light Stone"></label> <label for="r8" title="Tan"></label>
      <label for="r9" title="Ivy Green"></label> <label for="r10" title="Dark Red"></label>
      <label for="r11" title="Clay"></label> <label for="r12" title="Evergreen"></label>
      <label for="r13" title="Slate Blue"></label>&nbsp; <label for="r14" title="Gallery Blue"></label>
      <label for="r15" title="Barn Red"></label> <label for="r16" title="Brite Red"></label>
      <label for="r17" title="Burgundy"></label> <label for="r18" title="Brite White"></label>
      <label for="r19" title="White"></label> <label for="r20" title="Galvalume"></label>
      <label for="r21" title="Copper Penny"></label> <label for="r22" title="UT Orange"></label>
      &nbsp;&nbsp;&nbsp;</div>
    <div><br>
      <input name="color" id="r1" type="radio"> <input name="color" id="r2" type="radio">
      <input name="color" id="r3" type="radio"> <input name="color" id="r4" type="radio">
      <input name="color" id="r5" type="radio"> <input name="color" id="r6" type="radio">
      <input name="color" id="r7" type="radio"> <input name="color" id="r8" type="radio">
      <input name="color" id="r9" type="radio"> <input name="color" id="r10" type="radio">
      <input name="color" id="r11" type="radio"> <input name="color" id="r12" type="radio">
      <input name="color" id="r13" type="radio"> <input name="color" id="r14" type="radio">
      <input name="color" id="r15" type="radio"> <input name="color" id="r16" type="radio">
      <input name="color" id="r17" type="radio"> <input name="color" id="r18" type="radio">
      <input name="color" id="r19" type="radio"> <input name="color" id="r20" type="radio">
      <input name="color" id="r21" type="radio"> <input name="color" id="r22" type="radio">
      <h3 style=" text-align: center;"> <b>All Styles Metal Sales Roof
          Visualizer </b> </h3>
      <p style="text-align: center;"> Pick a color from the above buttons to see
        how each color would appear. Colors will vary because of different
        computer monitors and settings. Please request a color chart for a true
        color match.</p>
      <svg version="1.1" viewBox="0 0 791 165" xmlns="http://www.w3.org/2000/svg"

        xmlns:svg="http://www.w3.org/2000/svg" style="top: 290px; left: 56px; height: 278px; width: 788px;"

        class="roof"><path style="fill:currentColor" d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path>
      </svg><img src="file:///C:/Users/rllou/OneDrive/Desktop/helpnewtut/house2.png"

        <="" div=""><svg version="1.1" viewBox="0 0 791 165" xmlns="http://www.w3.org/2000/svg"

        xmlns:svg="http://www.w3.org/2000/svg" style="top: 290px; left: 56px; height: 278px; width: 788px;"

        class="roof"><path style="fill:currentColor" d="m 746.53212,115.0134 -42.87988,-48.974617 -5.57612,5.219508 C 695.00925,74.12902 687.325,81.684041 681,88.047225 674.675,94.41041 656.05419,112.64041 639.62043,128.55833 L 609.74086,157.5 592.62043,157.5249 C 570.4834,157.55709 569,157.36613 569,154.48417 c 0,-1.30094 1.05717,-2.94683 2.5,-3.89221 1.76167,-1.15429 2.5,-2.53833 2.5,-4.68636 v -3.04829 l 8.75,0.32134 8.75,0.32135 V 141 138.5 L 575,137.81055 c -9.075,-0.37919 -33.69552,-1.37246 -54.71227,-2.20726 l -38.21227,-1.51783 -7.28227,-7.79273 c -4.00525,-4.286 -10.45215,-11.09209 -14.32643,-15.12464 l -7.04416,-7.3319 -13.77313,13.23805 -13.77312,13.23805 -24.68818,-1.15793 c -26.71778,-1.25311 -74.44673,-3.70497 -90.94675,-4.67198 -8.73811,-0.51211 -10.34728,-0.37009 -10.85699,0.9582 -0.32912,0.85768 -0.97161,1.55942 -1.42774,1.55942 -0.45613,0 -6.90355,-5.66108 -14.32759,-12.58017 L 270.13083,101.83965 238.31542,53.95437 C 220.81694,27.617465 206.26389,6.0535434 205.97531,6.0345442 204.85925,5.9610667 180.21606,52.399469 180.70078,53.662641 181.04624,54.562876 183.07874,55 186.91913,55 h 5.70515 l 7.66132,12.75 c 4.21373,7.0125 16.62912,27.375 27.58977,45.25 10.96065,17.875 19.80239,32.63271 19.64831,32.79491 -0.26175,0.27553 -82.30742,-1.97608 -134.02368,-3.67807 -13.946277,-0.45897 -23.487392,-0.3898 -24.238167,0.17574 -0.851366,0.6413 -1.450581,0.35079 -1.918114,-0.92996 C 86.969748,140.33818 78.810385,122.625 69.211801,102 59.613218,81.375 50.140544,61.0125 48.161415,56.75 46.182286,52.4875 44.323824,49.000315 44.031499,49.0007 43.448492,49.001468 41.487223,53.726164 17.690138,112.45703 8.5816067,134.93676 1.3642782,151.47961 1.1897095,150.2777 0.91043129,148.35486 42.258049,44.290922 43.840303,42.934431 44.203136,42.623368 58.45,43.384162 75.5,44.625084 c 17.05,1.240921 44.95,3.18333 62,4.316463 17.05,1.133133 33.34184,2.314638 36.20408,2.625567 l 5.20408,0.565324 3.65816,-7.316219 c 3.20865,-6.417212 22.38704,-42.8230254 22.97648,-43.6156169 0.12247,-0.1646689 21.53793,1.5061505 47.58993,3.7129319 177.52676,15.037724 213.70365,18.145672 216.38146,18.589282 2.3839,0.394918 7.91382,5.748767 26.44508,25.603024 12.88698,13.80703 24.36025,25.712636 25.49614,26.456904 1.56809,1.027449 7.84039,1.400511 26.05493,1.549685 13.19431,0.10806 24.88966,-0.07666 25.98966,-0.410484 1.1,-0.333826 16.625,-2.197768 34.5,-4.142094 17.875,-1.944325 37.675,-4.23366 44,-5.087411 C 668.64923,65.225121 697.96213,62 701.73863,62 c 2.99734,0 4.87908,1.907317 25.00134,25.341245 11.96801,13.937685 31.37458,36.475635 43.12569,50.084335 12.8293,14.85733 21.00222,25.10654 20.456,25.65276 -0.54622,0.54622 -18.04174,-18.65747 -43.78954,-48.06494 z M 592.12756,116.25 c 1.24387,-1.58606 1.2085,-1.62143 -0.37756,-0.37756 -1.66575,1.30637 -2.19548,2.12756 -1.37244,2.12756 0.20765,0 0.99515,-0.7875 1.75,-1.75 z M 615,81.344835 c 7.51097,-7.868062 -5.12392,4.016549 -23.5,22.104555 -9.81355,9.6597 -9.48998,9.41875 3,-2.23399 7.7,-7.183842 16.925,-16.125597 20.5,-19.870565 z M 601.5,107 c 0.99549,-1.1 1.58498,-2 1.30998,-2 -0.275,0 -1.31449,0.9 -2.30998,2 -0.99549,1.1 -1.58498,2 -1.30998,2 0.275,0 1.31449,-0.9 2.30998,-2 z m -13,-6 c 3.26557,-3.3 5.71239,-6 5.43739,-6 -0.275,0 -3.17182,2.7 -6.43739,6 -3.26557,3.3 -5.71239,6 -5.43739,6 0.275,0 3.17182,-2.7 6.43739,-6 z m 57.5,4 c 0,-0.55 -0.19844,-1 -0.44098,-1 -0.24254,0 -0.7191,0.45 -1.05902,1 -0.33992,0.55 -0.14148,1 0.44098,1 C 645.52344,106 646,105.55 646,105 Z M 605.46564,83.917443 c 1.0811,-1.329594 -0.8314,0.26847 -4.25,3.551254 C 597.79704,90.75148 595,93.777137 595,94.192381 c 0,0.808101 7.20813,-6.268685 10.46564,-10.274938 z m 1.02544,-6.759695 c -0.30784,-0.30784 -2.45677,1.400374 -4.77539,3.796031 l -4.21569,4.355739 4.7754,-3.79603 c 2.62646,-2.087817 4.52352,-4.0479 4.21568,-4.35574 z M 612.5,78 c 0.99549,-1.1 1.39848,-2 0.89553,-2 -0.50294,0 -1.4765,0.9 -2.16346,2 -0.68696,1.1 -1.08995,2 -0.89553,2 0.19442,0 1.16797,-0.9 2.16346,-2 z m -76.48469,77.25 c 0.0284,-5.09515 0.686,-5.33918 13.56423,-5.03321 L 561.5,150.5 l 0.33008,2.89149 c 0.18747,1.64233 -0.24454,3.25577 -1,3.73469 -0.73155,0.46376 -6.61758,0.85009 -13.08008,0.85851 L 536,158 l 0.0153,-2.75 z"></path>&nbsp;
        </svg><path style="fill:currentColor" d="M 747.68906,116.21826 C 724.69304,89.929671 705.51277,67.829677 705.06623,67.107166 703.78849,65.039737 701.48913,66.792781 690,78.593749 684.225,84.525492 663.91302,104.59352 644.86227,123.18937 L 610.22455,157 H 589.61227 C 569.3206,157 569,156.96724 569,154.89392 c 0,-1.15834 1.125,-2.991 2.5,-4.07258 1.43999,-1.13269 2.5,-2.99574 2.5,-4.39392 C 574,144.03734 574.13843,144 583,144 h 9 v -2.8042 -2.80419 l -29.75,-1.22122 c -16.3625,-0.67167 -41,-1.66023 -54.75,-2.19679 l -25,-0.97557 -7,-7.2657 C 471.65,122.7362 465.19099,115.98664 461.14666,111.73331 457.10232,107.47999 453.55435,104 453.26228,104 c -0.29206,0 -6.48509,5.85 -13.76228,13 l -13.23126,13 h -7.77413 c -5.27715,0 -8.13072,-0.43024 -8.88437,-1.33951 -0.61063,-0.73674 -6.06024,-5.16832 -12.11024,-9.84797 -8.7299,-6.75255 -11.87708,-8.62338 -15.25,-9.06533 -2.3375,-0.30628 -4.25,-0.39681 -4.25,-0.20118 0,0.19564 4.6125,4.04704 10.25,8.55867 14.57521,11.66438 13.97192,10.91952 8.71429,10.75914 -2.45536,-0.0749 -3.42487,-0.33473 -2.15446,-0.57739 2.01232,-0.38438 1.23953,-1.27671 -6,-6.92807 -4.57041,-3.56777 -9.88483,-7.8023 -11.80983,-9.41008 -2.48988,-2.07956 -4.58228,-2.92684 -7.25,-2.93575 -2.0625,-0.007 -3.75,0.12924 -3.75,0.30251 0,0.17327 4.95,4.3065 11,9.18496 6.05,4.87846 11,9.01169 11,9.18496 0,1.748 -4.7725,-1.31317 -15.09927,-9.68496 -11.0129,-8.92803 -12.76213,-10 -16.31796,-10 -2.44142,0 -3.61511,0.3553 -3.03277,0.91807 0.5225,0.50494 5.45,4.59683 10.95,9.09308 5.5,4.49626 10.15,8.58312 10.33333,9.08193 0.39863,1.08457 -2.51986,1.23723 -3,0.15692 -0.18333,-0.4125 -5.48208,-4.98879 -11.77499,-10.16953 -9.78022,-8.05172 -12.06727,-9.48196 -15.75,-9.84948 -2.36959,-0.23647 -4.30834,-0.23273 -4.30834,0.008 0,0.24105 5.0359,4.64468 11.1909,9.78585 6.15499,5.14116 10.62895,9.53488 9.94213,9.76382 -0.68681,0.22894 -2.01022,-0.23729 -2.94089,-1.03607 C 338.51865,108.86761 335.90599,107 331.95803,107 329.78111,107 328,107.19264 328,107.42809 c 0,0.23546 4.725,4.34949 10.5,9.14229 5.775,4.79281 10.5,8.87516 10.5,9.07191 0,1.78063 -4.50176,-1.17188 -14.45932,-9.48324 -10.17141,-8.48987 -12.32216,-9.8618 -15.66539,-9.99281 -2.13141,-0.0835 -3.87529,0.0383 -3.87529,0.27059 0,0.23233 4.79214,4.59421 10.64921,9.69306 5.85706,5.09885 10.13488,9.44208 9.50627,9.65162 -0.62861,0.20953 -6.65825,-4.36854 -13.3992,-10.17351 C 310.11927,105.5868 309.27263,105.0533 305,105.049 c -4.42056,-0.004 -4.46231,0.026 -2.36503,1.72324 5.06288,4.09723 20.36503,17.51237 20.36503,17.85368 0,0.20574 -2.3625,0.30206 -5.25,0.21404 -3.58102,-0.10916 -4.21967,-0.28804 -2.00898,-0.56269 3.24072,-0.40261 3.23996,-0.40358 -8,-10.28862 C 297.10018,104.63051 296.25974,104.1014 292,104.07883 l -4.5,-0.0238 6.5,5.7225 c 3.575,3.14738 8.49478,7.57629 10.93285,9.84202 l 4.43286,4.1195 -4.79761,0.0963 c -3.07534,0.0617 -5.20514,0.65005 -5.93285,1.63883 -0.96068,1.30533 -3.22656,-0.3831 -14.73525,-10.98001 L 270.30001,101.97159 238.4,54.012653 C 220.855,27.635241 206.24681,6.0416339 205.93737,6.0268606 c -1.1367,-0.054267 -25.71958,46.3771124 -25.22985,47.6533414 0.33591,0.875362 2.40672,1.323478 6.14947,1.330725 l 5.64301,0.01093 21.70304,35.739073 c 11.93667,19.65649 24.45176,40.18876 27.81132,45.62726 l 6.10828,9.8882 -13.31132,-0.66051 c -7.32123,-0.36328 -16.57382,-0.70741 -20.56132,-0.76473 -6.63872,-0.0954 -8.69637,-0.83921 -6.34388,-2.29313 1.21298,-0.74966 0.11583,-4.85466 -1.56559,-5.85771 C 205.60324,136.26048 205,135.30044 205,134.56689 c 0,-0.73356 -1.125,-1.54879 -2.5,-1.81164 -2.90033,-0.55443 -3.03966,-0.0241 -1.01757,3.87352 1.32656,2.55696 1.31637,2.91564 -0.0969,3.4114 -1.43514,0.50342 -1.43353,0.67506 0.0176,1.87937 2.48983,2.06638 1.92108,3.37863 -1.13221,2.6123 -3.20686,-0.80487 -8.5386,-6.39169 -7.83922,-8.21425 0.26654,-0.69457 -0.31159,-1.83767 -1.28471,-2.54022 -0.97313,-0.70256 -2.16566,-1.95237 -2.65007,-2.77737 -0.7829,-1.33333 -0.67457,-1.33333 0.97492,0 1.74885,1.41365 1.78402,1.36554 0.61094,-0.83565 -0.68461,-1.2846 -1.50542,-2.07496 -1.82403,-1.75636 -0.3186,0.31861 -1.21293,-0.32538 -1.9874,-1.43108 -0.77446,-1.1057 -1.76407,-1.79038 -2.19912,-1.5215 -0.43505,0.26888 -0.6691,-0.62166 -0.52011,-1.97897 0.149,-1.35731 -0.15756,-2.73264 -0.68125,-3.05629 -0.52368,-0.32366 -0.70079,-1.38042 -0.39357,-2.34837 0.5331,-1.67967 -10.55485,-22.810936 -25.68853,-48.95682 C 147.4233,52.934719 147.47943,53 142.93191,53 140.76936,53 139,53.235581 139,53.523513 c 0,0.471976 14.12198,26.216288 27.54124,50.207557 2.83981,5.07708 5.49228,8.90208 5.89436,8.5 0.40209,-0.40209 0.64028,-0.28107 0.52931,0.26893 -0.42645,2.11371 0.0769,3.59223 1.02364,3.00708 0.58718,-0.3629 0.72119,0.0858 0.33006,1.10503 -0.44376,1.15641 -0.28072,1.4825 0.5,1 0.78071,-0.48251 0.94376,-0.15642 0.5,1 -0.48212,1.25638 -0.30375,1.49674 0.66596,0.89743 0.85527,-0.52859 1.08485,-0.43088 0.64808,0.27583 -0.37201,0.60192 0.23178,2.58395 1.34175,4.40451 1.10997,1.82057 2.0267,2.63512 2.03717,1.81012 0.0169,-1.33333 0.12676,-1.33333 0.98843,0 1.35047,2.08971 1.23503,3.23709 -0.25,2.48486 -0.6875,-0.34825 -0.46949,0.007 0.48446,0.78986 0.95395,0.78267 1.51645,1.64104 1.25,1.90749 -0.26645,0.26645 0.22866,0.48446 1.10026,0.48446 1.1352,0 1.45408,-0.68337 1.12417,-2.40916 -0.2892,-1.51285 -0.10891,-2.05753 0.48459,-1.46403 0.51982,0.51982 1.03909,1.56644 1.15394,2.32582 0.11485,0.75939 0.62005,2.0557 1.12266,2.8807 0.76246,1.25152 0.6573,1.29235 -0.63478,0.24652 -1.33243,-1.0785 -1.53372,-0.85229 -1.44196,1.62044 0.0756,2.03693 0.51752,2.71691 1.5174,2.33481 1.03649,-0.39609 1.26019,0.0366 0.84326,1.63094 -0.31212,1.19353 -0.2066,1.94701 0.23447,1.67441 0.44108,-0.2726 1.06653,0.19382 1.38989,1.03648 0.66271,1.72699 -2.04892,3.22883 -3.32071,1.83918 C 185.05915,142.29175 170.45526,116.16149 167.40041,110 166.17331,107.525 158.6458,93.809708 150.6726,79.521574 137.40436,55.744606 135.90531,53.473035 132.98296,52.715779 125.17601,50.692796 125.22683,50.898968 138.59902,75.5 c 6.87606,12.65 14.55611,26.825 17.06677,31.5 11.7391,21.85888 15.79852,28.83107 16.52495,28.38211 0.4325,-0.26729 0.51982,0.20859 0.19405,1.05752 -0.34844,0.90803 0.0656,1.79598 1.00571,2.15673 0.87891,0.33726 1.34904,1.01606 1.04474,1.50842 C 174.13094,140.59715 174.38508,141 175,141 c 0.61492,0 0.8598,0.41783 0.54419,0.92851 -0.31562,0.51067 0.44532,1.12439 1.69098,1.36381 1.24566,0.23943 -1.33517,0.49045 -5.73517,0.55784 -4.4,0.0674 -8.90103,-0.11966 -10.00228,-0.41567 -1.41608,-0.38063 -6.50748,-9.08637 -17.39078,-29.73634 -8.46367,-16.058983 -19.41985,-36.695234 -24.34706,-45.858336 l -8.95856,-16.660187 -4.90135,-0.339813 C 103.20423,50.652916 101.11599,50.725 101.25944,51 c 0.14345,0.275 2.60514,5.077175 5.47041,10.6715 2.86528,5.594326 6.50124,12.569326 8.07992,15.5 1.57867,2.930675 9.71293,18.688101 18.07613,35.0165 13.69872,26.74553 15.47384,29.72886 17.90996,30.10017 1.48728,0.22669 -2.38492,0.47959 -8.60488,0.562 -7.47617,0.0991 -11.09513,-0.19625 -10.67793,-0.87129 C 132.07552,141.06878 88.0828,52.820423 85.959169,50.598883 84.877543,49.46739 76,48.065158 76,49.025805 c 0,0.389805 10.150034,21.21983 22.555632,46.288946 l 22.555628,45.580209 4.69437,0.44374 c 2.5819,0.24406 -4.39864,0.3382 -15.51232,0.20921 -11.113673,-0.129 -20.588035,0.14682 -21.054134,0.61291 -0.466099,0.4661 -4.586946,-7.36691 -9.157437,-17.40668 C 64.861579,91.320755 44.725143,49 44.037524,49 43.426925,49 30.145077,81.084436 9.1011186,133.39449 4.9205034,143.78647 1.3697378,151.42726 1.2105285,150.37403 1.0513192,149.32081 10.501319,124.78082 22.210529,95.840731 L 43.5,43.222386 l 3,0.399113 c 2.849099,0.379038 62.70786,4.561635 84,5.869453 5.5,0.337825 14.275,1.034523 19.5,1.54822 5.225,0.513696 13.78046,1.130925 19.01213,1.371618 l 9.51212,0.437625 12.85855,-24.674208 C 203.34178,5.2261942 206.44175,-0.05999888 207.28361,1.0595238 207.46579,1.3017857 214.51552,12.075 222.94967,25 260.53295,82.594847 272.06275,98.145751 276.1672,96.777599 277.11725,96.460916 275.42643,93.856542 244.49964,48 214.52814,3.5599023 214.84511,4 212.80911,4 211.8141,4 211,3.55 211,3 c 0,-1.2431054 6.75182,-1.2523653 18.5,-0.025372 4.95,0.5169834 20.25,1.8584554 34,2.9810491 13.75,1.1225936 29.725,2.4875036 35.5,3.0331333 54.42615,5.1422556 75.75554,7.0573906 89,7.9911826 8.525,0.601049 22.925,1.755324 32,2.565055 9.075,0.809731 24.56646,2.115079 34.42546,2.900772 l 17.92546,1.428533 2.55817,3.312824 C 476.31608,29.00923 483.32469,36.8 490.48376,44.5 c 7.15907,7.7 17.96314,19.4 24.00904,26 18.91823,20.652073 38.78599,41.5 39.54888,41.5 0.79126,0 3.38705,-12.378709 3.1979,-15.25 -0.0634,-0.9625 0.19425,-1.75 0.57257,-1.75 0.37832,0 0.70639,-1.6875 0.72905,-3.75 0.0227,-2.0625 0.24767,-5.325 0.5,-7.25 l 0.4588,-3.5 -5,-0.30948 -5,-0.309479 3.93502,4.041123 c 2.16427,2.222618 3.67593,4.300222 3.35925,4.616898 -0.31667,0.316676 -2.55075,-1.514525 -4.96461,-4.069335 -3.56736,-3.775653 -4.92607,-4.581901 -7.25899,-4.307418 -2.86434,0.337008 -2.85574,0.353083 4.25019,7.95043 3.91618,4.187006 6.80694,7.926125 6.42392,8.309153 -0.38303,0.383027 -4.3073,-3.165415 -8.7206,-7.885428 C 540.22655,81.80116 537.74691,79.824238 535,79.348654 l -3.5,-0.605969 4.99258,5.378658 c 2.74591,2.958261 7.86174,8.368686 11.36849,12.023165 3.50676,3.65448 6.1973,7.180382 5.97898,7.835332 -0.21832,0.65496 -5.77054,-4.585071 -12.33827,-11.644505 -8.2223,-8.837871 -12.72936,-12.93716 -14.47156,-13.162282 -1.39162,-0.179821 -2.96863,-0.753231 -3.50446,-1.274245 -0.61366,-0.596682 6.78877,-0.71004 20,-0.306273 16.39758,0.50115 23.59268,0.294486 32.97424,-0.947112 6.6,-0.873474 25.95,-3.196313 43,-5.161864 17.05,-1.965551 40.675,-4.690339 52.5,-6.055084 11.825,-1.364745 23.975,-2.745983 27,-3.069419 l 5.5,-0.588064 23.12836,26.864504 c 12.72059,14.775474 31.98866,37.114604 42.81793,49.642494 10.82927,12.5279 19.54651,23.44394 19.37164,24.25786 -0.18067,0.84095 -18.36917,-19.15596 -42.12887,-46.31759 z M 171.7079,140.67695 c -0.83717,-1.27768 -10.50822,-18.94018 -21.49123,-39.25 -10.98301,-20.309822 -21.48401,-39.693235 -23.33556,-43.07425 -3.23339,-5.904336 -3.54459,-6.167529 -7.87378,-6.659148 -2.47903,-0.281517 -4.66562,-0.35694 -4.85909,-0.167607 -0.19347,0.189333 2.34285,5.435949 5.63626,11.659148 3.2934,6.223199 12.16725,23.014907 19.71965,37.314907 7.5524,14.3 15.74003,29.7125 18.19473,34.25 l 4.46309,8.25 h 5.53402 5.53403 z M 141.19457,132.75 C 138.4765,127.6625 131.5009,114.275 125.69323,103 106.03881,64.842981 100.50429,54.31934 99,52.244058 97.976353,50.831857 95.97458,50.003027 92.696563,49.634134 l -4.803437,-0.540556 17.940404,35.203211 c 9.86722,19.361771 20.47002,40.265711 23.56179,46.453211 l 5.62139,11.25 h 5.55989 5.5599 z M 104,139.82826 C 104,138.72701 96.525244,122.94842 74.236519,77 69.03402,66.275 63.708183,55.1375 62.401325,52.25 L 60.02522,47 h -5.31261 c -2.921936,0 -5.84511,-0.5325 -6.495943,-1.183333 -0.650834,-0.650834 -1.380733,-0.985934 -1.621999,-0.744668 -0.241266,0.241266 4.282228,10.336266 10.052209,22.433333 10.033664,21.036101 28.466504,61.016228 31.621834,68.586548 1.458726,3.49981 1.646198,3.59676 7.31279,3.78193 3.198627,0.10452 6.026319,0.40068 6.283759,0.65812 C 102.74689,141.41355 104,141.0005 104,139.82826 Z M 96.77235,96.75 C 84.691,72.4125 74.410989,51.4875 73.92788,50.25 73.178353,48.330057 72.309429,48 68.004427,48 h -5.045075 l 1.859753,3.75 c 1.022864,2.0625 11.021437,22.9875 22.219051,46.5 L 107.39745,141 h 5.6705 5.67049 z m 115.0275,37.71006 c -1.40403,-3.08151 -2.11368,-2.55862 -1.24184,0.91503 0.36043,1.4361 1.04036,2.37313 1.51095,2.08229 0.47059,-0.29084 0.34949,-1.63963 -0.26911,-2.99732 z m 365.05325,2.05971 c -0.26412,-0.26412 -6.73417,-4.53912 -14.37787,-9.5 C 552.72526,120.69191 547.67141,118 545.54125,118 c -2.6013,0 -1.03085,1.34146 10.96121,9.36295 10.3115,6.89735 14.89727,9.39903 17.41421,9.5 1.87916,0.0754 3.20056,-0.0791 2.93643,-0.34318 z m 6.6469,-1.11749 c -8.64235,-6.62915 -33.02967,-20.48014 -28.89405,-16.41062 2.83472,2.78941 27.22334,17.92862 28.89405,17.93596 l 2,0.009 -2,-1.53411 z m 7.11267,0.78003 c -0.27795,-0.44974 -6.04201,-4.28973 -12.80902,-8.53333 -6.76701,-4.2436 -13.42651,-8.57332 -14.7989,-9.6216 l -2.49525,-1.90597 2.93234,-3.0607 c 3.49379,-3.64673 2.66503,-3.97876 -1.75856,-0.70453 -2.49702,1.84822 -4.31693,2.32067 -8.44179,2.19149 -2.90639,-0.091 -5.81383,-0.76347 -6.5,-1.50336 -1.00856,-1.08751 -0.91916,-1.22544 0.47648,-0.73516 4.41209,1.54991 1.51214,-2.36958 -14.23594,-19.240878 C 523.64445,83.064694 506.07765,64.106959 493.94469,50.939974 481.81173,37.772988 471.27249,27 470.52417,27 c -0.74833,0 -2.13519,-0.297239 -3.08191,-0.660531 -1.34871,-0.517549 -1.52877,-0.322176 -0.83179,0.902572 0.48924,0.859707 17.98953,20.106954 38.88953,42.771662 20.9,22.664707 38,41.714887 38,42.333737 0,0.61884 -0.85316,1.28947 -1.89591,1.49029 -1.35724,0.26138 -1.73065,-0.0655 -1.31426,-1.15063 0.39375,-1.0261 -9.8156,-12.788497 -31.60409,-36.411712 C 490.98358,57.082608 473.17338,37.694053 469.10751,33.189712 462.5655,25.942189 461.31738,25 458.25857,25 h -3.45646 l 5.32737,6.149457 c 2.93005,3.382201 10.97391,12.269701 17.87524,19.75 34.95032,37.882364 54.95226,60.361133 54.44318,61.184843 C 531.67182,113.34003 530,113.23988 530,111.93767 530,110.83623 519.0213,98.545838 476.74177,52.316361 457.70808,31.504457 451.17479,24.977663 448.86887,24.4712 c -5.90378,-1.296689 -9.17469,-5.317007 41.56478,51.08784 14.81351,16.467528 28.06304,31.18143 29.44341,32.69755 1.86065,2.04365 2.21848,3.04787 1.38356,3.88279 -0.6194,0.6194 -1.93132,0.81723 -2.91538,0.43961 -1.41062,-0.54131 -1.50557,-0.86187 -0.44877,-1.515 0.98718,-0.61012 -2.31086,-4.8684 -12.51494,-16.158751 -7.62044,-8.431677 -15.88624,-17.631979 -18.36844,-20.445117 -6.54532,-7.417972 -40.95803,-45.57101 -43.42205,-48.141608 -1.15007,-1.199817 -3.88739,-2.507818 -6.08292,-2.906668 l -3.99188,-0.725182 6.49188,7.372928 c 3.57053,4.05511 21.01388,23.728205 38.763,43.717988 17.74911,19.989783 32.01006,36.76747 31.69098,37.28374 -0.87709,1.41916 -3.25938,1.12437 -3.10099,-0.38372 0.0764,-0.72732 -10.94763,-13.889824 -24.49782,-29.250003 -47.98534,-54.395038 -51.14617,-57.796696 -54.63039,-58.792746 -1.79691,-0.51369 -3.53868,-0.662409 -3.8706,-0.330488 -0.33192,0.331921 16.58127,20.192857 37.58487,44.135413 21.0036,23.942556 37.90631,43.988284 37.56158,44.546074 -0.78378,1.26818 -4.19554,1.32994 -4.96198,0.0898 -0.31419,-0.50837 0.14343,-1.07087 1.01694,-1.25 C 496.63833,109.60532 485.12914,95.756811 459.97222,67 439.5234,43.625 422.27672,23.993926 421.64627,23.375392 c -0.63045,-0.618534 -2.87423,-1.384309 -4.98619,-1.701721 -4.74502,-0.713144 -5.69674,-2.127057 13.44102,19.968547 50.55257,58.365772 58.3989,67.531112 58.3989,68.216032 0,0.3379 -0.7875,0.76602 -1.75,0.95138 -1.08471,0.2089 -1.75,-0.27834 -1.75,-1.28164 0,-0.89026 -4.00417,-6.21076 -8.89816,-11.823325 C 471.20785,92.092099 458.10303,76.925 446.98001,64 412.91558,24.416966 409.83038,21.000462 408.13747,20.986345 c -0.90061,-0.0075 -2.74356,-0.309469 -4.09546,-0.671021 l -2.45798,-0.657366 1.95798,2.561359 C 404.61891,23.628065 421.475,43.541804 441,66.47207 c 19.525,22.930267 35.65,42.10461 35.83333,42.60966 0.64405,1.77422 -2.37037,0.8966 -3.3462,-0.9742 C 472.52253,106.25824 434.41535,61.120986 410.7107,33.75 399.66174,20.992119 398.55108,20 395.31785,20 h -3.48466 l 1.8334,2.378148 C 395.917,25.297196 452.867,93.366803 459.44507,101 c 2.60685,3.025 5.12781,6.48829 5.60213,7.69621 1.11498,2.83946 2.05058,2.9614 32.9528,4.29498 14.025,0.60525 28.425,1.28818 32,1.51761 3.575,0.22944 11.44917,0.6964 17.49815,1.03768 6.04899,0.34129 11.6292,1.14545 12.40047,1.78703 1.40251,1.16667 30.32698,19.52319 30.9104,19.61687 0.16996,0.0273 0.0816,-0.31834 -0.19635,-0.76807 z m -35.76991,-0.67288 c -0.26982,-0.26982 -6.66822,-4.54482 -14.21867,-9.5 -10.15567,-6.66493 -14.5603,-9.00386 -16.92609,-8.98803 -2.84733,0.0191 -1.77252,0.96085 9.802,8.589 7.15,4.71218 13.9,8.94903 15,9.41522 2.15255,0.91226 7.1526,1.29365 6.34276,0.48381 z m -1.95133,-8.13442 c -7.36529,-4.74374 -14.61937,-9.05943 -16.12018,-9.59041 -6.77393,-2.39662 -4.05157,0.45729 7.84076,8.21961 7.08839,4.62671 13.03799,8.76851 13.22132,9.204 0.18334,0.43548 2.15948,0.79179 4.39143,0.79179 4.02271,0 3.94132,-0.0752 -9.33333,-8.62499 z M 199,134 c 0,-0.55 -0.7875,-0.99311 -1.75,-0.98469 -1.49555,0.0131 -1.5319,0.15626 -0.25,0.98469 1.88721,1.21961 2,1.21961 2,0 z m 333,0.64282 c 0,-0.19645 -6.25475,-4.50571 -13.89944,-9.57613 -10.671,-7.07764 -14.54458,-9.14319 -16.67694,-8.89282 -2.45956,0.2888 -1.35499,1.28527 9.64944,8.70515 6.83482,4.60846 12.57694,8.77096 12.76027,9.25 0.30976,0.80939 8.16667,1.3037 8.16667,0.5138 z m 10.45,-0.53935 c -0.5225,-0.49309 -6.92711,-4.76809 -14.23248,-9.5 C 518.55091,118.34211 514.06079,116 511.72356,116 c -2.85355,0 -1.65178,1.05174 10.78248,9.43636 10.72023,7.22883 14.80105,9.45125 17.44396,9.5 2.07223,0.0382 3.07061,-0.29439 2.5,-0.83289 z m -34,-0.94576 c -0.5225,-0.46327 -6.60191,-4.6655 -13.5098,-9.3383 -8.15541,-5.51667 -13.91127,-8.71531 -16.4137,-9.1214 -4.90039,-0.79522 -4.71672,-0.61703 10.64326,10.32617 10.27034,7.31709 12.99013,8.80063 16.28024,8.88024 2.21798,0.0537 3.53344,-0.27375 3,-0.74671 z m 11.55,0.5274 c 0,-0.17319 -6.25093,-4.48281 -13.89096,-9.57694 -10.85384,-7.237 -14.51607,-9.19057 -16.75,-8.93511 -2.5732,0.29425 -1.64229,1.14838 9.31107,8.54316 6.69355,4.51892 12.45761,8.68142 12.80901,9.25 0.5537,0.8959 8.52088,1.56807 8.52088,0.71889 z m -34.08908,-8.51349 c -18.25465,-12.52347 -18.12395,-12.45951 -12.58682,-6.15996 7.20331,8.19516 15.30498,13.80359 20.08682,13.90522 3.87476,0.0824 3.80543,0.0108 -7.5,-7.74526 z m -285.61717,5.15149 c 0.35391,0.92229 1.35081,1.67689 2.21533,1.67689 1.19345,0 0.96027,-0.65957 -0.96861,-2.73978 C 200.14321,127.75334 199,126.1462 199,125.68879 c 0,-0.45741 -0.71128,-0.12037 -1.58062,0.74897 -0.86934,0.86934 -1.96325,1.34415 -2.4309,1.05512 -0.46766,-0.28903 -1.1184,-0.0917 -1.44609,0.43853 -0.32983,0.53368 0.28826,0.79379 1.38457,0.58266 1.35256,-0.26048 2.20048,0.31087 2.67467,1.80227 0.65815,2.06996 0.72956,2.08333 1.37147,0.25677 0.60439,-1.7198 0.74632,-1.74667 1.32065,-0.25 z M 420.61574,126.25 c -0.56773,-2.87433 -1.92264,-16.94478 -2.04491,-21.23598 -0.0646,-2.26622 0.27775,-2.47143 3.87251,-2.32149 2.16883,0.0905 3.48448,-0.14084 2.92366,-0.51402 C 424.80618,101.80533 413.55784,88.225 400.37069,72 352.48777,13.086576 356.07911,17.189161 351.74994,16.457753 c -2.13659,-0.360975 -4.04825,-0.49278 -4.24812,-0.292902 -0.33714,0.33714 25.05297,32.105321 53.78409,67.294799 6.71775,8.227808 13.00951,15.958855 13.98169,17.18011 0.97218,1.22125 1.3699,2.46624 0.88382,2.76666 -0.48608,0.30041 -4.05793,-3.38063 -7.93744,-8.180106 C 379.7034,59.954879 368.8374,46.501028 357.55308,32.5 348.04941,20.708321 343.88757,16.288465 341.7298,15.695747 c -7.37827,-2.026738 -8.88113,-4.16014 43.39659,61.604375 22.12882,27.837688 21.86256,27.456598 19.99504,28.618868 -0.9242,0.57518 0.3942,1.09721 4,1.58382 6.19934,0.83662 7.59485,1.43647 5.85023,2.5147 -0.89511,0.55321 -0.63787,1.09076 0.92125,1.92518 1.18971,0.63671 1.88502,1.60761 1.54514,2.15755 -0.36194,0.58563 -2.02103,-0.0703 -4.00444,-1.58308 -2.40562,-1.83486 -4.40702,-2.51426 -6.91004,-2.34569 -1.93796,0.13052 -3.51236,0.48283 -3.49866,0.78292 0.0137,0.30008 2.92005,2.72704 6.45857,5.39323 6.98958,5.26649 9.11017,7.39207 8.24141,8.26082 -0.30806,0.30806 -4.84712,-2.85281 -10.0868,-7.02416 C 399.17207,110.8444 397.64203,110 393.89557,110 h -4.21583 l 11.91013,9.45562 c 10.26367,8.14848 12.43951,9.46176 15.73959,9.5 3.65002,0.0423 3.804,-0.0845 3.28628,-2.70562 z M 193.5,125 c -0.33992,-0.55 -1.15398,-0.99311 -1.80902,-0.98469 -0.71561,0.009 -0.59227,0.40223 0.30902,0.98469 1.92112,1.24153 2.2673,1.24153 1.5,0 z m 441.57569,-1.64421 2.42431,-2.64421 -2.75,1.75922 c -1.5125,0.96757 -2.75,2.15747 -2.75,2.64421 0,1.35971 0.45445,1.09977 3.07569,-1.75922 z M 195,122.5 c -0.8601,-1.03636 -0.89795,-1.5 -0.12244,-1.5 0.61734,0 1.11893,-0.3375 1.11464,-0.75 -0.01,-0.95984 -4.94955,-3.28104 -5.11982,-2.40591 -0.58354,2.99908 -0.44485,5.15591 0.33154,5.15591 0.51197,0 0.65158,-1.0125 0.31025,-2.25 -0.5293,-1.91896 -0.35801,-1.8454 1.16423,0.5 0.98166,1.5125 2.18571,2.75 2.67566,2.75 0.48996,0 0.33063,-0.675 -0.35406,-1.5 z m 7.57872,-1.27381 c -1.72194,-1.64929 -1.74325,-1.62798 -0.47833,0.47833 0.72815,1.21249 1.53915,1.98927 1.80223,1.72619 0.26308,-0.26308 -0.33267,-1.25511 -1.3239,-2.20452 z M 206.76793,121 c -0.68696,-1.1 -1.59459,-2 -2.01695,-2 -0.42236,0 -0.20587,0.9 0.48109,2 0.68696,1.1 1.59459,2 2.01695,2 0.42236,0 0.20587,-0.9 -0.48109,-2 z m 4.73207,1 c -0.33992,-0.55 -1.06803,-1 -1.61803,-1 -0.55,0 -0.72189,0.45 -0.38197,1 0.33992,0.55 1.06803,1 1.61803,1 0.55,0 0.72189,-0.45 0.38197,-1 z m 92.46429,-0.36119 c -10.09957,-9.38851 -20.38856,-17.83535 -22.13462,-18.17161 -2.239,-0.43119 -4.53715,-2.14326 -3.763,-2.80335 0.23833,-0.20322 11.90833,0.42002 25.93333,1.38498 29.86838,2.05502 59.62664,3.81079 76.5,4.51358 6.6,0.27489 13.65174,0.71041 15.67053,0.96781 4.46789,0.56966 7.68778,-0.37076 5.66332,-1.65407 -1.00826,-0.63914 -0.88634,-0.84926 0.49948,-0.86084 1.00834,-0.008 1.68334,-0.37766 1.5,-0.82052 C 403.65,103.75192 396.89057,95.089422 388.81238,84.944789 380.73419,74.800155 365.09604,55.126115 354.06094,41.2247 334.5435,16.637713 331.32641,13.428395 326.97538,14.204621 c -1.64186,0.292909 3.64873,7.395214 50.84053,68.250388 8.51106,10.975254 15.52177,20.425251 15.57937,21.000001 0.0576,0.57474 -0.34528,1.15749 -0.89528,1.29499 -0.55,0.1375 -1,-0.10989 -1,-0.54975 0,-0.43986 -5.20374,-7.527356 -11.56388,-15.749996 C 373.57599,80.227614 360.78815,63.6 351.51871,51.5 342.24926,39.4 331.64871,25.883394 327.96192,21.463097 322.04576,14.369872 320.83252,13.397495 317.62934,13.181772 315.6332,13.047339 314,13.178144 314,13.472449 c 0,0.294304 6.4425,8.970901 14.31667,19.281325 42.64292,55.836579 52.73598,69.219866 53.28869,70.660206 0.44022,1.14719 0.009,1.58602 -1.55739,1.58602 -1.25076,0 -1.89326,-0.44132 -1.52052,-1.04441 C 379.19449,102.8763 346.07642,58.380674 317.34187,21.75 309.98034,12.365551 309.54612,12 305.76028,12 h -3.9333 l 2.83651,3.751009 c 1.56008,2.063054 8.20102,10.950554 14.75765,19.75 6.55662,8.799445 20.65184,27.643771 31.32271,41.87628 11.93185,15.914374 19.04426,26.234601 18.47351,26.805351 -0.51044,0.51044 -2.23066,0.59352 -3.82272,0.18462 -2.80228,-0.71972 -2.81974,-0.76166 -0.54719,-1.31442 2.24945,-0.54715 2.06085,-0.9463 -4.51798,-9.561912 C 356.55349,88.545918 342.939,70.325 330.07506,53 299.42715,11.723772 298.80405,11 293.91703,11 h -3.84002 l 18.6179,25.25 c 10.23984,13.8875 21.61174,29.3 25.27088,34.25 C 353.05299,96.320729 357,101.87053 357,102.88793 357,103.49957 356.05186,104 354.89301,104 c -1.49942,0 -1.93411,-0.45052 -1.50745,-1.56238 0.37984,-0.98982 -1.9017,-4.929296 -6.22583,-10.749999 C 343.40577,86.634429 331.41206,70.35 320.50703,55.5 285.95265,8.4453136 287.54688,10.344955 282.44981,10.15216 L 278.06537,9.9863202 293.2227,30.74316 c 8.33653,11.416262 23.37394,31.974338 33.41646,45.684614 10.04252,13.710276 18.03046,25.297776 17.75097,25.749996 C 344.11064,102.63 342.91852,103 341.74098,103 c -1.55939,0 -1.84164,-0.29934 -1.03901,-1.10197 0.80262,-0.80262 -0.0259,-2.679351 -3.05,-6.908762 C 329.73061,83.910745 304.53367,49.412049 292.01145,32.5 285.08841,23.15 278.49965,14.197899 277.36976,12.606442 275.76236,10.342413 274.41086,9.6454799 271.15771,9.4030649 268.87097,9.2326639 267,9.308172 267,9.5708607 c 0,0.2626887 7.50637,10.9292083 16.68082,23.7033773 43.47195,60.52874 48.56832,67.876622 47.6884,68.756542 -0.50893,0.50893 -2.22396,0.56766 -3.85313,0.13195 -1.88669,-0.50457 -2.50355,-1.05245 -1.72603,-1.53298 0.66547,-0.41128 1.65994,-0.46967 2.20994,-0.12975 0.55,0.33992 0.98267,0.25398 0.96148,-0.19098 C 328.9403,99.864058 314.16206,79.025 296.12096,54 L 263.31895,8.5 259.15947,8.1925022 C 256.87176,8.0233784 255,8.1429713 255,8.4582643 c 0,0.3152929 1.9125,3.2545877 4.25,6.5317667 2.3375,3.277178 6.5323,9.232585 9.32177,13.234238 8.11268,11.638098 28.90522,41.077008 39.747,56.275406 10.0239,14.051853 11.24621,16.409375 8.93123,17.226025 -0.69599,0.24553 -1.27459,-0.37158 -1.30547,-1.39237 C 315.91402,99.325 301.40152,78.025 283.69453,53 L 251.5,7.5 247.25,7.1925022 C 244.9125,7.0233784 243,7.1427234 243,7.4577135 c 0,0.4695941 35.97883,52.6777695 57.73209,83.7739155 2.97476,4.252396 5.12543,8.189896 4.77926,8.75 -0.80535,1.303091 -4.20483,1.323351 -5.00427,0.02982 -0.35034,-0.566861 0.0511,-0.734508 0.94098,-0.393012 C 302.30163,99.945987 303,99.716485 303,99.10844 303,98.165809 248.31776,18.628942 241.22159,9.25 239.18929,6.5639247 238.08916,6 234.88131,6 232.74659,6 231,6.2019086 231,6.4486858 231,6.9682925 288.3593,91.312259 291.14226,94.884859 293.59124,98.028711 293.49518,100 290.89301,100 c -1.47694,0 -1.93208,-0.455797 -1.52208,-1.524255 0.36575,-0.953124 -4.96691,-9.664774 -14.23202,-23.25 C 266.9896,63.276585 254.33831,44.725 247.02495,34 225.95558,3.1019405 227.56764,5 222.39469,5 h -4.43496 L 230.3117,23.25 C 265.88317,75.806706 280,97.075739 280,98.112559 c 0,0.756197 -1.20444,0.953672 -3.52241,0.577518 -2.08935,-0.339056 -3.28586,-0.188868 -2.94098,0.369157 0.31978,0.517421 1.25642,0.940766 2.08142,0.940766 0.825,0 1.24484,0.41287 0.93297,0.91749 -0.83947,1.35828 20.95388,20.47768 24.18111,21.2142 4.41041,1.00654 4.78389,0.94958 3.23218,-0.49288 z m 299.24009,-15.61236 c 7.86259,-7.685447 13.9475,-13.985447 13.52202,-13.999996 -0.86472,-0.02957 -25.48544,23.387446 -27.5331,26.187016 -2.94052,4.02028 0.42559,1.0924 14.01108,-12.18702 z m -403.03593,9.742 c -0.74207,-0.74207 -0.87221,-0.35164 -0.43724,1.31171 0.35361,1.3522 0.8069,1.8055 1.05655,1.05655 0.24048,-0.72144 -0.0382,-1.78716 -0.61931,-2.36826 z M 602.38905,94.443359 C 613.44459,83.749512 621.95174,75 621.29384,75 c -1.36353,0 -36.35443,33.34877 -42.04671,40.07344 l -3.74698,4.42656 3.39396,-2.80664 c 1.86668,-1.54365 12.43941,-11.55615 23.49494,-22.250001 z M 195,117 c 0,-0.55 -0.47656,-1 -1.05902,-1 -0.58246,0 -0.7809,0.45 -0.44098,1 0.33992,0.55 0.81648,1 1.05902,1 0.24254,0 0.44098,-0.45 0.44098,-1 z m -5.61501,-2.46482 c 1.87212,-2.85721 2.13871,-4.8062 0.33321,-2.43595 -0.67001,0.87958 -1.6682,1.64331 -2.2182,1.69718 -1.29249,0.1266 -1.95363,3.20359 -0.68833,3.20359 0.52707,0 1.68506,-1.10917 2.57332,-2.46482 z M 593.52523,96.552206 c 11.53613,-11.246286 20.5223,-20.471286 19.96928,-20.5 C 612.94149,76.023493 603.07135,85.225 591.56087,96.5 580.05039,107.775 571.06421,117 571.59159,117 c 0.52738,0 10.39752,-9.20151 21.93364,-20.447794 z M 185.38156,111.44806 c 0.34149,-0.88992 0.17385,-1.29132 -0.39301,-0.94098 -0.5437,0.33602 -0.98855,1.0344 -0.98855,1.55194 0,1.43843 0.71677,1.12146 1.38156,-0.61096 z M 608.5,107 c 3.26557,-3.3 5.71239,-6 5.43739,-6 -0.275,0 -3.17182,2.7 -6.43739,6 -3.26557,3.3 -5.71239,6 -5.43739,6 0.275,0 3.17182,-2.7 6.43739,-6 z m -46.35987,0.69431 c 1.1429,-2.17907 1.13599,-2.18108 -0.99462,-0.28932 -1.18003,1.04774 -2.14551,2.3118 -2.14551,2.80901 0,1.40774 1.86524,-0.089 3.14013,-2.51969 z m 82.83929,-1.17334 c 2.41772,-2.46347 4.17178,-4.7031 3.89792,-4.97696 -0.27385,-0.27386 -2.70387,1.74171 -5.40004,4.47903 -2.69616,2.73733 -4.45023,4.97696 -3.89792,4.97696 0.55231,0 2.98233,-2.01557 5.40004,-4.47903 z m -463.04039,-3.63489 c -0.63004,-1.17724 -0.76156,-2.4207 -0.29228,-2.76325 1.41336,-1.031683 1.3781,-2.899315 -0.0652,-3.453156 -0.96515,-0.370364 -1.2079,0.106011 -0.84341,1.655144 0.50561,2.148952 0.49319,2.151092 -1.0305,0.178017 -1.51942,-1.967549 -1.0167,-3.683156 1.6491,-5.627835 0.47122,-0.34375 0.35872,-0.932808 -0.25,-1.309017 -0.6087,-0.376209 -1.10674,-0.117459 -1.10674,0.575 0,1.002693 -0.25279,1.006231 -1.24164,0.01738 -0.98886,-0.988854 -0.93796,-1.455959 0.25,-2.294332 1.28062,-0.90377 1.26168,-0.979809 -0.1339,-0.537502 -1.06482,0.337477 -2.02484,-0.361161 -2.7831,-2.025356 -0.96917,-2.12709 -0.91904,-2.449021 0.30801,-1.978157 1.64083,0.629643 2.34,2.013563 -9.38326,-18.573012 L 159.75547,54 h -4.46323 -4.46323 l 2.39024,4.25 c 18.30337,32.544654 23.15763,40.635108 24.05007,40.083554 0.57183,-0.353414 0.74371,-0.163651 0.38194,0.421695 -1.00111,1.619841 0.25626,3.987301 2.41791,4.552591 1.06196,0.27771 1.93083,1.02361 1.93083,1.65756 0,0.63395 -0.44485,0.8777 -0.98855,0.54168 -0.58086,-0.359 -0.72562,0.0742 -0.351,1.05044 0.5789,1.50859 0.71969,1.51459 1.53082,0.0652 0.55598,-0.99348 0.46073,-2.40444 -0.25224,-3.73663 z m -5.89319,-9.800434 C 175.43154,91.937815 175.347,91 175.85783,91 c 1.02776,0 2.44663,3.028877 1.74673,3.728774 -0.24339,0.243385 -0.94481,-0.496022 -1.55872,-1.643128 z m 416.47693,-1.843557 c 8.13711,-7.841851 14.53902,-14.51363 14.22648,-14.826175 -0.31255,-0.312546 -7.47149,6.248807 -15.90876,14.580783 -8.43727,8.331975 -14.83918,15.003753 -14.22647,14.826173 0.61271,-0.17758 7.77165,-6.73893 15.90875,-14.580781 z m 9.02428,9.554071 3.95295,-4.20383 -4.16535,3.45383 c -3.54569,2.94003 -5.18704,4.95384 -4.0376,4.95384 0.16338,0 2.07588,-1.89173 4.25,-4.20384 z M 636.33801,100.5 c 2.06884,-2.475 3.60783,-4.5 3.41997,-4.5 -0.18786,0 -2.32895,2.025 -4.75798,4.5 -2.42903,2.475 -3.96802,4.5 -3.41997,4.5 0.54804,0 2.68914,-2.025 4.75798,-4.5 z M 563,100.90894 c 0,-0.46539 -0.675,-0.58715 -1.5,-0.27057 -0.825,0.31659 -1.5,1.25756 -1.5,2.09106 0,1.23369 0.27889,1.284 1.5,0.27057 0.825,-0.68469 1.5,-1.62567 1.5,-2.09106 z M 433.77881,100.55452 C 434.22727,100.10606 426.51663,90.385292 403.59346,62.5 374.02215,26.527466 366.76024,17.997707 365.64924,17.9311 365.01716,17.893205 363.2625,17.698904 361.75,17.49932 360.2375,17.299735 359,17.358142 359,17.629112 c 0,0.530951 8.39959,10.937063 44.9994,55.749012 22.60159,27.672856 23.61126,28.749746 26.42709,28.186576 1.61022,-0.32204 3.11877,-0.77662 3.35232,-1.01018 z m 10.11246,-1.172765 C 444.31989,99.019203 443.21006,97.626577 422.06986,72 414.12988,62.375 403.77849,49.797535 399.06677,44.050078 381.29011,22.365743 378.17152,19.122804 374.41816,18.418669 c -1.93128,-0.36231 -3.72018,-0.449986 -3.97533,-0.194835 -0.25515,0.255151 11.35333,14.831716 25.79663,32.392367 14.4433,17.560651 29.59162,36.055942 33.66294,41.100647 6.99556,8.668072 7.57266,9.139862 10.5,8.584032 1.70368,-0.323489 3.27367,-0.737095 3.48887,-0.919125 z m 10.71779,-0.773296 c 0.16891,-0.167988 -49.68189,-59.97775 -58.46309,-70.14257 -7.10505,-8.224574 -8.15282,-9.057577 -11.69269,-9.295974 l -3.88829,-0.261862 2.07758,2.295973 C 383.78524,22.466812 396.56155,37.9 411.03438,55.5 c 14.47282,17.6 28.59829,34.749112 31.38992,38.109137 4.76134,5.730769 5.29247,6.078127 8.5757,5.608458 1.925,-0.275373 3.54907,-0.549484 3.60906,-0.609136 z M 660.12756,98.25 c 1.24387,-1.586056 1.2085,-1.621426 -0.37756,-0.377555 C 658.08425,99.178814 657.55452,100 658.37756,100 c 0.20765,0 0.99515,-0.7875 1.75,-1.75 z M 563.76793,95 c 0.68696,-1.1 0.8852,-2 0.44054,-2 C 563.1667,93 561,95.160974 561,96.2 c 0,1.473397 1.50615,0.820424 2.76793,-1.2 z M 578,80.744815 c 0,-0.615449 -1.35,0.174385 -3,1.755185 -1.65,1.5808 -3,3.045634 -3,3.255185 0,0.209552 1.35,-0.580281 3,-1.755185 1.65,-1.174904 3,-2.639737 3,-3.255185 z M 597.5,80 c 0.99549,-1.1 1.58498,-2 1.30998,-2 -0.275,0 -1.31449,0.9 -2.30998,2 -0.99549,1.1 -1.58498,2 -1.30998,2 0.275,0 1.31449,-0.9 2.30998,-2 z M 175.97525,72.4349 c -1.51203,-3.976946 -1.17297,-4.185743 1.51817,-0.9349 l 2.48349,3 -2.48845,-4.802915 c -2.723,-5.2556 -2.97476,-6.11567 -1.52854,-5.221857 1.49376,0.923194 -0.76826,-4.642926 -2.96046,-7.284754 -1.52037,-1.832215 -2.73198,-2.245556 -5.86252,-2 L 163.19087,55.5 168.17981,64 c 4.20691,7.167604 7.16363,11 8.48657,11 0.15626,0 -0.15474,-1.154295 -0.69113,-2.5651 z m 363.95313,84.66491 4.42839,-0.59981 -3.71318,-3.25 -3.71318,-3.25 h 10.95301 c 6.02415,0 11.66481,0.27314 12.53479,0.60699 0.91523,0.3512 1.58179,1.77343 1.58179,3.375 0,2.30017 -0.52818,2.87365 -3.125,3.39301 -1.71875,0.34375 -4.86875,0.625 -7,0.625 -3.37681,0 -3.875,-0.2957 -3.875,-2.3 0,-1.265 0.54,-2.84 1.2,-3.5 0.93333,-0.93333 0.22793,-1.2 -3.17431,-1.2 h -4.37432 l 2.17432,2.31445 c 3.4722,3.69599 2.78919,4.70314 -3.07569,4.53536 l -5.25,-0.1502 z M 191.33796,141.77417 c -0.52087,-0.7008 -1.49231,-2.62417 -2.15875,-4.27417 -1.11423,-2.75865 -1.08973,-2.84384 0.30454,-1.05887 0.83394,1.06762 1.51625,2.49262 1.51625,3.16667 0,0.67404 0.5625,1.42643 1.25,1.67196 0.6875,0.24554 0.97663,0.74391 0.6425,1.1075 -0.33412,0.36359 -1.03367,0.0877 -1.55454,-0.61309 z M 204.71025,140 c 0.28766,-1.1 0.69553,-2 0.90638,-2 0.21085,0 0.38337,0.9 0.38337,2 0,1.1 -0.40787,2 -0.90638,2 -0.49851,0 -0.67103,-0.9 -0.38337,-2 z m -25.14596,-2.70687 c -0.54268,-1.4252 -0.42782,-1.54006 0.5598,-0.5598 0.68342,0.67834 0.99067,1.48524 0.68278,1.79313 -0.30789,0.30789 -0.86705,-0.24711 -1.24258,-1.23333 z M 202,135 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 0,0.55 -0.45,1 -1,1 -0.55,0 -1,-0.45 -1,-1 z m -25,-2 c -0.59134,-1.10492 -0.65928,-2 -0.15182,-2 0.50521,0 1.15391,0.9 1.44157,2 0.28766,1.1 0.35597,2 0.15181,2 -0.20415,0 -0.85286,-0.9 -1.44156,-2 z m 3.36935,-10.60687 c -0.37276,-1.04122 -0.85991,-2.23063 -1.08256,-2.64313 -0.22265,-0.4125 0.0192,-0.75 0.53756,-0.75 0.99747,0 2.40268,4.1063 1.65953,4.84946 -0.24024,0.24024 -0.74178,-0.41511 -1.11453,-1.45633 z M 176.5,115 c -0.85325,-1.65 -1.32636,-3 -1.05136,-3 0.275,0 1.19811,1.35 2.05136,3 0.85325,1.65 1.32636,3 1.05136,3 -0.275,0 -1.19811,-1.35 -2.05136,-3 z m 2.49611,-1.00763 c -1.17888,-2.3108 -1.65708,-3.90087 -1.06265,-3.5335 1.42745,0.88222 4.35429,6.58671 3.71004,7.23097 -0.27719,0.27718 -1.46851,-1.38668 -2.64739,-3.69747 z m -3.95027,-6.90672 C 174.43154,105.93781 174.347,105 174.85783,105 c 1.02776,0 2.44663,3.02888 1.74673,3.72877 -0.24339,0.24339 -0.94481,-0.49602 -1.55872,-1.64312 z"

        id="path187"></path> </div>
  </body>
</html>

c1lonewolf · Jul 17, 2023

OK here you go... this works in one of my newest firefox browsers but I don't know the why or the how exactly. I've also included some notes for you to copy and save to help you out with the object.

1. Open NotePad on your computer. Or use any plain text editor.
2. Create a new file and save it as "metal_roof_visualizer.html".
3. Copy the following code to the clipboard.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-----------------------------------------
FileName:    metall_roof_visualizer.html
FileCreated: 2023.07.15
FileUpdated: 2023.07.15
Modifications by: c1lonewolf
Changes:
Eleminated a lot of excess coding and external css.
Changed doctype to remove space at bottom of showcase.
Uses mostly percentages for object resizing.
Changed the id's of all radio inputs to the actual color
they represent and adjusted the styling rules to match.
------------------------------------------>
<head><title>Metal Roof Visualizer</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style type="text/css">
      body { text-align: center; }
      input[type="radio"]{
          position: absolute;
          top:-40px;
          visibility:hidden;
      }
      br { clear: both; }


      /*------------------------------------*/
      /*      Visualizer Styles Start       */
      /*------------------------------------*/
      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }
      div.color-selections {
         padding: 0;
      }
      div.color-selections label {
         display: inline-block;
         width: 20px;
         height: 20px;
         text-align: center;
         margin: 0.25em 0.25em;
         cursor: pointer;
         border: 1px solid black;
         border-radius: 50%;
         box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5) inset;
      }

      /*----- color selection labels --*/
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/
      div.color-selections label:nth-of-type(3) { background-color: #000000; }/*black*/
      div.color-selections label:nth-of-type(4) { background-color: #4b4542; }/*charcoal_gray*/
      div.color-selections label:nth-of-type(5) { background-color: #a1a1a6; }/*pewter_gray*/
      div.color-selections label:nth-of-type(6) { background-color: #795f57; }/*burnished_slate*/
      div.color-selections label:nth-of-type(7) { background-color: #ede2cd; }/*light_stone*/
      div.color-selections label:nth-of-type(8) { background-color: #b99c75; }/*tan*/
      div.color-selections label:nth-of-type(9) { background-color: #35613e; }/*ivy_green*/
      div.color-selections label:nth-of-type(10) { background-color: #940213; }/*dark_red*/
      div.color-selections label:nth-of-type(11) { background-color: #ab9378; }/*clay*/
      div.color-selections label:nth-of-type(12) { background-color: #4f7b59; }/*evergreen*/
      div.color-selections label:nth-of-type(13) { background-color: #566c80; }/*slate_blue*/
      div.color-selections label:nth-of-type(14) { background-color: #1e4269; }/*gallery_blue*/
      div.color-selections label:nth-of-type(15) { background-color: #9f0a03; }/*barn_red*/
      div.color-selections label:nth-of-type(16) { background-color: #ff0000; }/*brite_red*/
      div.color-selections label:nth-of-type(17) { background-color: #6f0312; }/*burgundy*/
      div.color-selections label:nth-of-type(18) { background-color: #f9f9f9; }/*brite_white*/
      div.color-selections label:nth-of-type(19) { background-color: #e1e1e1; }/*white*/
      div.color-selections label:nth-of-type(20) { background-color: #b0b1b2; }/*galvalume*/
      div.color-selections label:nth-of-type(21) { background-color: #a57a45; }/*copper_penny*/
      div.color-selections label:nth-of-type(22) { background-color: #F77f00; }/*ut_orange*/
      div.color-selections label:nth-of-type(23) { background-color: #af5533; }/*r23*/
      div.color-selections label:nth-of-type(24) { background-color: #b5b2c5; }/*r24*/

      /*----- radio selected color --*/
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }
      #black:checked ~ .roof { color: #000000; }
      #charcoal_gray:checked ~ .roof { color: #4b4542; }
      #pewter_gray:checked ~ .roof { color: #a1a1a6; }
      #burnished_slate:checked ~ .roof { color: #795f57; }
      #light_stone:checked ~ .roof { color: #ede2cd; }
      #tan:checked ~ .roof { color: #b99c75; }
      #ivy_green:checked ~ .roof { color: #35613e; }
      #dark_red:checked ~ .roof { color: #940213; }
      #clay:checked ~ .roof { color: #ab9378; }
      #evergreen:checked ~ .roof { color: #4f7b59; }
      #slate_blue:checked ~ .roof { color: #566c80; }
      #gallery_blue:checked ~ .roof { color: #1e4269; }
      #barn_red:checked ~ .roof { color: #9f0a03; }
      #brite_red:checked ~ .roof { color: #ff0000; }
      #burgundy:checked ~ .roof { color: #6f0312; }
      #brite_white:checked ~ .roof { color: #f9f9f9; }
      #white:checked ~ .roof { color: #e1e1e1; }
      #galvalume:checked ~ .roof { color: #b0b1b2; }
      #copper_penny:checked ~ .roof { color: #b5894a; }
      #ut_orange:checked ~ .roof { color: #F77f00; }
      #r23:checked ~ .roof { color: #af5533; }
      #r24:checked ~ .roof { color: #b5b2c5; }

      div.showcase {
         float: left;
         position: relative;
         width: 100%;
         padding: 0;
         margin: 10px auto;
         border: solid 1px #000000;
      }
      div.showcase img {
         width: 100%;
         height: auto;
      }
      div.showcase .roof {
         position: absolute;
         /*top: 124px;
         left: 58px;*/
         top: 22.5%;
         left: 5.5%;
         width: 91.5%;
         height: auto;
         fill: transparent;
         stroke: transparent;
         stroke-width: 1;
         transition: all 1.5s ease-in-out 0s;
         mix-blend-mode: multiply;
         /*border: solid 1px red;*/
      }
   </style>
</head>
 
<body>
   <h1>All Styles Metal Sales Roof Visualizer</h1>
   <p>Pick a color from the above buttons to see how each color would appear. Colors will vary because of different computer monitors and settings. Please request a color chart for a true color match.</p>

   <!-- roof visualizer starts -->
   <div id="metal_roof_visualizer" class="visualizer">

       <!-- metal roof color selector starts -->
       <div id="roof_color_selections" class="color-selections">
          <label for="no_color" title="none">&nbsp;</label>
          <label for="earth_brown" title="Earth Brown">&nbsp;</label>
          <label for="black" title="Black">&nbsp;</label>
          <label for="charcoal_gray" title="Charcoal Gray">&nbsp;</label>
          <label for="pewter_gray" title="Pewter Gray">&nbsp;</label>
          <label for="burnished_slate" title="Burnished Slate">&nbsp;</label>
          <label for="light_stone" title="Light Stone">&nbsp;</label>
          <label for="tan" title="Tan">&nbsp;</label>
          <label for="ivy_green" title="Ivy Green">&nbsp;</label>
          <label for="dark_red" title="Dark Red">&nbsp;</label>
          <label for="clay" title="Clay">&nbsp;</label>
          <label for="evergreen" title="Evergreen">&nbsp;</label>
          <label for="slate_blue" title="Slate Blue">&nbsp;</label>
          <label for="gallery_blue" title="Gallery Blue">&nbsp;</label>
          <label for="barn_red" title="Barn Red">&nbsp;</label>
          <label for="brite_red" title="Brite Red">&nbsp;</label>
          <label for="burgundy" title="Burgundy">&nbsp;</label>
          <label for="brite_white" title="Brite White">&nbsp;</label>
          <label for="white" title="White">&nbsp;</label>
          <label for="galvalume" title="Galvalume">&nbsp;</label>
          <label for="copper_penny" title="Copper Penny">&nbsp;</label>
          <label for="ut_orange" title="UT Orange">&nbsp;</label>
          <label for="r23" title="color not available">&nbsp;</label>
          <label for="r24" title="color not available">&nbsp;</label>
       </div>
       <!-- metal roof color selector ends -->

       <!-- metal roof color showcase starts -->
       <div id="roof_color_showcase" class="showcase">

         <!-- input fields must remain in same container as svg viewbox -->
         <input type="radio" name="color" id="no_color" checked="checked" >
         <input type="radio" name="color" id="earth_brown" >
         <input type="radio" name="color" id="black" >
         <input type="radio" name="color" id="charcoal_gray" >
         <input type="radio" name="color" id="pewter_gray" >
         <input type="radio" name="color" id="burnished_slate" >
         <input type="radio" name="color" id="light_stone" >
         <input type="radio" name="color" id="tan" >
         <input type="radio" name="color" id="ivy_green" >
         <input type="radio" name="color" id="dark_red" >
         <input type="radio" name="color" id="clay" >
         <input type="radio" name="color" id="evergreen" >
         <input type="radio" name="color" id="slate_blue" >
         <input type="radio" name="color" id="gallery_blue" >
         <input type="radio" name="color" id="barn_red" >
         <input type="radio" name="color" id="brite_red" >
         <input type="radio" name="color" id="burgundy" >
         <input type="radio" name="color" id="brite_white" >
         <input type="radio" name="color" id="white" >
         <input type="radio" name="color" id="galvalume" >
         <input type="radio" name="color" id="copper_penny" >
         <input type="radio" name="color" id="ut_orange" >
         <input type="radio" name="color" id="r23" >
         <input type="radio" name="color" id="r24" >
         <!-- input fields must remain in same container as svg viewbox -->

         <!-- image and vectors start -->
         <img src="house2.png" alt="image of a farm house with a metal roof">
         <svg version="1.1" viewBox="0 0 791 165" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"  class="roof"><path style="fill:currentColor" d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path></svg>
         <!-- image and vectors end -->
       </div>
       <!-- metal roof color showcase ends -->
       <br>
   </div>
   <!-- roof visualizer ends -->

   <!-- website copyright starts -->
   <div id="copyright">
   Copyright &copy; 2023 <a href="#">[your-website.com]</a><br>All Rights Reserved!
   </div>
   <!-- website copyright ends -->

</body>
</html>

4. Paste the code into the "metal_roof_visualizer.html" file and save the changes.
5. Upload the file to your server.

Here are some notes for adding, removing or realigning color selections.

Code:

Metal Roof Visualizer Notes
=================================
Note: The Visualizer will not work in legcy(older) browsers.


In the "Visualizer Styles" section of the embedded styles you'll see the following rule:

      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }

This is just meant to show that the roof vector remains proprtional even when reduced in size. It uses percentages, with the color options using "px" sizes to maintain the spacing etc. To have it fit nicely to the overall document simply change the "20" percent to "96" and save the change, as shown below:

      div.visualizer {
         width: 96%;
         margin: 10px auto;
      }

You can run the page and resize it to see the changes and test it at different widths.

The radio input field id's were changed to the actual name of the color they represent just in case you want to realign them, but there are some things you need to know about how they and the styling rules work.

 1. The radio input fields "must remain in the same container as the image and
    roof vector" in order to work correctly.

 2. The radio input 'id' attribute should identify the color it represents for
    accessibility reasons. The 'for' attribute in the color selection label
    should connect to the correct radio input.

 3. In the "radio selected color" section of the embedded styles, each color rule
    is connected to the id of the color they represent.
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }

 4. In the "color selection labels" section of the embedded styles, each color
    is applied as a comment at the end of the rule.
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/

I'm showing you this for two reasons.
 reason #1: The last 2 input fields did not include the color they represent so each label,
            and styling rule uses the "r[#]" association. The 'title' attribute in the labels
            for these items simply says, "color not available".

 reason #2: In most cases coders are normally consistant in how they do things. This being
            said, in case you descide to add, remove or realign the color selection labels,
            then the same should be done with the radio inputs and styling rules. The main
            rules to pay attention to are the "div.color-selections label". Particularly
            the "label:nth-of-type(#)" portion. This controls the order for the background
            colors that are applied to the color selection lables. The numbering should
            remain sequential. So if you change the display order of the color selection
            labels then you must change the order of the rules to match (Hence the
            commented colors) then re-number the "nth-of-type(#)" to keep things working
            correctly.

Have fun!

bethloudin · Jul 18, 2023

c1lonewolf said:

OK here you go... this works in one of my newest firefox browsers but I don't know the why or the how exactly. I've also included some notes for you to copy and save to help you out with the object.

1. Open NotePad on your computer. Or use any plain text editor.
2. Create a new file and save it as "metal_roof_visualizer.html".
3. Copy the following code to the clipboard.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-----------------------------------------
FileName:    metall_roof_visualizer.html
FileCreated: 2023.07.15
FileUpdated: 2023.07.15
Modifications by: c1lonewolf
Changes:
Eleminated a lot of excess coding and external css.
Changed doctype to remove space at bottom of showcase.
Uses mostly percentages for object resizing.
Changed the id's of all radio inputs to the actual color
they represent and adjusted the styling rules to match.
------------------------------------------>
<head><title>Metal Roof Visualizer</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style type="text/css">
      body { text-align: center; }
      input[type="radio"]{
          position: absolute;
          top:-40px;
          visibility:hidden;
      }
      br { clear: both; }


      /*------------------------------------*/
      /*      Visualizer Styles Start       */
      /*------------------------------------*/
      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }
      div.color-selections {
         padding: 0;
      }
      div.color-selections label {
         display: inline-block;
         width: 20px;
         height: 20px;
         text-align: center;
         margin: 0.25em 0.25em;
         cursor: pointer;
         border: 1px solid black;
         border-radius: 50%;
         box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5) inset;
      }

      /*----- color selection labels --*/
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/
      div.color-selections label:nth-of-type(3) { background-color: #000000; }/*black*/
      div.color-selections label:nth-of-type(4) { background-color: #4b4542; }/*charcoal_gray*/
      div.color-selections label:nth-of-type(5) { background-color: #a1a1a6; }/*pewter_gray*/
      div.color-selections label:nth-of-type(6) { background-color: #795f57; }/*burnished_slate*/
      div.color-selections label:nth-of-type(7) { background-color: #ede2cd; }/*light_stone*/
      div.color-selections label:nth-of-type(8) { background-color: #b99c75; }/*tan*/
      div.color-selections label:nth-of-type(9) { background-color: #35613e; }/*ivy_green*/
      div.color-selections label:nth-of-type(10) { background-color: #940213; }/*dark_red*/
      div.color-selections label:nth-of-type(11) { background-color: #ab9378; }/*clay*/
      div.color-selections label:nth-of-type(12) { background-color: #4f7b59; }/*evergreen*/
      div.color-selections label:nth-of-type(13) { background-color: #566c80; }/*slate_blue*/
      div.color-selections label:nth-of-type(14) { background-color: #1e4269; }/*gallery_blue*/
      div.color-selections label:nth-of-type(15) { background-color: #9f0a03; }/*barn_red*/
      div.color-selections label:nth-of-type(16) { background-color: #ff0000; }/*brite_red*/
      div.color-selections label:nth-of-type(17) { background-color: #6f0312; }/*burgundy*/
      div.color-selections label:nth-of-type(18) { background-color: #f9f9f9; }/*brite_white*/
      div.color-selections label:nth-of-type(19) { background-color: #e1e1e1; }/*white*/
      div.color-selections label:nth-of-type(20) { background-color: #b0b1b2; }/*galvalume*/
      div.color-selections label:nth-of-type(21) { background-color: #a57a45; }/*copper_penny*/
      div.color-selections label:nth-of-type(22) { background-color: #F77f00; }/*ut_orange*/
      div.color-selections label:nth-of-type(23) { background-color: #af5533; }/*r23*/
      div.color-selections label:nth-of-type(24) { background-color: #b5b2c5; }/*r24*/

      /*----- radio selected color --*/
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }
      #black:checked ~ .roof { color: #000000; }
      #charcoal_gray:checked ~ .roof { color: #4b4542; }
      #pewter_gray:checked ~ .roof { color: #a1a1a6; }
      #burnished_slate:checked ~ .roof { color: #795f57; }
      #light_stone:checked ~ .roof { color: #ede2cd; }
      #tan:checked ~ .roof { color: #b99c75; }
      #ivy_green:checked ~ .roof { color: #35613e; }
      #dark_red:checked ~ .roof { color: #940213; }
      #clay:checked ~ .roof { color: #ab9378; }
      #evergreen:checked ~ .roof { color: #4f7b59; }
      #slate_blue:checked ~ .roof { color: #566c80; }
      #gallery_blue:checked ~ .roof { color: #1e4269; }
      #barn_red:checked ~ .roof { color: #9f0a03; }
      #brite_red:checked ~ .roof { color: #ff0000; }
      #burgundy:checked ~ .roof { color: #6f0312; }
      #brite_white:checked ~ .roof { color: #f9f9f9; }
      #white:checked ~ .roof { color: #e1e1e1; }
      #galvalume:checked ~ .roof { color: #b0b1b2; }
      #copper_penny:checked ~ .roof { color: #b5894a; }
      #ut_orange:checked ~ .roof { color: #F77f00; }
      #r23:checked ~ .roof { color: #af5533; }
      #r24:checked ~ .roof { color: #b5b2c5; }

      div.showcase {
         float: left;
         position: relative;
         width: 100%;
         padding: 0;
         margin: 10px auto;
         border: solid 1px #000000;
      }
      div.showcase img {
         width: 100%;
         height: auto;
      }
      div.showcase .roof {
         position: absolute;
         /*top: 124px;
         left: 58px;*/
         top: 22.5%;
         left: 5.5%;
         width: 91.5%;
         height: auto;
         fill: transparent;
         stroke: transparent;
         stroke-width: 1;
         transition: all 1.5s ease-in-out 0s;
         mix-blend-mode: multiply;
         /*border: solid 1px red;*/
      }
   </style>
</head>
 
<body>
   <h1>All Styles Metal Sales Roof Visualizer</h1>
   <p>Pick a color from the above buttons to see how each color would appear. Colors will vary because of different computer monitors and settings. Please request a color chart for a true color match.</p>

   <!-- roof visualizer starts -->
   <div id="metal_roof_visualizer" class="visualizer">

       <!-- metal roof color selector starts -->
       <div id="roof_color_selections" class="color-selections">
          <label for="no_color" title="none">&nbsp;</label>
          <label for="earth_brown" title="Earth Brown">&nbsp;</label>
          <label for="black" title="Black">&nbsp;</label>
          <label for="charcoal_gray" title="Charcoal Gray">&nbsp;</label>
          <label for="pewter_gray" title="Pewter Gray">&nbsp;</label>
          <label for="burnished_slate" title="Burnished Slate">&nbsp;</label>
          <label for="light_stone" title="Light Stone">&nbsp;</label>
          <label for="tan" title="Tan">&nbsp;</label>
          <label for="ivy_green" title="Ivy Green">&nbsp;</label>
          <label for="dark_red" title="Dark Red">&nbsp;</label>
          <label for="clay" title="Clay">&nbsp;</label>
          <label for="evergreen" title="Evergreen">&nbsp;</label>
          <label for="slate_blue" title="Slate Blue">&nbsp;</label>
          <label for="gallery_blue" title="Gallery Blue">&nbsp;</label>
          <label for="barn_red" title="Barn Red">&nbsp;</label>
          <label for="brite_red" title="Brite Red">&nbsp;</label>
          <label for="burgundy" title="Burgundy">&nbsp;</label>
          <label for="brite_white" title="Brite White">&nbsp;</label>
          <label for="white" title="White">&nbsp;</label>
          <label for="galvalume" title="Galvalume">&nbsp;</label>
          <label for="copper_penny" title="Copper Penny">&nbsp;</label>
          <label for="ut_orange" title="UT Orange">&nbsp;</label>
          <label for="r23" title="color not available">&nbsp;</label>
          <label for="r24" title="color not available">&nbsp;</label>
       </div>
       <!-- metal roof color selector ends -->

       <!-- metal roof color showcase starts -->
       <div id="roof_color_showcase" class="showcase">

         <!-- input fields must remain in same container as svg viewbox -->
         <input type="radio" name="color" id="no_color" checked="checked" >
         <input type="radio" name="color" id="earth_brown" >
         <input type="radio" name="color" id="black" >
         <input type="radio" name="color" id="charcoal_gray" >
         <input type="radio" name="color" id="pewter_gray" >
         <input type="radio" name="color" id="burnished_slate" >
         <input type="radio" name="color" id="light_stone" >
         <input type="radio" name="color" id="tan" >
         <input type="radio" name="color" id="ivy_green" >
         <input type="radio" name="color" id="dark_red" >
         <input type="radio" name="color" id="clay" >
         <input type="radio" name="color" id="evergreen" >
         <input type="radio" name="color" id="slate_blue" >
         <input type="radio" name="color" id="gallery_blue" >
         <input type="radio" name="color" id="barn_red" >
         <input type="radio" name="color" id="brite_red" >
         <input type="radio" name="color" id="burgundy" >
         <input type="radio" name="color" id="brite_white" >
         <input type="radio" name="color" id="white" >
         <input type="radio" name="color" id="galvalume" >
         <input type="radio" name="color" id="copper_penny" >
         <input type="radio" name="color" id="ut_orange" >
         <input type="radio" name="color" id="r23" >
         <input type="radio" name="color" id="r24" >
         <!-- input fields must remain in same container as svg viewbox -->

         <!-- image and vectors start -->
         <img src="house2.png" alt="image of a farm house with a metal roof">
         <svg version="1.1" viewBox="0 0 791 165" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"  class="roof"><path style="fill:currentColor" d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path></svg>
         <!-- image and vectors end -->
       </div>
       <!-- metal roof color showcase ends -->
       <br>
   </div>
   <!-- roof visualizer ends -->

   <!-- website copyright starts -->
   <div id="copyright">
   Copyright &copy; 2023 <a href="#">[your-website.com]</a><br>All Rights Reserved!
   </div>
   <!-- website copyright ends -->

</body>
</html>

4. Paste the code into the "metal_roof_visualizer.html" file and save the changes.
5. Upload the file to your server.

Here are some notes for adding, removing or realigning color selections.

Code:

Metal Roof Visualizer Notes
=================================
Note: The Visualizer will not work in legcy(older) browsers.


In the "Visualizer Styles" section of the embedded styles you'll see the following rule:

      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }

This is just meant to show that the roof vector remains proprtional even when reduced in size. It uses percentages, with the color options using "px" sizes to maintain the spacing etc. To have it fit nicely to the overall document simply change the "20" percent to "96" and save the change, as shown below:

      div.visualizer {
         width: 96%;
         margin: 10px auto;
      }

You can run the page and resize it to see the changes and test it at different widths.

The radio input field id's were changed to the actual name of the color they represent just in case you want to realign them, but there are some things you need to know about how they and the styling rules work.

 1. The radio input fields "must remain in the same container as the image and
    roof vector" in order to work correctly.

 2. The radio input 'id' attribute should identify the color it represents for
    accessibility reasons. The 'for' attribute in the color selection label
    should connect to the correct radio input.

 3. In the "radio selected color" section of the embedded styles, each color rule
    is connected to the id of the color they represent.
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }

 4. In the "color selection labels" section of the embedded styles, each color
    is applied as a comment at the end of the rule.
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/

I'm showing you this for two reasons.
 reason #1: The last 2 input fields did not include the color they represent so each label,
            and styling rule uses the "r[#]" association. The 'title' attribute in the labels
            for these items simply says, "color not available".

 reason #2: In most cases coders are normally consistant in how they do things. This being
            said, in case you descide to add, remove or realign the color selection labels,
            then the same should be done with the radio inputs and styling rules. The main
            rules to pay attention to are the "div.color-selections label". Particularly
            the "label:nth-of-type(#)" portion. This controls the order for the background
            colors that are applied to the color selection lables. The numbering should
            remain sequential. So if you change the display order of the color selection
            labels then you must change the order of the rules to match (Hence the
            commented colors) then re-number the "nth-of-type(#)" to keep things working
            correctly.

Have fun!

Omg thank you so much and I'm definitely studying this!! I really appreciate you.

VBService · Jul 18, 2023

Here's my propose of modify your code ...
If you want to add, delete or edit button color, just operate on this array only.

JavaScript:

            const colors = [
                { title:'earth brown',     color:'#854131' },
                { title:'black',           color:'#000000' },
                { title:'charcoal gray',   color:'#4b4542' },
                { title:'pewter gray',     color:'#a1a1a6' },
                { title:'burnished slate', color:'#795f57' },
                { title:'light stone',     color:'#ede2cd' },
                { title:'tan',             color:'#b99c75' },
                { title:'ivy green',       color:'#35613e' },
                { title:'dark red',        color:'#940213' },
                { title:'clay',            color:'#ab9378' },
                { title:'evergreen',       color:'#4f7b59' },
                { title:'slate blue',      color:'#566c80' },
                { title:'gallery blue',    color:'#1e4269' },
                { title:'barn red',        color:'#9f0a03' },
                { title:'brite red',       color:'#ff0000' },
                { title:'burgundy',        color:'#6f0312' },
                { title:'brite white',     color:'#e9e9e9' },
                { title:'white',           color:'#fefefe' },
                { title:'galvalume',       color:'#b0b1b2' },
                { title:'copper penny',    color:'#a57a45' },
                { title:'ut orange',       color:'#F77f00' },
                { title:'r23',             color:'#af5533' },
                { title:'r24',             color:'#b5b2c5' }
            ];

full code ...

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Metal Roof Visualizer</title>

        <style>
            :root {
                --button-background-1st-color: transparent;
                --roof-color-transition-time: 1.5s;
            }
            body {
                margin: 2rem 0;
                padding: 0;
                background-color: whitesmoke;
            }
            .main-container {
                display: flex;
                flex-direction: column;
                width: 95vw;
                margin-inline: auto;
            }
            h3, p {
                text-align: center;
            }
            .color-button-container {
                display: flex;
                flex-wrap: wrap;
                gap: .5em;
                margin: 3rem 0;
            }
            .color-button-container button {
                flex: 0 0 auto;
                width: 4em;
                aspect-ratio: 1;
                margin: .25em .25em;
                cursor: pointer;
                border: none;
                border-radius: 50%;
                background-image: radial-gradient(circle, transparent 0%, var(--button-background-1st-color) 65%);
                box-shadow: 0px 0px .65em rgba(110, 110, 110, .8) inset;
            }
            .color-button-container .hide {
                background-image: none;
                box-shadow: 0px 0px .15em rgba(110, 110, 110, .8) inset;
            }
            .roof-container {
                position: relative;
                width: 80vw;
                border: .25em solid hsl(0 0% 0% / .4);
                overflow: hidden;
                border-radius: .5em;
                margin-inline: auto;
                transition: border-color calc(var(--roof-color-transition-time) / 2) ease-in-out;
            }
            .roof-container img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            .roof-container .roof {
                position: absolute;
                top: 22.5%;
                left: 5.5%;
                width: 91.5%;
                height: auto;
                fill: transparent;
                stroke: transparent;
                stroke-width: 1;
                mix-blend-mode: multiply;
                color: var(--button-background-1st-color);
                fill: currentColor;
                transition: all var(--roof-color-transition-time) ease-in-out;
            }
            .roof-container .roof-title {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
                background-color: hsl(0 0% 0% / .8);
                font: 500 clamp(.95rem, 1.35vw, 1.2rem)/1.6 system-ui, monospace;
                color: white;
                transition: background-color calc(var(--roof-color-transition-time) / 2) ease-in-out;
            }

            @media (width < 800px) {
                .roof-container {
                    width: 80vw;
                }
                .color-button-container button {
                    width: 2.1em;
                }
            }
        </style>
    </head>
    <body>

        <div class="main-container">
            <h3>All Styles Metal Sales Roof Visualizer</h3>
            <p>Pick a color from the above buttons to see how each color would appear. Colors will vary because of different computer monitors and settings. Please request a color chart for a true color match.</p>

            <div class="color-button-container">
                <!-- #r1 -->
                <button title="Hide" class="hide" style="--button-background-1st-color: transparent;"></button>
            </div>
            <div class="roof-container">
                <img src="house2.png" alt="picture description">
                <svg version="1.1" class="roof" viewBox="0 0 791 165">
                    <path d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path>
                </svg>
                <div class="roof-title"></div>
            </div>
        </div>

        <script>
            const colors = [
                { title:'earth brown',     color:'#854131' }, // #r2
                { title:'black',           color:'#000000' }, // #r3
                { title:'charcoal gray',   color:'#4b4542' }, // etc.
                { title:'pewter gray',     color:'#a1a1a6' },
                { title:'burnished slate', color:'#795f57' },
                { title:'light stone',     color:'#ede2cd' },
                { title:'tan',             color:'#b99c75' },
                { title:'ivy green',       color:'#35613e' },
                { title:'dark red',        color:'#940213' },
                { title:'clay',            color:'#ab9378' },
                { title:'evergreen',       color:'#4f7b59' },
                { title:'slate blue',      color:'#566c80' },
                { title:'gallery blue',    color:'#1e4269' },
                { title:'barn red',        color:'#9f0a03' },
                { title:'brite red',       color:'#ff0000' },
                { title:'burgundy',        color:'#6f0312' },
                { title:'brite white',     color:'#e9e9e9' },
                { title:'white',           color:'#fefefe' },
                { title:'galvalume',       color:'#b0b1b2' },
                { title:'copper penny',    color:'#a57a45' },
                { title:'ut orange',       color:'#F77f00' },
                { title:'r23',             color:'#af5533' },
                { title:'r24',             color:'#b5b2c5' }
            ];

            window.onload = () => {
                const buttons = document.querySelector('.color-button-container');
                const    roof = document.querySelector('.roof-container');

                const button_html = document.createDocumentFragment();
                for (color of colors) {
                    const button = document.createElement('button');
                    button.style = `--button-background-1st-color: ${color.color}`;
                    button.title = color.title.charAt(0).toUpperCase() + color.title.slice(1);
                    button_html.appendChild(button);
                }
                buttons.appendChild(button_html);

                buttons.onclick = (e) => {
                    if (e.target.matches('button')) { // Event Delegation
                        const color = e.target.style.getPropertyValue('--button-background-1st-color');
                        roof.querySelector('.roof').style.color = color;
                        roof.style.borderColor = color;

                        if (color.toLowerCase() !== 'transparent') {
                            roof.querySelector('.roof-title').style.backgroundColor = color + '80';
                            roof.querySelector('.roof-title').textContent = e.target.title;
                        } else {
                            roof.querySelector('.roof-title').style.backgroundColor = 'transparent';
                            roof.querySelector('.roof-title').textContent = null;
                        }
                    }
                }
            }
        </script>
    </body>
</html>

... and layout is more responsive.

When you use an element <button>
you can use keys from keyboard e.g TAB or TAB+SHIFT and ENTER

bethloudin · Jul 19, 2023

VBService said:

Here's my propose of modify your code ...
If you want to add, delete or edit button color, just operate on this array only.

JavaScript:

            const colors = [
                { title:'earth brown',     color:'#854131' },
                { title:'black',           color:'#000000' },
                { title:'charcoal gray',   color:'#4b4542' },
                { title:'pewter gray',     color:'#a1a1a6' },
                { title:'burnished slate', color:'#795f57' },
                { title:'light stone',     color:'#ede2cd' },
                { title:'tan',             color:'#b99c75' },
                { title:'ivy green',       color:'#35613e' },
                { title:'dark red',        color:'#940213' },
                { title:'clay',            color:'#ab9378' },
                { title:'evergreen',       color:'#4f7b59' },
                { title:'slate blue',      color:'#566c80' },
                { title:'gallery blue',    color:'#1e4269' },
                { title:'barn red',        color:'#9f0a03' },
                { title:'brite red',       color:'#ff0000' },
                { title:'burgundy',        color:'#6f0312' },
                { title:'brite white',     color:'#e9e9e9' },
                { title:'white',           color:'#fefefe' },
                { title:'galvalume',       color:'#b0b1b2' },
                { title:'copper penny',    color:'#a57a45' },
                { title:'ut orange',       color:'#F77f00' },
                { title:'r23',             color:'#af5533' },
                { title:'r24',             color:'#b5b2c5' }
            ];

full code ...

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Metal Roof Visualizer</title>

        <style>
            :root {
                --button-background-1st-color: transparent;
                --roof-color-transition-time: 1.5s;
            }
            body {
                margin: 2rem 0;
                padding: 0;
                background-color: whitesmoke;
            }
            .main-container {
                display: flex;
                flex-direction: column;
                width: 95vw;
                margin-inline: auto;
            }
            h3, p {
                text-align: center;
            }
            .color-button-container {
                display: flex;
                flex-wrap: wrap;
                gap: .5em;
                margin: 3rem 0;
            }
            .color-button-container button {
                flex: 0 0 auto;
                width: 4em;
                aspect-ratio: 1;
                margin: .25em .25em;
                cursor: pointer;
                border: none;
                border-radius: 50%;
                background-image: radial-gradient(circle, transparent 0%, var(--button-background-1st-color) 65%);
                box-shadow: 0px 0px .65em rgba(110, 110, 110, .8) inset;
            }
            .color-button-container .hide {
                background-image: none;
                box-shadow: 0px 0px .15em rgba(110, 110, 110, .8) inset;
            }
            .roof-container {
                position: relative;
                width: 80vw;
                border: .25em solid hsl(0 0% 0% / .4);
                overflow: hidden;
                border-radius: .5em;
                margin-inline: auto;
                transition: border-color calc(var(--roof-color-transition-time) / 2) ease-in-out;
            }
            .roof-container img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            .roof-container .roof {
                position: absolute;
                top: 22.5%;
                left: 5.5%;
                width: 91.5%;
                height: auto;
                fill: transparent;
                stroke: transparent;
                stroke-width: 1;
                mix-blend-mode: multiply;
                color: var(--button-background-1st-color);
                fill: currentColor;
                transition: all var(--roof-color-transition-time) ease-in-out;
            }
            .roof-container .roof-title {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
                background-color: hsl(0 0% 0% / .8);
                font: 500 clamp(.95rem, 1.35vw, 1.2rem)/1.6 system-ui, monospace;
                color: white;
                transition: background-color calc(var(--roof-color-transition-time) / 2) ease-in-out;
            }

            @media (width < 800px) {
                .roof-container {
                    width: 80vw;
                }
                .color-button-container button {
                    width: 2.1em;
                }
            }
        </style>
    </head>
    <body>

        <div class="main-container">
            <h3>All Styles Metal Sales Roof Visualizer</h3>
            <p>Pick a color from the above buttons to see how each color would appear. Colors will vary because of different computer monitors and settings. Please request a color chart for a true color match.</p>

            <div class="color-button-container">
                <!-- #r1 -->
                <button title="Hide" class="hide" style="--button-background-1st-color: transparent;"></button>
            </div>
            <div class="roof-container">
                <img src="house2.png" alt="picture description">
                <svg version="1.1" class="roof" viewBox="0 0 791 165">
                    <path d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path>
                </svg>
                <div class="roof-title"></div>
            </div>
        </div>

        <script>
            const colors = [
                { title:'earth brown',     color:'#854131' }, // #r2
                { title:'black',           color:'#000000' }, // #r3
                { title:'charcoal gray',   color:'#4b4542' }, // etc.
                { title:'pewter gray',     color:'#a1a1a6' },
                { title:'burnished slate', color:'#795f57' },
                { title:'light stone',     color:'#ede2cd' },
                { title:'tan',             color:'#b99c75' },
                { title:'ivy green',       color:'#35613e' },
                { title:'dark red',        color:'#940213' },
                { title:'clay',            color:'#ab9378' },
                { title:'evergreen',       color:'#4f7b59' },
                { title:'slate blue',      color:'#566c80' },
                { title:'gallery blue',    color:'#1e4269' },
                { title:'barn red',        color:'#9f0a03' },
                { title:'brite red',       color:'#ff0000' },
                { title:'burgundy',        color:'#6f0312' },
                { title:'brite white',     color:'#e9e9e9' },
                { title:'white',           color:'#fefefe' },
                { title:'galvalume',       color:'#b0b1b2' },
                { title:'copper penny',    color:'#a57a45' },
                { title:'ut orange',       color:'#F77f00' },
                { title:'r23',             color:'#af5533' },
                { title:'r24',             color:'#b5b2c5' }
            ];

            window.onload = () => {
                const buttons = document.querySelector('.color-button-container');
                const    roof = document.querySelector('.roof-container');

                const button_html = document.createDocumentFragment();
                for (color of colors) {
                    const button = document.createElement('button');
                    button.style = `--button-background-1st-color: ${color.color}`;
                    button.title = color.title.charAt(0).toUpperCase() + color.title.slice(1);
                    button_html.appendChild(button);
                }
                buttons.appendChild(button_html);

                buttons.onclick = (e) => {
                    if (e.target.matches('button')) { // Event Delegation
                        const color = e.target.style.getPropertyValue('--button-background-1st-color');
                        roof.querySelector('.roof').style.color = color;
                        roof.style.borderColor = color;

                        if (color.toLowerCase() !== 'transparent') {
                            roof.querySelector('.roof-title').style.backgroundColor = color + '80';
                            roof.querySelector('.roof-title').textContent = e.target.title;
                        } else {
                            roof.querySelector('.roof-title').style.backgroundColor = 'transparent';
                            roof.querySelector('.roof-title').textContent = null;
                        }
                    }
                }
            }
        </script>
    </body>
</html>

... and layout is more responsive.

When you use an element <button>
you can use keys from keyboard e.g TAB or TAB+SHIFT and ENTER

Thank you so much I really appreciate you both I'll get these saved today.

bethloudin · Jul 19, 2023

c1lonewolf said:

OK here you go... this works in one of my newest firefox browsers but I don't know the why or the how exactly. I've also included some notes for you to copy and save to help you out with the object.

1. Open NotePad on your computer. Or use any plain text editor.
2. Create a new file and save it as "metal_roof_visualizer.html".
3. Copy the following code to the clipboard.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-----------------------------------------
FileName:    metall_roof_visualizer.html
FileCreated: 2023.07.15
FileUpdated: 2023.07.15
Modifications by: c1lonewolf
Changes:
Eleminated a lot of excess coding and external css.
Changed doctype to remove space at bottom of showcase.
Uses mostly percentages for object resizing.
Changed the id's of all radio inputs to the actual color
they represent and adjusted the styling rules to match.
------------------------------------------>
<head><title>Metal Roof Visualizer</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style type="text/css">
      body { text-align: center; }
      input[type="radio"]{
          position: absolute;
          top:-40px;
          visibility:hidden;
      }
      br { clear: both; }


      /*------------------------------------*/
      /*      Visualizer Styles Start       */
      /*------------------------------------*/
      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }
      div.color-selections {
         padding: 0;
      }
      div.color-selections label {
         display: inline-block;
         width: 20px;
         height: 20px;
         text-align: center;
         margin: 0.25em 0.25em;
         cursor: pointer;
         border: 1px solid black;
         border-radius: 50%;
         box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5) inset;
      }

      /*----- color selection labels --*/
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/
      div.color-selections label:nth-of-type(3) { background-color: #000000; }/*black*/
      div.color-selections label:nth-of-type(4) { background-color: #4b4542; }/*charcoal_gray*/
      div.color-selections label:nth-of-type(5) { background-color: #a1a1a6; }/*pewter_gray*/
      div.color-selections label:nth-of-type(6) { background-color: #795f57; }/*burnished_slate*/
      div.color-selections label:nth-of-type(7) { background-color: #ede2cd; }/*light_stone*/
      div.color-selections label:nth-of-type(8) { background-color: #b99c75; }/*tan*/
      div.color-selections label:nth-of-type(9) { background-color: #35613e; }/*ivy_green*/
      div.color-selections label:nth-of-type(10) { background-color: #940213; }/*dark_red*/
      div.color-selections label:nth-of-type(11) { background-color: #ab9378; }/*clay*/
      div.color-selections label:nth-of-type(12) { background-color: #4f7b59; }/*evergreen*/
      div.color-selections label:nth-of-type(13) { background-color: #566c80; }/*slate_blue*/
      div.color-selections label:nth-of-type(14) { background-color: #1e4269; }/*gallery_blue*/
      div.color-selections label:nth-of-type(15) { background-color: #9f0a03; }/*barn_red*/
      div.color-selections label:nth-of-type(16) { background-color: #ff0000; }/*brite_red*/
      div.color-selections label:nth-of-type(17) { background-color: #6f0312; }/*burgundy*/
      div.color-selections label:nth-of-type(18) { background-color: #f9f9f9; }/*brite_white*/
      div.color-selections label:nth-of-type(19) { background-color: #e1e1e1; }/*white*/
      div.color-selections label:nth-of-type(20) { background-color: #b0b1b2; }/*galvalume*/
      div.color-selections label:nth-of-type(21) { background-color: #a57a45; }/*copper_penny*/
      div.color-selections label:nth-of-type(22) { background-color: #F77f00; }/*ut_orange*/
      div.color-selections label:nth-of-type(23) { background-color: #af5533; }/*r23*/
      div.color-selections label:nth-of-type(24) { background-color: #b5b2c5; }/*r24*/

      /*----- radio selected color --*/
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }
      #black:checked ~ .roof { color: #000000; }
      #charcoal_gray:checked ~ .roof { color: #4b4542; }
      #pewter_gray:checked ~ .roof { color: #a1a1a6; }
      #burnished_slate:checked ~ .roof { color: #795f57; }
      #light_stone:checked ~ .roof { color: #ede2cd; }
      #tan:checked ~ .roof { color: #b99c75; }
      #ivy_green:checked ~ .roof { color: #35613e; }
      #dark_red:checked ~ .roof { color: #940213; }
      #clay:checked ~ .roof { color: #ab9378; }
      #evergreen:checked ~ .roof { color: #4f7b59; }
      #slate_blue:checked ~ .roof { color: #566c80; }
      #gallery_blue:checked ~ .roof { color: #1e4269; }
      #barn_red:checked ~ .roof { color: #9f0a03; }
      #brite_red:checked ~ .roof { color: #ff0000; }
      #burgundy:checked ~ .roof { color: #6f0312; }
      #brite_white:checked ~ .roof { color: #f9f9f9; }
      #white:checked ~ .roof { color: #e1e1e1; }
      #galvalume:checked ~ .roof { color: #b0b1b2; }
      #copper_penny:checked ~ .roof { color: #b5894a; }
      #ut_orange:checked ~ .roof { color: #F77f00; }
      #r23:checked ~ .roof { color: #af5533; }
      #r24:checked ~ .roof { color: #b5b2c5; }

      div.showcase {
         float: left;
         position: relative;
         width: 100%;
         padding: 0;
         margin: 10px auto;
         border: solid 1px #000000;
      }
      div.showcase img {
         width: 100%;
         height: auto;
      }
      div.showcase .roof {
         position: absolute;
         /*top: 124px;
         left: 58px;*/
         top: 22.5%;
         left: 5.5%;
         width: 91.5%;
         height: auto;
         fill: transparent;
         stroke: transparent;
         stroke-width: 1;
         transition: all 1.5s ease-in-out 0s;
         mix-blend-mode: multiply;
         /*border: solid 1px red;*/
      }
   </style>
</head>
 
<body>
   <h1>All Styles Metal Sales Roof Visualizer</h1>
   <p>Pick a color from the above buttons to see how each color would appear. Colors will vary because of different computer monitors and settings. Please request a color chart for a true color match.</p>

   <!-- roof visualizer starts -->
   <div id="metal_roof_visualizer" class="visualizer">

       <!-- metal roof color selector starts -->
       <div id="roof_color_selections" class="color-selections">
          <label for="no_color" title="none">&nbsp;</label>
          <label for="earth_brown" title="Earth Brown">&nbsp;</label>
          <label for="black" title="Black">&nbsp;</label>
          <label for="charcoal_gray" title="Charcoal Gray">&nbsp;</label>
          <label for="pewter_gray" title="Pewter Gray">&nbsp;</label>
          <label for="burnished_slate" title="Burnished Slate">&nbsp;</label>
          <label for="light_stone" title="Light Stone">&nbsp;</label>
          <label for="tan" title="Tan">&nbsp;</label>
          <label for="ivy_green" title="Ivy Green">&nbsp;</label>
          <label for="dark_red" title="Dark Red">&nbsp;</label>
          <label for="clay" title="Clay">&nbsp;</label>
          <label for="evergreen" title="Evergreen">&nbsp;</label>
          <label for="slate_blue" title="Slate Blue">&nbsp;</label>
          <label for="gallery_blue" title="Gallery Blue">&nbsp;</label>
          <label for="barn_red" title="Barn Red">&nbsp;</label>
          <label for="brite_red" title="Brite Red">&nbsp;</label>
          <label for="burgundy" title="Burgundy">&nbsp;</label>
          <label for="brite_white" title="Brite White">&nbsp;</label>
          <label for="white" title="White">&nbsp;</label>
          <label for="galvalume" title="Galvalume">&nbsp;</label>
          <label for="copper_penny" title="Copper Penny">&nbsp;</label>
          <label for="ut_orange" title="UT Orange">&nbsp;</label>
          <label for="r23" title="color not available">&nbsp;</label>
          <label for="r24" title="color not available">&nbsp;</label>
       </div>
       <!-- metal roof color selector ends -->

       <!-- metal roof color showcase starts -->
       <div id="roof_color_showcase" class="showcase">

         <!-- input fields must remain in same container as svg viewbox -->
         <input type="radio" name="color" id="no_color" checked="checked" >
         <input type="radio" name="color" id="earth_brown" >
         <input type="radio" name="color" id="black" >
         <input type="radio" name="color" id="charcoal_gray" >
         <input type="radio" name="color" id="pewter_gray" >
         <input type="radio" name="color" id="burnished_slate" >
         <input type="radio" name="color" id="light_stone" >
         <input type="radio" name="color" id="tan" >
         <input type="radio" name="color" id="ivy_green" >
         <input type="radio" name="color" id="dark_red" >
         <input type="radio" name="color" id="clay" >
         <input type="radio" name="color" id="evergreen" >
         <input type="radio" name="color" id="slate_blue" >
         <input type="radio" name="color" id="gallery_blue" >
         <input type="radio" name="color" id="barn_red" >
         <input type="radio" name="color" id="brite_red" >
         <input type="radio" name="color" id="burgundy" >
         <input type="radio" name="color" id="brite_white" >
         <input type="radio" name="color" id="white" >
         <input type="radio" name="color" id="galvalume" >
         <input type="radio" name="color" id="copper_penny" >
         <input type="radio" name="color" id="ut_orange" >
         <input type="radio" name="color" id="r23" >
         <input type="radio" name="color" id="r24" >
         <!-- input fields must remain in same container as svg viewbox -->

         <!-- image and vectors start -->
         <img src="house2.png" alt="image of a farm house with a metal roof">
         <svg version="1.1" viewBox="0 0 791 165" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"  class="roof"><path style="fill:currentColor" d="m 746.33484,115.12569 -42.78493,-48.8743 -38.01542,37.1243 C 644.626,123.79406 623.4368,144.4375 618.44738,149.25 L 609.3757,158 H 589.18785 569 v -2.82569 c 0,-1.72109 0.97727,-3.74378 2.5,-5.17431 1.375,-1.29175 2.5,-3.39519 2.5,-4.67431 0,-2.25252 0.26843,-2.32569 8.53138,-2.32569 6.76694,0 8.65386,-0.31915 9.12354,-1.54313 0.32569,-0.84872 0.308,-1.82728 -0.0393,-2.17459 -0.66683,-0.66682 -82.01784,-4.13526 -99.16531,-4.22795 L 482.40062,135 468.08901,119.52686 453.77739,104.05372 439.80502,117.27686 425.83264,130.5 l -6.66632,-0.27298 c -16.31293,-0.66801 -106.28695,-5.21901 -111.91273,-5.66069 -5.24021,-0.41141 -6.53059,-0.18538 -8.01058,1.4032 -1.71243,1.83808 -2.19504,1.47773 -16.45698,-12.28796 L 268.09322,99.5 236.96027,52.628564 205.82732,5.7571282 193.41366,28.558706 C 186.58615,41.099574 181,52.17922 181,53.180142 181,54.733855 181.8609,55 186.88672,55 h 5.88672 l 27.61328,45.06751 C 235.57402,124.85463 248,145.39889 248,145.72142 c 0,0.6004 -5.2802,0.47807 -100.93568,-2.33837 -39.58539,-1.16553 -55.925702,-1.3262 -57.1495,-0.56193 -1.865932,1.1653 0.658401,6.2273 -31.951157,-64.07112 C 50.628666,62.9375 44.335674,50 43.979236,50 43.349383,50 29.918051,82.402996 10.919029,129.75752 4.0790723,146.80592 1.3511372,152.59193 0.7009969,151.43019 0.06687756,150.29709 6.0090276,134.54669 21.548,96.172674 33.50166,66.652703 43.371549,42.384445 43.481086,42.243211 43.590623,42.101977 72.439689,44.013041 107.59012,46.49002 142.74055,48.966999 173.075,50.982847 175,50.969683 l 3.5,-0.02394 13.66039,-25.221587 C 205.35538,1.3618779 205.91753,0.51156863 208.66039,0.76660783 210.22218,0.91182704 254.025,4.6302665 306,9.0298067 450.34615,21.248309 471.45332,23.060642 472.06828,23.288987 472.38083,23.405044 479.9969,31.375 488.99288,41 c 8.99599,9.625 20.28058,21.671108 25.07689,26.76913 l 8.72055,9.269129 26.35484,-0.325802 c 22.12512,-0.273513 30.68811,-0.847399 53.35484,-3.575808 14.85,-1.787503 31.275,-3.649471 36.5,-4.137706 5.225,-0.488235 14.675,-1.602337 21,-2.475783 C 674.5501,64.513876 698.18748,62 702.53019,62 c 3.13102,0 5.21392,2.223872 37.2303,39.75 18.65255,21.8625 37.79984,44.25 42.54952,49.75 8.06874,9.34336 10.02582,12.5 7.74987,12.5 -0.51706,0 -20.19333,-21.99344 -43.72504,-48.87431 z M 536.18788,154.27946 536.5,150.5 l 11,-0.29087 c 14.45,-0.3821 15.70921,-0.0469 15.3108,4.07518 L 562.5,157.5 l -13.31212,0.27946 -13.31212,0.27946 z"></path></svg>
         <!-- image and vectors end -->
       </div>
       <!-- metal roof color showcase ends -->
       <br>
   </div>
   <!-- roof visualizer ends -->

   <!-- website copyright starts -->
   <div id="copyright">
   Copyright &copy; 2023 <a href="#">[your-website.com]</a><br>All Rights Reserved!
   </div>
   <!-- website copyright ends -->

</body>
</html>

4. Paste the code into the "metal_roof_visualizer.html" file and save the changes.
5. Upload the file to your server.

Here are some notes for adding, removing or realigning color selections.

Code:

Metal Roof Visualizer Notes
=================================
Note: The Visualizer will not work in legcy(older) browsers.


In the "Visualizer Styles" section of the embedded styles you'll see the following rule:

      div.visualizer {
         width: 20%;
         margin: 10px auto;
      }

This is just meant to show that the roof vector remains proprtional even when reduced in size. It uses percentages, with the color options using "px" sizes to maintain the spacing etc. To have it fit nicely to the overall document simply change the "20" percent to "96" and save the change, as shown below:

      div.visualizer {
         width: 96%;
         margin: 10px auto;
      }

You can run the page and resize it to see the changes and test it at different widths.

The radio input field id's were changed to the actual name of the color they represent just in case you want to realign them, but there are some things you need to know about how they and the styling rules work.

 1. The radio input fields "must remain in the same container as the image and
    roof vector" in order to work correctly.

 2. The radio input 'id' attribute should identify the color it represents for
    accessibility reasons. The 'for' attribute in the color selection label
    should connect to the correct radio input.

 3. In the "radio selected color" section of the embedded styles, each color rule
    is connected to the id of the color they represent.
      #no_color:checked ~ .roof { color: silver; }
      #earth_brown:checked ~ .roof { color: #854131; }

 4. In the "color selection labels" section of the embedded styles, each color
    is applied as a comment at the end of the rule.
      div.color-selections label:nth-of-type(1) { background-color: silver; }/*no_color*/
      div.color-selections label:nth-of-type(2) { background-color: #854131; }/*earth_brown*/

I'm showing you this for two reasons.
 reason #1: The last 2 input fields did not include the color they represent so each label,
            and styling rule uses the "r[#]" association. The 'title' attribute in the labels
            for these items simply says, "color not available".

 reason #2: In most cases coders are normally consistant in how they do things. This being
            said, in case you descide to add, remove or realign the color selection labels,
            then the same should be done with the radio inputs and styling rules. The main
            rules to pay attention to are the "div.color-selections label". Particularly
            the "label:nth-of-type(#)" portion. This controls the order for the background
            colors that are applied to the color selection lables. The numbering should
            remain sequential. So if you change the display order of the color selection
            labels then you must change the order of the rules to match (Hence the
            commented colors) then re-number the "nth-of-type(#)" to keep things working
            correctly.

Have fun!

Is there a better program to work in than the free blue griffon one I have?

c1lonewolf · Jul 20, 2023

@VBService - the only problem with that is that it uses javascript. The original code only uses HTML and CSS meaning it would still work for those visitors who do not allow the use of javascript. However, I really don't do the so called resonsive thing with em's. My goal was to just get it working.

@bethloudin - check your other thread in the introductions section, New and trying to learn on my own, I gave you some links.')

bethloudin · Jul 20, 2023

c1lonewolf said:
@VBService - the only problem with that is that it uses javascript. The original code only uses HTML and CSS meaning it would still work for those visitors who do not allow the use of javascript. However, I really don't do the so called resonsive thing with em's. My goal was to just get it working.

@bethloudin - check your other thread in the introductions section, New and trying to learn on my own, I gave you some links.')

Thank you so much I'll get the link's now.

VBService · Jul 20, 2023

@c1lonewolf - don't get me wrong, I did not try to say that my version is better than yours, both are good in their way, my intention was to show to the OP a different way how to resolve the problem.

Both versions have their pros and cons and the choice is up to the OP anyway. IMO in programming there are always several ways to solve a problem. Nothing personal.

BTW, I'm really big fan of vanilla JavaScript and CSS.

I dont get this. Please help me!!	2	Jan 24, 2023
Positioning CSS components	1	Nov 16, 2023
"input-group-text" help	7	Aug 10, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
How can I arrange a series of radio buttons?	2	Jan 25, 2024
<div> help	1	Mar 4, 2024
Help with code	0	Jun 12, 2022
All CRUD operations work except POST. Why?	2	May 28, 2023

Help please

bethloudin

c1lonewolf

bethloudin

VBService

bethloudin

bethloudin

c1lonewolf

bethloudin

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads