Using onMessage data to draw svg path - html

In an HTML frame I want to draw a simple line graph using an svg path, to make sure it is correctly recieving the message I display the data in the span section, and to make sure I have written the code for the svg path correctly i have manually entered example data (figure 1) this works fine but when I try and use the message data in the svg path (figure 2) nothing appears, the message is correctly formatted and in this example it is "M 0 50 l 20 5 l 20 10 l 20 -20 l 20 10 l 20 -5" - exactly the same as what I manually entered for the path in figure 1.
I'm not sure what im doing wrong, I'm fairly new to coding and so I don't quite know all the basics and may have jumped in at the deep end so could therefore be overlooking something obvious, any help is greatly appreciated :).
Figure 1:
<html>
<body>
<span id="svgPath" class="label">HTML Label</span>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("svgPath").innerHTML = event.data;
}
};
</script>
<svg id="myGraph" viewBox="0 0 100 100">
<path d="M 0 50 l 20 5 l 20 10 l 20 -20 l 20 10 l 20 -5"
stroke= "black"
fill= "transparent"
/>
</svg>
</body>
</html>
Figure 2
<html>
<body>
<span id="svgPath" class="label">HTML Label
</span>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("svgPath").innerHTML = event.data;
}
};
</script>
<svg id="myGraph" viewBox="0 0 100 100">
<path d="svgPath"
stroke= "black"
fill= "transparent"
/>
</svg>
</body>
</html>

Related

How to change position of SVG path (elliptical arc) with CSS

I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>

You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>

The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>

I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");

SVG pattern set as background-image, blurry in Safari but not Firefox?

