Multi-shape and multi-colour SVG

dannytaurus

Snippet for my own future reference, and anyone else that might need it.

️ Don't use the icon as-is though. That's my design!

HiseSnippet 1227.3ocsVstaiZDEFRBQMtcq5J0G.TT+g2lHViuGsppqut1N9BIfSb7e1NFFfIFlg.CNwoZe15qTeCZmAeMMQ6EKU9gEmqymOmy7cPKjXBihHgBhoLlG.ED+AI84XpaMW.BKzttf3OJ0CDQggxKTUcd.HJBZIHJt+G3JDO5.gjm+92qB7.XS3FUBBWQPlvtHeDciVs2eNxyqIvBZf72x67uusIAWi3QhY3YeoLBA.yo.GXe.2s8jDZAhbED+UoL4MAkyZWHWtyNqTAqIPSaU3jRlfLE.1E.Ls4A4KnlWP7vFVHJITmBnvHVRqRrlq6RtGu3.tBEgl3A4BpB5rSdgZgZtHOKsUEmHAAwCz1Tp1eQo5mk5grPq0uoj8SIFj2Dw1EMw89bPR8a.RhaAoCV.oWKoaFhBnarvwy2K0Fy5f1.VuYanrvWg89q8kpQXdfoJ9fovlgLg0QjVMSlSkY+7l2kJ0aeqbsPHC3xTWnr9UeP1i3PRMCDJG.nt0ATf7uIeb1hYTvFEOubsq7pYTthRqLWNMWEi1WLn8M51S6cogwYUrCdPwqKskc0hiKNMpo9vNFYl404bkFStpSvPm36h6ZfG0pA8tvNZlntN40Ooe2OL9xQStwNmh9i1mAZ4MXXmr8QCKMMVyHDjqSUibC6zdVE2q0NoWo6dHWXcMG0aHXiNDMpe96YSLwWWerh+3xYFLr4EspjsWdCUX2pCr0GMwUur+nw4TsuJ9jByq.FP0GU9jfdyNuX3iSiTFq8PqNZ4M6d8bkayzsdPMEamdtjYnNv6lkK3ho8sZ27xKv9ETxzxqCD+nxEW2KrjoV2Z5csgOb8cWDRp4LHpdqxCQsNo4rRYancxzJfI212ebk12zu0sSTd.n5F10pT8Y23.dbhA87QpUrMpbLqSvtoDQkSJ7dwNHbWVefU5W0GMS5RrFT5U8km19.r9EF5IaSBSZkIswM4jKpk3vlTBrrRTk930VO9T4rmJmKKK2q0oDAooO9djE0kY9rhO2lKD43RYFy8BFi.yfswZgPlDyEafWDbIzqGBteCXeRbZrqdzKIwTDFl1NFaRQDbZm2j5OSIyd3+k3ClTWTjhCj1kXB7pRhwVQo4y0bebTrX4OohstfdpLfM5qvc4Su4cqxqLA2mPgCvo44+nTeJk7+0js8KZiWJCIddvvWzLmNL7yEXZbr+DX3or+Pdwv0Nxt9+TNkC+53TLWzY2xQBtMFQGD.WJ2j3Yw4J3u+bFHgkiFr2F1lOiwIkVpi4W.Ljh3vQrNbFaMvBJpijpCilRIAI95GPv7LHdHMw5qVQfw6rBHKN405NsvCBhRh6wNt47WjYujLmwR5g+wxENKFt3Z9kU6fdNMIiflXE6AnOk0luOaoAVY+ITkb5PbDhNe68ceCT4Y9rT4esP70RZHpo6Kiw8dALxZH+efwkK.ekTCaanIcC.OPp4ncca2W33Wb61oGfFh3yA8i80YenfIjc5X1vQzpYikxY3x7JfNDakH7OrmkFU4xhKMptxnfOvLj7QyEW13qX+tDMLLgS9DjiXeKDSVVUH4B310Ye1F+OZZ9zT8r.ytqAlaWCL+tFXgcMvh6Zfk10.K+kCj+AYUhoD+EWaDD5o0HgwRTrAFvl.SlVE9WPzFjRm

Here's the script on its own - it creates a panel and draws the logo inside:

Content.makeFrontInterface(100, 100);

// Create the SVG path using SVG tool on 'Base64 SVG' setting
var pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA";
const var pluginLogo = Content.createSVG(pathData);

// Create a panel for the logo
const var logoPanel = Content.addPanel("logoPanel", 2, 32);
logoPanel.set("width", 96);
logoPanel.set("height", 36);
logoPanel.set("saveInPreset", false);

