When this svg is scaled using css it also creates a flicker as it scales up or down. How can I modify the css or svg to stop the flickering? I first of all made the svg using a mask in illustrator and then without a mask and they both flicker when it scales using css scale. Also using gsap to scale gives the same problem.
.wrapper{
max-width: 960px;
margin: 0 auto;
background-color: antiquewhite;
padding: 250px;
}
.box{
width: 200px;
min-height: 200px;
margin: 0 auto;
background-color: aqua;
transition: transform 2.5s;
cursor: pointer;
color: blueviolet;
text-align: center;
}
.box:hover{
transform: scale(3);
opacity: 1;
}<div class="wrapper">
<div class="box">
<p>Hover Blue box to Zoom in</p>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 888.12 90.88">
<path d="M571.05,29.69h-31.97c-.09,1.51-.42,2.82-1.01,3.94h32.38c.27-1.26.46-2.58.59-3.94Z" stroke-width="0"/>
<polygon points="524.07 29.69 491.85 29.69 491.13 33.62 523.33 33.62 524.07 29.69" stroke-width="0"/>
<path d="M624,29.69h-28.08l-2.05,3.94h28.82c.41-1.2.85-2.52,1.31-3.94Z" stroke-width="0"/>
<polygon points="473.75 32 446.37 32 446.81 29.69 414.6 29.69 413.88 33.62 473.45 33.62 473.75 32" stroke-width="0"/>
<polygon points="716.36 29.69 683.61 29.69 682.88 33.62 715.63 33.62 716.36 29.69" stroke-width="0"/>
<path d="M651.22,29.69h-26.68c-.04,1.39-.05,2.71-.05,3.94h27.24l-.51-3.94Z" stroke-width="0"/>
<path d="M229.35,27.19c1.55-.36,3.18-.56,4.89-.56,1.84,0,3.66.2,5.49.56h13.15l.63-3.44h-64.8c-.59,1.12-1.13,2.27-1.64,3.44h42.27Z" stroke-width="0"/>
<polygon points="378.94 29.69 345.98 29.69 345.25 33.62 378.21 33.62 378.94 29.69" stroke-width="0"/>
<polygon points="666.71 17.81 666.16 20.75 736.51 20.75 737.05 17.81 666.71 17.81" stroke-width="0"/>
<polygon points="271.57 14.31 332.88 14.31 333.32 11.88 272.02 11.88 271.57 14.31" stroke-width="0"/>
<path d="M254.07,20.75l.54-2.94h-62.21c-.69.96-1.34,1.94-1.96,2.94h63.63Z" stroke-width="0"/>
<polygon points="327.87 32 300.5 32 300.93 29.69 268.73 29.69 268 33.62 327.58 33.62 327.87 32" stroke-width="0"/>
<path d="M252.42,29.69h-4.95c1.49.67,2.99,1.44,4.52,2.31l.43-2.31Z" stroke-width="0"/>
<polygon points="418.63 7.88 479.92 7.88 480.27 5.94 418.99 5.94 418.63 7.88" stroke-width="0"/>
<path d="M201.92,7.88h54.52l.36-1.94h-52.25c-.9.62-1.78,1.26-2.63,1.94Z" stroke-width="0"/>
<path d="M174.2,20.75l.54-2.94h-62.21c-.69.96-1.34,1.94-1.96,2.94h63.63Z" stroke-width="0"/>
<path d="M122.04,7.88h54.52l.36-1.94h-52.25c-.9.62-1.78,1.26-2.63,1.94Z" stroke-width="0"/>
<path d="M149.48,27.19c1.55-.36,3.18-.56,4.89-.56,1.84,0,3.66.2,5.49.56h13.15l.63-3.44h-64.8c-.59,1.12-1.13,2.27-1.64,3.44h42.27Z" stroke-width="0"/>
<polygon points="667.84 11.88 667.37 14.31 737.69 14.31 738.14 11.88 667.84 11.88" stroke-width="0"/>
<path d="M139.12,33.62c1.21-1.54,2.65-2.87,4.32-3.94h-37.23c-.48,1.29-.9,2.6-1.27,3.94h34.19Z" stroke-width="0"/>
<path d="M87.32,40.06l-.58-4.44h-27.49c.02,1.57.06,3.05.11,4.44h27.95Z" stroke-width="0"/>
<polygon points="272.76 7.88 334.04 7.88 334.39 5.94 273.11 5.94 272.76 7.88" stroke-width="0"/>
<polygon points="607.3 7.88 648.38 7.88 648.13 5.94 608.32 5.94 607.3 7.88" stroke-width="0"/>
<polygon points="668.96 5.94 668.59 7.88 738.88 7.88 739.24 5.94 668.96 5.94" stroke-width="0"/>
<path d="M495.88,7.88h67.81c-.77-.69-1.61-1.33-2.5-1.94h-64.95l-.36,1.94Z" stroke-width="0"/>
<polygon points="348.82 14.31 381.8 14.31 382.25 11.88 349.27 11.88 348.82 14.31" stroke-width="0"/>
<polygon points="350.01 7.88 383 7.88 383.36 5.94 350.36 5.94 350.01 7.88" stroke-width="0"/>
<polygon points="447.93 23.75 415.7 23.75 415.07 27.19 447.28 27.19 447.93 23.75" stroke-width="0"/>
<path d="M86.49,33.62l-.51-3.94h-26.68c-.04,1.39-.05,2.71-.05,3.94h27.24Z" stroke-width="0"/>
<polygon points="744.73 29.69 744 33.62 803.57 33.62 803.87 32 776.49 32 776.93 29.69 744.73 29.69" stroke-width="0"/>
<path d="M592.83,35.62l-2.31,4.44h29.83c.46-1.16,1.01-2.64,1.66-4.44h-29.17Z" stroke-width="0"/>
<path d="M175.38,14.31l.45-2.44h-58.27c-.78.79-1.54,1.59-2.27,2.44h60.09Z" stroke-width="0"/>
<polygon points="665.59 23.75 665.12 26.25 684.24 26.25 684.07 27.19 716.82 27.19 716.99 26.25 735.49 26.25 735.95 23.75 665.59 23.75" stroke-width="0"/>
<path d="M223.31,29.69h-37.23c-.48,1.29-.9,2.6-1.27,3.94h34.19c1.21-1.54,2.65-2.87,4.32-3.94Z" stroke-width="0"/>
<polygon points="811.2 1.44 811.46 0 750.21 0 749.94 1.44 811.2 1.44" stroke-width="0"/>
<path d="M172.12,32l.43-2.31h-4.95c1.49.67,2.99,1.44,4.52,2.31Z" stroke-width="0"/>
<path d="M176.14,1.44c-1.14-.52-2.29-1.01-3.47-1.44h-36.14c-1.26.44-2.51.91-3.72,1.44h43.33Z" stroke-width="0"/>
<polygon points="82.3 1.44 82.11 0 46.17 0 45.42 1.44 82.3 1.44" stroke-width="0"/>
<path d="M256.01,1.44c-1.14-.52-2.29-1.01-3.47-1.44h-36.14c-1.26.44-2.51.91-3.72,1.44h43.33Z" stroke-width="0"/>
<polygon points="647.54 1.44 647.36 0 611.41 0 610.66 1.44 647.54 1.44" stroke-width="0"/>
<path d="M551.17,1.44c-2.09-.59-4.34-1.07-6.74-1.44h-47.09l-.27,1.44h54.1Z" stroke-width="0"/>
<polygon points="347.63 20.75 380.6 20.75 381.15 17.81 348.17 17.81 347.63 20.75" stroke-width="0"/>
<polygon points="301.4 27.19 302.05 23.75 269.83 23.75 269.19 27.19 301.4 27.19" stroke-width="0"/>
<polygon points="525.18 23.75 492.95 23.75 492.32 27.19 524.53 27.19 525.18 23.75" stroke-width="0"/>
<polygon points="380.05 23.75 347.08 23.75 346.44 27.19 379.41 27.19 380.05 23.75" stroke-width="0"/>
<polygon points="650.45 23.75 599.02 23.75 597.23 27.19 650.89 27.19 650.45 23.75" stroke-width="0"/>
<path d="M255.25,14.31l.45-2.44h-58.27c-.78.79-1.54,1.59-2.27,2.44h60.09Z" stroke-width="0"/>
<polygon points="602.12 17.81 600.59 20.75 650.06 20.75 649.67 17.81 602.12 17.81" stroke-width="0"/>
<polygon points="605.22 11.88 603.95 14.31 649.22 14.31 648.9 11.88 605.22 11.88" stroke-width="0"/>
<polygon points="270.38 20.75 331.72 20.75 332.25 17.81 270.92 17.81 270.38 20.75" stroke-width="0"/>
<path d="M494.69,14.31h73.99c-.43-.85-.91-1.66-1.45-2.44h-72.09l-.45,2.44Z" stroke-width="0"/>
<path d="M570.08,17.81h-76.04l-.54,2.94h77.29c-.18-1.01-.42-1.99-.71-2.94Z" stroke-width="0"/>
<path d="M571.25,26c0-.77-.04-1.51-.09-2.25h-34.07c1,.88,1.62,2.02,1.88,3.44h32.24c.01-.4.04-.78.04-1.19Z" stroke-width="0"/>
<polygon points="417.44 14.31 478.76 14.31 479.2 11.88 417.89 11.88 417.44 14.31" stroke-width="0"/>
<polygon points="416.25 20.75 477.6 20.75 478.13 17.81 416.8 17.81 416.25 20.75" stroke-width="0"/>
<path d="M137.77,35.62h-33.36c-.35,1.45-.64,2.93-.86,4.44h32.34c.44-1.59,1.08-3.07,1.88-4.44Z" stroke-width="0"/>
<path d="M857.89,29.69h-38.23c.04,1.37.17,2.68.41,3.94h46.68c-.69-.34-1.39-.67-2.12-1-2.65-1.18-4.93-2.08-6.73-2.94Z" stroke-width="0"/>
<path d="M875.59,29.69c.22.19.43.37.65.56l.32-.56h-.98Z" stroke-width="0"/>
<path d="M820.52,35.62c.43,1.56,1.03,3.04,1.79,4.44h54.31c-1.72-1.6-3.77-3.06-6.14-4.44h-49.96Z" stroke-width="0"/>
<path d="M867.41,23.75c1.62.92,3.33,2.07,5.11,3.44h5.47l1.96-3.44h-12.55Z" stroke-width="0"/>
<path d="M878.1,41.56h-54.9c1.14,1.76,2.56,3.4,4.25,4.94h53.99c-.86-1.79-1.97-3.43-3.34-4.94Z" stroke-width="0"/>
<path d="M821.53,17.81c-.36.96-.66,1.94-.92,2.94h61.06l1.68-2.94h-61.82Z" stroke-width="0"/>
<path d="M567.45,41.56h-77.79l-.91,4.94h74.99c1.44-1.47,2.67-3.13,3.7-4.94Z" stroke-width="0"/>
<polygon points="802.12 41.56 742.53 41.56 741.62 46.5 801.22 46.5 802.12 41.56" stroke-width="0"/>
<path d="M824.56,11.88c-.52.79-1.01,1.6-1.45,2.44h62.24l1.39-2.44h-62.18Z" stroke-width="0"/>
<polygon points="472 41.56 412.41 41.56 411.5 46.5 471.1 46.5 472 41.56" stroke-width="0"/>
<polygon points="619.73 41.56 589.73 41.56 587.15 46.5 617.65 46.5 619.73 41.56" stroke-width="0"/>
<polygon points="714.17 41.56 681.42 41.56 680.5 46.5 713.25 46.5 714.17 41.56" stroke-width="0"/>
<path d="M652.76,41.56h-28.09c.07,1.58.14,3.02.19,4.31l.02.62h28.51l-.64-4.94Z" stroke-width="0"/>
<polygon points="59.69 47.5 60 55.5 48.62 55.5 51.99 47.5 21.39 47.5 0 88.5 34.88 88.5 39.75 76.62 61.25 76.62 61.88 88.5 93.62 88.5 88.29 47.5 59.69 47.5" stroke-width="0"/>
<path d="M829.81,5.94c-.71.62-1.39,1.27-2.04,1.94h60.35c-.83-.68-1.67-1.33-2.52-1.94h-55.79Z" stroke-width="0"/>
<polygon points="680.32 47.5 672.74 88.5 705.49 88.5 713.07 47.5 680.32 47.5" stroke-width="0"/>
<path d="M562.7,47.5h-74.14l-7.57,41h32.25l6-32.5,9.75,32.5h33.12l-12.88-34.38c5.43-1.16,9.95-3.43,13.46-6.62Z" stroke-width="0"/>
<polygon points="624.93 47.5 625.24 55.5 613.87 55.5 617.23 47.5 586.63 47.5 565.24 88.5 600.12 88.5 604.99 76.62 626.49 76.62 627.12 88.5 658.87 88.5 653.54 47.5 624.93 47.5" stroke-width="0"/>
<polygon points="772.37 54.62 799.74 54.62 801.04 47.5 741.44 47.5 733.87 88.5 797.87 88.5 802.37 64.25 770.62 64.25 772.37 54.62" stroke-width="0"/>
<path d="M828.59,47.5c3.36,2.76,7.65,5.17,12.9,7.38,6,2.5,9.38,3.38,9.38,6.25,0,2-2.12,3.5-5.88,3.5-7.88,0-16.25-4.62-23.5-13.62l-16,23.38c12.25,10.75,26,16.25,39.88,16.25,22.62,0,38.38-14.5,38.38-32.75,0-4.01-.61-7.41-1.84-10.38h-53.31Z" stroke-width="0"/>
<polygon points="442.25 54.62 469.62 54.62 470.92 47.5 411.32 47.5 403.75 88.5 467.75 88.5 472.25 64.25 440.5 64.25 442.25 54.62" stroke-width="0"/>
<polygon points="376.73 41.56 343.79 41.56 342.88 46.5 375.82 46.5 376.73 41.56" stroke-width="0"/>
<path d="M839.88,0c-1.13.43-2.23.91-3.27,1.44h41.21c-1.17-.53-2.36-1.01-3.57-1.44h-34.36Z" stroke-width="0"/>
<path d="M135.2,47.5h-32.29c-.01.5-.03,1-.03,1.5,0,12.5,5,24,13.62,31.5,7.75,6.75,17.75,10.38,28.88,10.38,5.5,0,10.88-1,16.38-3l6-32.25c-5.75,3.62-12,5.5-17,5.5-8.9,0-14.84-5.16-15.55-13.62Z" stroke-width="0"/>
<polygon points="296.37 54.62 323.75 54.62 325.05 47.5 265.44 47.5 257.87 88.5 321.87 88.5 326.37 64.25 294.62 64.25 296.37 54.62" stroke-width="0"/>
<path d="M217.64,35.62h-33.36c-.35,1.45-.64,2.93-.86,4.44h32.34c.44-1.59,1.08-3.07,1.88-4.44Z" stroke-width="0"/>
<polygon points="375.63 47.5 342.69 47.5 335.12 88.5 395.5 88.5 400.62 61 373.12 61 375.63 47.5" stroke-width="0"/>
<path d="M215.07,47.5h-32.29c-.01.5-.03,1-.03,1.5,0,12.5,5,24,13.62,31.5,7.75,6.75,17.75,10.38,28.88,10.38,5.5,0,10.88-1,16.38-3l6-32.25c-5.75,3.62-12,5.5-17,5.5-8.9,0-14.84-5.16-15.55-13.62Z" stroke-width="0"/>
<polygon points="803.21 35.62 743.63 35.62 742.81 40.06 802.4 40.06 803.21 35.62" stroke-width="0"/>
<polygon points="745.19 27.19 777.4 27.19 778.05 23.75 745.82 23.75 745.19 27.19" stroke-width="0"/>
<polygon points="746.92 17.81 746.38 20.75 807.72 20.75 808.25 17.81 746.92 17.81" stroke-width="0"/>
<path d="M853.24,24.75c0-.35.06-.68.15-1h-33.4c-.17,1.12-.28,2.27-.34,3.44h34.49c-.58-.69-.9-1.48-.9-2.44Z" stroke-width="0"/>
<polygon points="748.01 11.88 747.56 14.31 808.88 14.31 809.32 11.88 748.01 11.88" stroke-width="0"/>
<polygon points="749.11 5.94 748.75 7.88 810.04 7.88 810.39 5.94 749.11 5.94" stroke-width="0"/>
<polygon points="377.84 35.62 344.88 35.62 344.06 40.06 377.01 40.06 377.84 35.62" stroke-width="0"/>
<polygon points="740.07 1.44 740.33 0 670.08 0 669.81 1.44 740.07 1.44" stroke-width="0"/>
<polygon points="715.26 35.62 682.51 35.62 681.69 40.06 714.44 40.06 715.26 35.62" stroke-width="0"/>
<polygon points="327.21 35.62 267.63 35.62 266.81 40.06 326.4 40.06 327.21 35.62" stroke-width="0"/>
<polygon points="473.09 35.62 413.51 35.62 412.69 40.06 472.28 40.06 473.09 35.62" stroke-width="0"/>
<path d="M569.94,35.62h-33.4c-2.32,2.13-6.21,3.12-11.8,3.12h-2.38l.58-3.12h-32.2l-.82,4.44h78.31c.68-1.4,1.25-2.88,1.7-4.44Z" stroke-width="0"/>
<path d="M651.99,35.62h-27.49c.02,1.57.06,3.05.11,4.44h27.95l-.58-4.44Z" stroke-width="0"/>
<polygon points="52.41 46.5 54.48 41.56 24.49 41.56 21.91 46.5 52.41 46.5" stroke-width="0"/>
<polygon points="326.13 41.56 266.54 41.56 265.63 46.5 325.23 46.5 326.13 41.56" stroke-width="0"/>
<path d="M87.52,41.56h-28.09c.07,1.58.14,3.02.19,4.31l.02.62h28.51l-.64-4.94Z" stroke-width="0"/>
<path d="M55.1,40.06c.46-1.16,1.01-2.64,1.66-4.44h-29.17l-2.31,4.44h29.83Z" stroke-width="0"/>
<path d="M57.45,33.62c.41-1.2.85-2.52,1.31-3.94h-28.08l-2.05,3.94h28.82Z" stroke-width="0"/>
<path d="M135.12,45.75c0-1.45.14-2.85.41-4.19h-32.2c-.2,1.62-.34,3.27-.41,4.94h32.23c0-.25-.03-.49-.03-.75Z" stroke-width="0"/>
<path d="M215,45.75c0-1.45.14-2.85.41-4.19h-32.2c-.2,1.62-.34,3.27-.41,4.94h32.23c0-.25-.03-.49-.03-.75Z" stroke-width="0"/>
<polygon points="335.21 1.44 335.46 0 274.21 0 273.95 1.44 335.21 1.44" stroke-width="0"/>
<polygon points="85.65 27.19 85.2 23.75 33.78 23.75 31.99 27.19 85.65 27.19" stroke-width="0"/>
<polygon points="481.08 1.44 481.34 0 420.09 0 419.82 1.44 481.08 1.44" stroke-width="0"/>
<polygon points="384.19 1.44 384.46 0 351.46 0 351.2 1.44 384.19 1.44" stroke-width="0"/>
<polygon points="83.14 7.88 82.89 5.94 43.07 5.94 42.06 7.88 83.14 7.88" stroke-width="0"/>
<polygon points="84.81 20.75 84.43 17.81 36.88 17.81 35.34 20.75 84.81 20.75" stroke-width="0"/>
<polygon points="83.98 14.31 83.66 11.88 39.97 11.88 38.7 14.31 83.98 14.31" stroke-width="0"/>
</svg>
</div>
</div>Tried also to start with opacity set at zero, but it still flickers on scale
How to stop svg flickering with css scale?
Here is a link to see what happens in codePen:
This is an attempt to optimize the SVG. Still, the lines get blurred when during the transition. Btw, setting shape-rendering="crispEdges" on the svg element just makes things worse.
What I did: Created a text in Inkscape, converted the text object to a path. Copied the path d attribute value to SvgPathEditor, set the number of decimals to 2 and selected "minify output". Then I made the mask for the horizontal lines.
.wrapper {
max-width: 960px;
margin: 0 auto;
background-color: antiquewhite;
padding: 250px;
}
.box {
width: 200px;
min-height: 200px;
margin: 0 auto;
background-color: aqua;
transition: transform 2.5s;
cursor: pointer;
color: blueviolet;
text-align: center;
}
.box:hover {
transform: scale(3);
opacity: 1;
}<div class="wrapper">
<div class="box">
<p>Hover Blue box to Zoom in</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 11">
<defs>
<mask id="m01">
<rect width="94" height="11" fill="white" />
<line transform="translate(0 1)" x2="94" stroke-width=".6" stroke="black" />
<line transform="translate(0 2)" x2="94" stroke-width=".5" stroke="black" />
<line transform="translate(0 3)" x2="94" stroke-width=".4" stroke="black" />
<line transform="translate(0 4)" x2="94" stroke-width=".3" stroke="black" />
</mask>
</defs>
<path mask="url(#m01)" d="M7.42 8.21H3.54L2.57 9.98H0L5.49.26h2.86l1.72 9.72h-2.38zm-2.94-1.76h2.61l-.59-3.74zm13.37 3.08q-.9.32-1.73.48-.83.16-1.57.16-1.96 0-3.13-1.07-1.17-1.07-1.17-2.85 0-1.17.37-2.19.37-1.04 1.09-1.89.85-1 2.05-1.54 1.2-.54 2.59-.54.76 0 1.52.18.76.18 1.55.54l-.4 2.01q-.62-.48-1.26-.7-.63-.22-1.35-.22-1.5 0-2.52 1.16-1.02 1.16-1.02 2.9 0 1.12.62 1.76.62.64 1.73.64.66 0 1.39-.23.74-.24 1.66-.75zm8.79 0q-.9.32-1.73.48-.83.16-1.57.16-1.96 0-3.13-1.07-1.17-1.07-1.17-2.85 0-1.17.37-2.19.37-1.04 1.09-1.89.85-1 2.05-1.54 1.2-.54 2.59-.54.76 0 1.52.18.76.18 1.55.54l-.4 2.01q-.62-.48-1.26-.7-.63-.22-1.35-.22-1.5 0-2.52 1.16-1.02 1.16-1.02 2.9 0 1.12.62 1.76.62.64 1.73.64.66 0 1.39-.23.74-.24 1.66-.75zm2.88-9.26h6.76l-.37 1.89h-4.25l-.35 1.81h4l-.38 1.89H30.93l-.43 2.23h4.39l-.36 1.89h-6.91zm8.11 0h2.51l-1.52 7.83h4.39l-.36 1.89h-6.91zm7.5 0h6.76l-.37 1.89h-4.25l-.35 1.81h4l-.38 1.89h-4l-.43 2.23h4.39l-.36 1.89h-6.91zm10.83 4.31q.85 0 1.29-.4.44-.4.44-1.17 0-.48-.31-.7-.3-.23-.95-.23h-1.04l-.49 2.49zm-1.39 1.73-.72 3.68H51.34l1.89-9.72h3.7q1.6 0 2.43.6.83.6.83 1.76 0 1.18-.65 1.94-.65.76-1.76.87.51.1.85.52.34.41.59 1.26l.83 2.76h-2.49l-.73-2.42q-.22-.72-.54-.99-.31-.27-.91-.27zm12.31 1.91h-3.88l-.96 1.77h-2.57l5.49-9.72h2.86l1.72 9.72h-2.38zm-2.94-1.76h2.61l-.59-3.74zm5.45-6.18h8.96l-.37 1.89h-3.23l-1.52 7.83h-2.51l1.52-7.83h-3.23zm9.25 0h6.76l-.37 1.89H80.77l-.35 1.81h4l-.38 1.89h-4l-.43 2.23h4.39l-.36 1.89h-6.91zm14.8.31-.4 2.06q-.74-.36-1.45-.54-.72-.18-1.4-.18-.94 0-1.46.29-.52.29-.52.81 0 .33.23.52.23.18.96.36l1.03.25q1.29.33 1.89.94.61.61.61 1.59 0 1.58-1.2 2.54-1.2.96-3.22.96-.94 0-1.88-.18-.93-.18-1.82-.52l.4-2.12q.87.5 1.68.75.82.25 1.61.25.86 0 1.39-.35.54-.35.54-.9 0-.36-.24-.55-.24-.2-1.05-.41l-1.02-.25q-1.13-.28-1.69-.89-.55-.61-.55-1.57 0-1.52 1.16-2.43 1.17-.92 3.13-.92.79 0 1.61.12.83.12 1.69.36z" />
</svg>
</div>
</div>