I have a SVG that I want to use as the background for a website, I made it so that the SVG itself repeats and fills up the screen. I also rotated the pattern -25 degrees in order to achieve the effect that I wanted. I took the whole SVG, encoded it using an online URL-encoder and made it the background-image of an element.
Problem:
The pattern looks great on Firefox, but on Safari, the SVG pattern looks blurry/pixelated on both macOS and iOS.
Screenshot of SVG Pattern on Firefox
Screenshot of SVG Pattern on Safari
Example up on CodePen
<svg version="1.1" id="BlackOnBlackPattern" width="100%" height="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs7"/>
<pattern id="pattern" x="0" y="0" width="512" height="512" patternTransform="rotate(-25)" patternUnits="userSpaceOnUse">
<path id="blackSquare" style="fill:#000000" d="M 0,384 V 256 H 128 256 V 128 0 H 384 512 V 128 256 H 384 256 V 384 512 H 128 0 Z" />
<path id="logoBird" style="fill:#000000;stroke-width:0.680128" d="m 129.64298,40.000872 c -9.21804,0.03838 -18.59563,1.456395 -27.85009,4.403021 C 88.498002,48.636982 77.894858,54.853476 67.654423,64.420807 50.405565,80.535864 41.234652,100.07299 40.094015,123.13291 c -1.213221,24.52736 9.377815,49.56649 28.161493,66.57969 3.057867,2.76963 7.493507,6.27893 9.856924,7.79847 5.872595,3.77573 6.702193,3.52936 8.86867,-2.63686 l 1.75857,-5.00519 0.0094,-26.02708 c 0.01049,-25.11511 0.06724,-26.21112 1.596113,-31.29034 1.942724,-6.45424 3.259875,-8.96541 7.347003,-14.00287 1.748214,-2.15469 3.178692,-4.26503 3.178692,-4.68976 0,-1.77256 -2.232527,-3.61866 -5.268931,-4.35481 -5.352708,-1.2977 -8.390585,-3.15065 -10.296911,-6.28258 -0.969515,-1.59281 -1.762633,-3.71266 -1.762633,-4.710626 0,-1.741713 0.06183,-1.772779 1.540606,-0.77554 2.011443,1.356475 13.522274,1.471495 15.393929,0.153803 2.11787,-1.491029 0.75915,-3.647459 -3.418319,-5.426211 -4.481984,-1.908443 -5.962952,-3.925071 -6.701249,-9.122771 -0.309343,-2.177873 -1.041901,-4.852565 -1.627256,-5.942377 -1.298632,-2.417897 -0.58623,-2.540303 3.549635,-0.612624 1.61468,0.752577 3.77541,2.430399 4.803231,3.727843 2.371759,2.993897 5.619358,4.908066 8.328508,4.911355 4.6624,0.0069 5.03416,-3.701391 1.00451,-10.007812 -2.9553,-4.625079 -3.87886,-8.484827 -1.55956,-6.518495 0.66714,0.565614 2.84522,1.815329 4.83977,2.777632 4.37796,2.112169 5.50175,3.634048 6.49278,8.795604 1.2003,6.251496 2.82391,8.292483 6.59698,8.292483 2.84562,0 5.81535,-2.461849 5.79964,-4.807082 -0.007,-0.842555 -0.44966,-3.332537 -0.98691,-5.531802 -0.53735,-2.199255 -0.8713,-4.099913 -0.74188,-4.224447 0.12941,-0.124524 0.90057,0.116604 1.71392,0.535716 1.73794,0.895544 2.10334,1.743493 5.30683,12.334451 1.91179,6.320658 2.86585,8.424307 4.47695,9.868342 2.648,2.373347 6.04559,2.461492 8.74547,0.225493 2.97024,-2.459893 2.67974,-5.99289 -1.06407,-12.965321 -1.64383,-3.061467 -2.82293,-5.725786 -2.62093,-5.920227 1.25067,-1.204157 17.29143,15.096115 19.8357,20.156394 1.68357,3.348439 1.84464,9.344059 0.34388,12.802389 -0.5751,1.3251 -2.13462,3.86784 -3.46572,5.65172 -1.33106,1.78385 -2.42058,3.50646 -2.42058,3.82818 0,0.32172 1.07814,2.30811 2.39486,4.41346 1.31674,2.10535 2.75411,5.5202 3.19493,7.58861 0.68757,3.2263 1.32054,4.23465 4.45535,7.09723 2.00968,1.83527 4.78314,4.78598 6.16242,6.55759 4.446,5.71057 3.01595,7.53159 -4.77075,6.07665 -6.79305,-1.26938 -10.29442,-1.20507 -11.62362,0.21237 -1.41968,1.51408 -2.85846,7.05014 -2.33796,8.99633 0.22293,0.83343 2.63244,4.21456 5.35422,7.51433 5.26001,6.37714 9.23075,13.38707 13.42281,23.69783 1.41767,3.48697 2.84312,6.60571 3.16787,6.93039 1.83629,1.83572 21.15877,-15.28758 27.28826,-24.18271 9.79595,-14.21573 14.73692,-28.73015 15.48329,-45.4796 0.40615,-9.11498 -0.41442,-16.89883 -2.64663,-25.10423 C 206.51682,65.570109 169.58784,39.834701 129.6429,40.000799 Z m 0.33981,4.057607 c 36.17205,0 68.93348,22.414671 80.94839,55.383139 3.53162,9.690692 4.59635,15.932242 4.60423,27.028102 0.0157,18.46361 -5.07202,33.85913 -16.0302,48.5127 -3.85717,5.15791 -13.59136,14.74323 -18.05954,17.78415 -2.11881,1.44201 -2.28261,1.46091 -2.70215,0.31932 -3.50764,-9.54505 -9.09707,-19.53483 -14.83073,-26.50674 -4.34649,-5.28507 -4.83345,-6.16553 -4.43096,-8.00832 0.24864,-1.13873 0.7098,-2.33408 1.02481,-2.65772 0.32987,-0.33872 2.80982,-0.26806 5.84701,0.16672 8.20879,1.17551 10.56234,1.00878 12.52796,-0.88373 1.0007,-0.96348 1.70018,-2.40634 1.69494,-3.50364 -0.0109,-2.84955 -3.57141,-8.21029 -8.18636,-12.32403 -3.63685,-3.24184 -4.28996,-4.21322 -5.24188,-7.79064 -0.5981,-2.24781 -1.85041,-5.53441 -2.78202,-7.3045 l -1.6936,-3.21818 2.13495,-3.29899 c 5.06087,-7.81999 5.80285,-14.26131 2.38807,-20.726001 -2.14527,-4.061307 -9.83387,-12.634487 -16.14527,-18.003103 -5.97051,-5.07863 -7.46455,-5.881945 -9.23688,-4.968703 -2.88894,1.488611 -2.64115,5.765255 0.70261,12.142828 2.28346,4.355264 2.63543,7.717995 0.87588,8.368074 -1.87962,0.694468 -3.52211,-2.050447 -6.21386,-10.384504 -3.09619,-9.586068 -3.91124,-11.1484 -6.47924,-12.426968 -2.68712,-1.337803 -7.55948,-1.342868 -8.09159,-0.0075 -0.22031,0.552842 0.13125,2.897052 0.78115,5.208535 1.35351,4.814278 1.20574,7.361666 -0.44405,7.664219 -1.22299,0.224294 -2.16489,-1.933526 -2.99998,-6.870423 -0.70793,-4.185096 -3.24541,-7.302962 -7.61777,-9.362597 -2.12525,-1.001114 -4.50175,-2.683158 -5.28112,-3.736961 -1.00434,-1.357979 -2.00419,-1.916059 -3.43321,-1.916059 -4.824851,0 -5.601177,7.643229 -1.4147,13.924639 2.73023,4.096455 2.53457,5.790327 -0.31679,2.745051 -5.734741,-6.124736 -9.02434,-7.955952 -14.336614,-7.979657 -2.687222,-0.01211 -3.469626,0.26897 -4.348368,1.560213 -1.158629,1.702511 -0.881886,3.055999 1.1805,5.782056 0.700599,0.926068 1.467598,3.32856 1.704422,5.338877 0.47155,4.00334 2.492113,8.512228 4.077607,9.098016 0.554603,0.204899 1.008572,0.640669 1.008572,0.968442 0,1.02671 -2.337887,0.643076 -4.505404,-0.739036 -4.299778,-2.741716 -7.289226,-0.825576 -7.261714,4.653276 0.03057,6.066906 5.149227,12.492876 11.203944,14.062826 5.903135,1.53062 5.773001,1.21032 2.306849,5.64258 -3.726939,4.76572 -5.565838,9.13762 -7.439059,17.68505 -1.288518,5.87941 -1.358435,7.93967 -0.958482,28.36286 0.346564,17.69787 0.241462,22.78845 -0.538804,25.92018 -0.534035,2.1434 -1.269046,4.18327 -1.632669,4.53336 -0.970853,0.93473 -8.098208,-4.46368 -14.499065,-10.98151 C 40.16197,155.12747 36.462617,113.16696 58.812837,80.896297 74.584479,58.124198 101.75849,44.058494 129.98279,44.058494 Z m 13.07894,82.854411 c -0.24205,-0.0125 -0.49103,-0.007 -0.74728,0.0177 -4.62221,0.44466 -6.0251,6.12215 -2.02663,8.20124 2.16058,1.12347 4.1384,0.74217 5.81046,-1.11966 2.53349,-2.82102 0.59395,-6.92306 -3.03655,-7.09984 z m -0.54017,2.77632 c 0.94864,0.0789 1.95196,1.17436 1.55551,2.16893 -0.20879,0.52378 -0.82431,0.95151 -1.36731,0.95151 -1.30519,0 -2.02119,-1.89781 -1.06408,-2.81934 0.25019,-0.24087 0.55968,-0.32736 0.87588,-0.3011 z" />
<path id="logoBird-5" style="fill:#000000;stroke-width:0.680128" d="m 389.64318,300.00088 c -9.21807,0.0383 -18.59568,1.4564 -27.85016,4.40302 -13.29492,4.23309 -23.89808,10.44958 -34.13854,20.01692 -17.2489,16.11505 -26.41983,35.65218 -27.56047,58.71209 -1.21322,24.52736 9.37784,49.56649 28.16156,66.57969 3.05787,2.76963 7.49352,6.27894 9.85694,7.79847 5.87261,3.77573 6.70221,3.52937 8.86869,-2.63686 l 1.75858,-5.00519 0.009,-26.02708 c 0.0105,-25.1151 0.0672,-26.21112 1.59611,-31.29034 1.94273,-6.45424 3.25988,-8.9654 7.34702,-14.00287 1.74822,-2.15469 3.1787,-4.26503 3.1787,-4.68976 0,-1.77256 -2.23253,-3.61866 -5.26894,-4.35481 -5.35272,-1.2977 -8.3906,-3.15065 -10.29694,-6.28257 -0.96951,-1.59282 -1.76263,-3.71267 -1.76263,-4.71063 0,-1.74171 0.0618,-1.77278 1.54061,-0.77554 2.01144,1.35647 13.5223,1.47149 15.39395,0.1538 2.11788,-1.49103 0.75915,-3.64745 -3.41831,-5.4262 -4.482,-1.90845 -5.96297,-3.92507 -6.70127,-9.12277 -0.30935,-2.17788 -1.04191,-4.85258 -1.62726,-5.94239 -1.29863,-2.41789 -0.58624,-2.54029 3.54964,-0.61262 1.61469,0.75258 3.77542,2.43041 4.80325,3.72785 2.37176,2.9939 5.61936,4.90806 8.32852,4.91135 4.66241,0.007 5.03417,-3.70139 1.00451,-10.00781 -2.95531,-4.62508 -3.87887,-8.48483 -1.55957,-6.51849 0.66715,0.56561 2.84524,1.81532 4.83979,2.77762 4.37797,2.11217 5.50176,3.63405 6.49279,8.7956 1.2003,6.25151 2.82392,8.29249 6.597,8.29249 2.84562,0 5.81536,-2.46184 5.79965,-4.80708 -0.007,-0.84255 -0.44967,-3.33253 -0.98691,-5.5318 -0.53736,-2.19926 -0.8713,-4.09992 -0.74189,-4.22445 0.12942,-0.12453 0.90058,0.11661 1.71393,0.53572 1.73795,0.89554 2.10335,1.74349 5.30684,12.33445 1.91179,6.32066 2.86586,8.4243 4.47696,9.86834 2.64801,2.37334 6.0456,2.46149 8.7455,0.22549 2.97024,-2.45989 2.67974,-5.99288 -1.06408,-12.96532 -1.64384,-3.06146 -2.82294,-5.72578 -2.62094,-5.92023 1.25068,-1.20416 17.29147,15.09612 19.83575,20.1564 1.68357,3.34843 1.84465,9.34405 0.34388,12.80238 -0.57511,1.3251 -2.13462,3.86784 -3.46572,5.65172 -1.33107,1.78386 -2.42059,3.50646 -2.42059,3.82818 0,0.32172 1.07813,2.30811 2.39486,4.41346 1.31674,2.10535 2.75412,5.5202 3.19494,7.58862 0.68757,3.22629 1.32054,4.23464 4.45536,7.09722 2.00968,1.83527 4.78315,4.78599 6.16244,6.5576 4.446,5.71057 3.01595,7.53158 -4.77077,6.07665 -6.79306,-1.26938 -10.29444,-1.20508 -11.62365,0.21236 -1.41968,1.51408 -2.85846,7.05014 -2.33796,8.99633 0.22293,0.83344 2.63245,4.21456 5.35424,7.51433 5.26001,6.37714 9.23076,13.38708 13.42284,23.69783 1.41766,3.48697 2.84312,6.60572 3.16787,6.93039 1.83629,1.83572 21.15881,-15.28758 27.28833,-24.18271 9.79596,-14.21573 14.73695,-28.73014 15.48332,-45.4796 0.40615,-9.11498 -0.41443,-16.89883 -2.64664,-25.10423 -10.73614,-39.46578 -47.66521,-65.20119 -87.61023,-65.0351 z m 0.33981,4.05761 c 36.17213,0 68.93363,22.41467 80.94857,55.38313 3.53163,9.69069 4.59636,15.93225 4.60424,27.0281 0.0157,18.46361 -5.07203,33.85913 -16.03024,48.5127 -3.85718,5.15791 -13.59139,14.74323 -18.05958,17.78415 -2.11881,1.44201 -2.28262,1.46091 -2.70216,0.31932 -3.50765,-9.54505 -9.09709,-19.53483 -14.83076,-26.50674 -4.3465,-5.28507 -4.83346,-6.16553 -4.43096,-8.00832 0.24863,-1.13873 0.7098,-2.33408 1.0248,-2.65771 0.32987,-0.33873 2.80983,-0.26807 5.84703,0.16672 8.20881,1.17551 10.56236,1.00878 12.52798,-0.88374 1.0007,-0.96348 1.70019,-2.40634 1.69495,-3.50364 -0.0109,-2.84955 -3.57142,-8.21029 -8.18638,-12.32403 -3.63686,-3.24184 -4.28997,-4.21322 -5.24189,-7.79064 -0.5981,-2.24781 -1.85042,-5.53441 -2.78202,-7.3045 l -1.69361,-3.21818 2.13495,-3.29899 c 5.06089,-7.81999 5.80286,-14.26131 2.38808,-20.726 -2.14528,-4.0613 -9.8339,-12.63448 -16.1453,-18.0031 -5.97053,-5.07863 -7.46457,-5.88194 -9.23691,-4.9687 -2.88894,1.48861 -2.64115,5.76525 0.70262,12.14283 2.28345,4.35527 2.63543,7.718 0.87588,8.36808 -1.87963,0.69446 -3.52212,-2.05045 -6.21388,-10.38451 -3.0962,-9.58607 -3.91125,-11.1484 -6.47925,-12.42696 -2.68713,-1.33782 -7.55951,-1.34288 -8.09161,-0.008 -0.22031,0.55284 0.13125,2.89704 0.78115,5.20853 1.35351,4.81428 1.20574,7.36167 -0.44406,7.66422 -1.22298,0.2243 -2.16489,-1.93352 -2.99998,-6.87043 -0.70793,-4.18509 -3.24542,-7.30295 -7.61778,-9.36259 -2.12526,-1.00112 -4.50177,-2.68315 -5.28114,-3.73696 -1.00434,-1.35798 -2.0042,-1.91606 -3.43322,-1.91606 -4.82485,0 -5.60118,7.64322 -1.4147,13.92463 2.73024,4.09646 2.53458,5.79034 -0.31679,2.74506 -5.73475,-6.12474 -9.02436,-7.95595 -14.33664,-7.97966 -2.68723,-0.0121 -3.46964,0.26897 -4.34838,1.56022 -1.15863,1.7025 -0.88189,3.056 1.1805,5.78205 0.7006,0.92607 1.4676,3.32856 1.70443,5.33888 0.47155,4.00334 2.49212,8.51223 4.07762,9.09802 0.5546,0.2049 1.00857,0.64067 1.00857,0.96844 0,1.02671 -2.3379,0.64308 -4.50542,-0.73904 -4.29978,-2.74171 -7.28923,-0.82557 -7.26173,4.65327 0.0306,6.06691 5.14925,12.49288 11.20398,14.06283 5.90314,1.53061 5.77301,1.21032 2.30685,5.64257 -3.72695,4.76573 -5.56585,9.13762 -7.43907,17.68506 -1.28853,5.87941 -1.35845,7.93966 -0.9585,28.36286 0.34658,17.69787 0.24147,22.78845 -0.53879,25.92018 -0.53404,2.1434 -1.26906,4.18327 -1.63268,4.53336 -0.97085,0.93472 -8.09823,-4.46369 -14.4991,-10.98151 -27.6807,-28.18668 -31.38006,-70.14719 -9.02979,-102.41785 15.77168,-22.7721 42.94575,-36.83781 71.17012,-36.83781 z m 13.07897,82.8544 c -0.24206,-0.0125 -0.49104,-0.007 -0.74729,0.0177 -4.62222,0.44467 -6.02511,6.12215 -2.02663,8.20125 2.16059,1.12346 4.13841,0.74216 5.81047,-1.11966 2.5335,-2.82103 0.59395,-6.92307 -3.03655,-7.09985 z m -0.54017,2.77633 c 0.94864,0.0789 1.95195,1.17435 1.55551,2.16892 -0.20879,0.52378 -0.82432,0.95151 -1.36732,0.95151 -1.30519,0 -2.02119,-1.89781 -1.06408,-2.81934 0.25019,-0.24086 0.55969,-0.32735 0.87589,-0.30109 z" />
</pattern>
<rect x="0" y="0" width="1000%" height="1000%" fill="url(#pattern)" transform="scale(1)"/>
</svg>
I tried different methods to achieve the same effect but each method brought up its own complexities.
One of these workarounds involved using a png version of the SVG for the background but I could not achieve a true tiling effect since I wanted the whole pattern to be rotated by about 25 degrees.
I tried finding a solution for this for 2 days straight but I came up empty handed with still no solution.