// Draw the logo
logoPanel.setPaintRoutine(function(g)
{
    var a = this.getLocalBounds(0);
    g.drawSVG(pluginLogo, a, 1.0);
});

dannytaurus

I'll add that the beauty of using the 'Bas64 SVG' mode of the SVG tool is that your source SVG can be a mix of fills and stroked paths and they will all convert nicely to HISE format.

Using the 'Base64 Path' mode expects filled paths only. Stroked paths are converted to fills and often look weird because the ends of the stroked path are considered to be joined as a fill.

Chazrox

@dannytaurus crazy. So you can access these different layers colours individually in laf? (yes im being lazy and not opening the snip ha)

ustk

@dannytaurus said in Multi-shape and multi-colour SVG:

Using the 'Base64 Path' mode expects filled paths only. Stroked paths are converted to fills and often look weird because the ends of the stroked path are considered to be joined as a fill.

Well it depends on how you create your SVG. If the origin is a stroke path then you need to draw in Hise, and if it's plain shape then you'll want to fill.

Both methods have their pros & cons.

Base64 can have only one colour, but the colour can be dynamic
SVGs can have multiple colours, but they are fixed (this answers @Chazrox as well). I also had bad experiences if your SVG has gradients, they don't translate well unfortunately.

In order to limit importation issues, I always save my SVGs as flat combined paths. (except if I need the SVG method in Hise of course...)

dannytaurus

@ustk Yes, both have their advantages.

For things like logos or complex icons, I think I'll always use Base64 SVG from now on because it has the flexibility of allowing a mix of stroked paths and solid fills, along with multiple colours.

If I need to use simpler vector that require a dynamic colour, like knob markers, I'll use Base64 Path.

Felix W

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

David Healey

@Felix-W said in Multi-shape and multi-colour SVG:

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

Got a snippet?

Chazrox

@Felix-W It does work for me. Post a snip.

dannytaurus

@Felix-W Try this (put a button in the UI with name 'btn1'):

Content.makeFrontInterface(100, 100);

const pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA";
const logoPath = Content.createSVG(pathData);

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawToggleButton", function(g, obj)
{
    var a = obj.area;
    g.drawSVG(logoPath, a, 1);
});

Content.getComponent("btn1").setLocalLookAndFeel(laf);

Felix W

@David-Healey said in Multi-shape and multi-colour SVG:

@Felix-W said in Multi-shape and multi-colour SVG:

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

Got a snippet?

@Chazrox said in Multi-shape and multi-colour SVG:

@Felix-W It does work for me. Post a snip.

@dannytaurus said in Multi-shape and multi-colour SVG:

@Felix-W Try this (put a button in the UI with name 'btn1'):

Content.makeFrontInterface(100, 100);

const pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA";
const logoPath = Content.createSVG(pathData);

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawToggleButton", function(g, obj)
{
    var a = obj.area;
    g.drawSVG(logoPath, a, 1);
});

Content.getComponent("btn1").setLocalLookAndFeel(laf);

Aha, that's great! I might have missed a few details, thanks everyone. I've created a button based on this; let's take a look.

HiseSnippet 4772.3oc0Zk0ijibbt6UaK3drWAI.+jep09zrtVPTEKdTDBFV7rXw6qhEY8h.uOKdeTjB6+Y+OvlUenYFMi2c0ZHCahFDUlYDQFYDQ9kAynUZJ8BZaKat692YLUEb28+SOnOUzESF6jTb2Ap6t+27fnSaWPySuzEwTkSaaf+c2e+uZ+sNt+wu9tme9O92IbxcJ7B9PW2cmYYhWfPxkjtOzqxejOIOmwwOvH4xGQMze7fWYAYYdY+h97qdX8cUNdYNQARN2H6qd3NVm136t+e8ADjsXA6bQ14sdMxZzsvHXXvgtAXAtN6b8B.W63Dh4rnj+ZZ+jtxF8Nmtf1EgRT5OoGWNV7xDXlzl3lGbqwl6zWl4W59Nx3jbek2LNs2c28esxGLU+pWLU+yOHl3m7W5+Clre6yC7zG33iMZ2+U+Xpzl+FTo6+HU5qeQk9cOn60jT08gQtoO+iObnXwCF5r3a9XU4EZu6qz+WdfrbghhNfKNYALMKM9Kb79MqW+8Os7569Cey69l2s3gZ6dZvo4oJmtXJmNG4hm92d5aw1sEnv.geGoYF6b9d.qnUmvvYGwE.jKHB0x5XmaY2rUlHFXi5tTuK97iVEa6cI7AnKtRnDBftGX1tEnmS7XrpfCXEs7A1caZffupGhYvKMGpktWz.mNmBaG4.foKqpFEaAMSyPpkPxHw0TES21NuLKCGKOrzPIeyNd+H58RJJEyJzTF.zrpTP3ryWq1FSxZ3xRvLSbY+5EZnFMvaoTyNPXkGQPMRaXrOgfTXPA.moffyHrYq0UJsTVxyPUNiiTFT1WokMhL0lktx5LpxX3BvHSURzJfSKGei9TlTzPytMJIPGWm0Su2nfsRHJrA0zRGtc20rJCG3wFINOSoUGOqsxYyJG68dYmk7EzqQAUEGq60i.8mykEaYpCn7OqCEK1avstN2z4LbffO2N1TmVLQm78Ab4MWKpOU4YuydXI1nlzwhYZphRVOPZROqUsmFpUZcny480cm8mWgRUiYddUKbGpEP9v58NBGZrSsZBENHXi2rpBcdB5Xc9dEIdP2Sd0ydnMm1kryeJtMCdE1UMjcC8RcrnIiCtA9mp0lUwFz2ktoQdpZJdes7TApeh2o8qw.KuDW5zjbdUWmNSoXfYcN7DTmfydLttUPFvTpLQN4bm1Up6jEmtAzuQZVIeOHXxbtllKHgnBK4DekkWp.g7VYqRiMm..newAddiEwEwMNfIGENWE5DyXdY5XX6A2y1iLH3c1AMmkOpsyZkgc0JWS1xcGMqcT6z1UoymH.BNA6pWAd1prfJaDVp9Z1NchyjYBoiFPM68DYHSmGZ7NYVV1Vc.QsZUSu+IUGrylqFVqfwmX5s2FocM1V2cJTZAHFaVSuY6diQ8rFH+yslPmmcHCyiOuk0lRwFHjxBfffhCPfZnvhwlDXDmHRPPjxjsREvCnvYBNgDDT1EeGN8dYTE0pSha1jCjHhUfUYxkgwrDVd4voI.ay83axFhAyRv2BvEI4uimVoRbWIFx1tKV6W0h0.d0laS8IR3qCsigHaqh.f5yIoSb55NdYl0n.orPf+RgkzYwd3XevACiyDHZ7AsAZBx6WUjZmNOWEUBwPhe5vtngFkCjjw5y8JhEb9jU9jXrG6JvkbIPh.oI2sCvvqbuwEfRQlIJwSBgSlgbZCT4QjgWMRsEnRZf8AqkgCUFZBTKJMYI7FvqgINPIsKkeQObFxzAihX.4jbgkGsNs8jBPxEpyIUXzMqOnJ50iuYaFokwA0q8cHyAnsiyrWjQnSIX36VkBbPiMIkqLFHEuTgLjT7fDVu.54wDkDrqSGiDsi1i6AIcUayNUjc.aClROPDRJjtVsohDXMij20UNZlokEZ14qrKMi5HiB12SqDWoAzMS6CsF+a+CeIzyvvavmaVCs4U7yMaYmIYAJNqfVLvNzvPuuoHzNkgqRGHAVojSHi5fD9TdYYyAj7Fd3JWqyQ3L.0is.tr.GHFFsNiL3dNTHOW.FhYn1vwVnxguMdTG+rr4tNocJnG0HXQKhhIXbcUT7KwG.RSCiJiHKnXlCGcalJwuZUvbsUJ2V3pXyULiPMTnM0l3GNXpvKaLL.vNjjQcdvJRaKstVCpkZBqw0J6tERl2N.jkBjxPkayFS4NnloVwpFGBDAXscLIKkRjenXfz35wSZwztyEi3LJETzsIBW0zPCIIohTWfouRHYbNMsnTEOgHCUJwEDsyM3vAekC.k1.3dv4iz0TGRF1OsuNyX01b94xcVWPNe5ZqnZKVle2ZzpikB1qmR4QJp2nG2a6TBkscAKeKD3osiqf20VAYksOp2w4ztC0Yyhmb3Mk88EwV6SsAyz125XOV8MDVWYucWQQBk6ObJH.lY8DGcexk1pfRLaYlk8O6BaN2eDx2.EUmlekU7zbExbG.KgzJ3gKHQaiur4jYGGKATBOV1lK7Gm.0fl7EtbpDDKvDy2vzua2FdvSvK195qfZWVWIliJrSudMT+DmJF.TfjGR.LcOUlUv1SkZMvWVVkacvrYJOAWfbLt9BXavZC+FpSx6f0tVrFYYm+AYmLnt199pcn8YZwrIJlqa4kKAaOqddWhdiDpx9LdHpCl1FoPDx73..DO6R4sPUhvISXRvIjCGIjNo1A3XXtCHglet.mmSpHTUe2RnEwd2lhlv3DBgYWCTkQBtwdQBzQTmiI6YYqKhVuxl3bc4Q8ZLKN1ZLG5UJy6ZQ4OBJ3zpbdIguVIFDMvZsXmFmUZsXnEHiLl7WaDMAmbNY5yonZUR5Io3icByUhGtzAQpcNwISOOtCZxNSJcMh6ZN4TwkTvTq6RDv1Fej.HmqZTeVcAD.PKDmkUo.X4P+jq1Ih.T6YoutfnUDUvfOi6zzK0TJZXqCHErj1ILHiX8ksDvEbyQg6U.MN23k.3D4nWp4QedWZM6YOllb7y49DnYCjWEIA1xkFo1fpJtMwltbXvVStBeU7Jd+LTil5t7vqK3+ag1heA.ZUNIShie+wKTTbyIkEmeAMt7Tai+nK75bztMfmPtHuc.BLcwmm6Jxua2nBJWY.lLe7UjvYpc7QbVgc3383ArGCmAhjxPEgoHo2An3cf9zkk0kOJUDuz3gSJzkVUQQj51sSrVrdrvKolmhPVhqaPE0USayZinfzMfMnEHY2dYG0jlAnZJyZNlUPxCKvwGyApjNLab7ntPKygpRDGk4Kp0z7gHc5HSfL5IBEanIoEZbk4v8SAjffmE5RMpiA5TEDSVIRdgK35lhbHWwsmME0TRbOYefemppuhTm8UJ7Q7IKjdwbBf5KxQnAWlh2JVQzwu2r6niW818iS.oEUTg7d3h9d.eYv3gkuy4EzXnOfFaPufFmoXT92JZ7xlgTV.NBk.g7MRBWXXSJOj32gixs1jIAdiVsEpQ3lji805xTLq96JdbeveOwicW.Eg+T7Xis1QRdSK6thSU2l.krVqJvchFd1uYxqkGZSdg4JMYvy9qqLxafsul4MeD4vHXS6Lpl65VKTTDdzsA6vLW61bMY.rssFKcsFbdcKc8d4dlUmkIbBpEjapNs5n9BFU2kNeaLugKfo08xdIv1YwfiSlq6MV0rOQ7DnuhYKX0R3lOVYbVfvn840dvGAnvuDfyD3NxEzsOl2+bfMTUHapb21SmC5LDC3yjQFc8y7QVYCgnZCAswo2Mnje7ROW.umY8FqqSyxslWVIUSAQltBZtcU4ITMi3cQAYbiUA4GkS5gtXm5Wlzc5PmuOH1QcnQM2cy07GRL6m74uf1bLGYCFV0loUlbGhEHrOB1gl5u7YQkqkkFgGH8L5R0SsxTUyIABAVr63iDLxFVCCEiVgCjKYuOcLkWggm9mMtLtsoZDB6xon8GE8CCaVRbd0kCEs4lhsvIkgMv8GQIUAAu1a3M0rlnb8TKHrUCuWO2gtwtc7qgmR516X0xNswxSt2yFpDfNJSZFB.BJ.ZBpo3RWKxrlb2QIaN3b4KGgUVV4GqQU1LHAwzBKwA3yUodCUlh3UTYE...RbAtb0M.JtgK4+qSFQGelRYeyHFrbSItijITs7YS4H9hfRKrnoDpRNEm8KIANjCeAVa8rtp5bm8dKFgoyGF5nLU5bA.tnHNeMKPEOEPOnRVRB4.1XPsLRqad7N30gX66VS4RcRjlcEnqhi6z5V3TlHBOY5LGHJ5I0ZnimVivbI1T2x7bzIjbpjKixbCBZhsqUlcii.LOrd4i+TNz7RBxGUNtkwviDSsBsFWxi.MB7.CLLNqW4BhOPuHCH0wSBwSL5zGrIrGvcsqtJvDq150iTKGnvZsIgctyrfva90DjwRq23ChjcKA4DFPo8Rak8ZzQ48BG0IZwOtpaFNsHuqGWMfQsbK5FaWM1.d8yo3sX8J3jCfAZKe8W5IMuJVdaEtYfsJ5vIqzYjZGTMTBfffG1znzE14t29.xJUGX7PuovWROtlrsRO7LoD80U1ZRuldr0nYTEYbvdPSkXikzimVROd9+1zi+Q.kcU.J+klhb337lHnY.aAQ64IwvSkatZY.ZdlN4BwBBErmGbz1UbGvo7mUTwIkjXY6mAr.zzFFlGvMHHWvXk17rLLHgL2OIv.wXZGvob.yE4XcXJEeQ1dNKK.psiZDhVK9bz3ETX+lBUJtQYCvERN6ZEpoAnQRLIPoRHss3J6wTVUkPE.AzEF0hyosL1hyAUweXIKqyyaAV.fii2nxXuf2NDgGOTfSwYiumSTSaddY2cjlvpym77O00mRIWPENKDNP7+rbj+ewLjMH4AhCm5wRu9+GyQ9ySQlgEEfgeqKMDQ5X0HS1wk7iFIDOODGSxYMaHmdpZ.eOOGew1B.Rw8zxFMgZRY+eAj3qaS3k.rpJXD01iqv.vhyDFBfurNucMEtard6ZJZd8ZJFXPb5iDW2BYIJVGfPZ20Grji7D2xpRsHovPGADXS9pLMUOZW3xB1yAalxiryY9PNx.BQRR6voQ4ZkL1hXrlbynLzJsSPRzHU0GJDDjY5BPALCcifDhGE6AqzIHngs33bylNJH2RUuws2RzqI2s0jneiXfbzPO+f.m3kykyWhhnVNoFRugkyjTaAPdtJbbPr.lgJ1.+HoKrQEXptfwLY3b1USuqcspR4rdigdDmpXOnyRJEZZpwnRTxG0UhvaionLPcRsXy4HZMi8bE7nrMySiCvdqrM0l8lmJhiGsvXDX16msO7rNgHc04rxL83yvXLtHljgKm606uCpzcqCkdBJJmACGaCiaNElBQWVSN7fVbaGmfXplEU+Uni85o6Wydgjb+Dr.A7UujrlUIaV.kWkePmBX4Du9CMpW.VjB20UNR7wpkbftPV8lG.aiCnjIU7q9XP4WQkKKTVvjW.he6ph8ZBb5BzM2+9ObSv2ti3WIOL7ml9vvu6MP+xET9eZFVH5Cb7xQC+blkW46McK2I7y3PnzyIWnrLCuvmIHH+8ubc2KjBzDDkbqBHL8EdcKe506+V+FmQixnn7.h9ttxhu86eJ7sAi99mJcS+tu4c+4u4cOs7b6zLmkoaoS.mkoZQrO2+yuRBe+s9Gbx6C9tm64O+tGecfe+sQtYV9tW550QVdd7oHfapvsU4Ktku+Imu+oMKKwaj73O7AJe9GO9R2A4sAuMi9kiEuH2GeQtO97eejbew+8ED7yR6Yg87OdUsd7iX8Uuxa793mnUu75UE6w2LD+vyueSC+8eAixiup4+EKxKy7iO9I5r7e0b+LI2l4On0elI3UA81J6SWKetY3uHt2rA23+weTdd7Gdac93sm28158ou4c+vKwYuELFEzQVdoprXow6+V2thMe62AzFz8YgmKAl237svtksmRkcAxEu+6d2h57tE4+WOTX3WbraybSYddPyWb3aknq4Giw2WzewMn46e5U+0qDd28e8mVmqe8Ou5b48hg3iHrr3PQRmbUvqsYJy8uU+pa+9yqJ1cuZIuUerW0vER6dt5X+lWqN1KaZuK4V8Ae3lM9tm08OtTl2c7vMri2jxh.Wljpfltjaqk6oBFR7BdolaO9.UPaVWY0yz9puaQx+Ty40OtNoSebiwD+t36t+g68WZDGjDE28Vq697Z98aePrzuO2o6SKA4shy95.K9qOote2psWQaR2zGuh+antjq+QqK4OWU728fRRmW7WVG+pufNt3L96gN9Z0b+lGnCCC759fB90OvX8Kszs+DSuVYeWRQjnSWSxRbvCR8WzK6a7BVl8hhEbka96u5Vz7KsWeq8MKfdPg+yM9OWddcvM2Ze+qCt4sAu6hiWS4ex6k8.2pW7+vy8rnSEOWO8GeP7V6m9rn+6t6Rhexexy6SE0mwH3uTF29KkQneoLB+KkQjeoLh9Kkwc+zLd6+t.79txKurs4t6DUneFs596oKbVh.eNZ8t+KnCFMdL

Multi-shape and multi-colour SVG

33

2.1k

13.0k

113.0k