How can I pass the fill color of marker as a parameter

I have a marker acting as the pointer end of a line to make an arrow:
<marker
id="triangle"
viewBox="0 0 4 4"
refX="10"
refY="5"
markerUnits="strokeWidth"
markerWidth="10"
markerHeight="10"
orient="auto"
>
<path d="M 0 0 L 10 5 L 0 10 z" fill=TO HERE />
</marker>
I am calling it like so from the line
<line
x1={source.x}
y1={source.y}
x2={target.x}
y2={target.y}
stroke={
type === "A" ? "#fff"
: type === "B" ? "#000"
} // color of line
marker-end="url(#triangle)" CALLING IT FROM HERE
/>
How can I pass the fill the marker should be from the line based on the color of line? Can I do something like url(#triangle("fff")) or something like that?
The line is the link component from https://airbnb.io/visx/network .
marker is svg, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

Looping interpolated SVG sprites

I've been trying to figure out how to interpolate these svg sprites in a loop. There's something missing to the html svg < use > element's path.
loop
each feature, slug in public.feature._data
.feature__wrap
.feature__image
svg
use(xlink:href="/assets/defs.svg#icon-feature-#")
.feature__content
h3.feature__title #{ feature.title }
p.feature__text #{ feature.text }
svg sprites
<symbol id="icon-feature-1" viewBox='0 0 512 512'>
<desc>Monitor Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-2" viewBox='0 0 512.004 512.004'>
<desc>Cellphone Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-3" viewBox='0 0 64 64'>
<desc>Gear Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
Note: I just used a random svg < path > to make it easier to read and lessen the amount of characters on the snippet
Note2: I've double checked the path of each single one and it works just fine so as to other sprites I have interpolated in other parts of my code which are not looping.

How to Hide horizontal scrollbars?

Following is the css for my body:
body{
margin: 0px;
width: 100vw;
height: 100vh;
}
I have some divs that extend beyond the viewport on the right side (there is no way around it, that is just how my design is setup). However, I do not want to make the page scrollable horizontally.
This is the jsfiddle for the divs that are extending beyond the viewport (the red stripes are long, and the jsfiddle is not properly optimized, so its not exactly how it looks in a full browser screen), https://jsfiddle.net/gxk985kb/
How can I just not allow the horizontal scrolling at all?

Try "overflow-y:hidden;" for #designWrapper.
This way you can remove the horizontal scroll.

<svg style="background-color: #dedede;" fill="red" width="400" height="200">
<path d="M 10 190 L 60 190 L 110 10 L 60 10 Z" />
<path d="M 70 190 L 120 190 L 170 10 L 120 10 Z" />
<path d="M 130 190 L 180 190 L 230 10 L 180 10 Z" />
<path d="M 190 190 L 240 190 L 290 10 L 240 10 Z" />
</svg>
i think you should make your design with svg. it is more suitable for like this design. CSS transform property is supported by min ie 10 (-ms- ie9).