Hey there!
I need to do a text glitch effect and also a logo glitch effect. I attached the logo and an example. (I only need to do the first animation. Not the super glitchy at the end.) Any tips of how to do this in code?
Thanks 
To do this handcrafted:
1.) paste the code x-times into hyperectangles representing each color ...
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.19 157.44"><path id="hiq" d="M342.19,154.38a4.69,4.69,0,0,1-5.48,3,137.06,137.06,0,0,1-14-3c-15.09-4.56-29.79-10.19-43.39-18.21-6.62-3.89-12.68-8.75-19-13.11q-4.08-2.79-8.33-5.34c-2.9-1.73-3.72-1.57-6,.9a84.68,84.68,0,0,1-16.86,14.23c-10.29,6.66-21.68,9.52-33.81,9.63a69.22,69.22,0,0,1-10.68-.63c-8.53-1.24-13.87-6.37-16.63-14.39a46.87,46.87,0,0,1-1-27.95c3.81-14.29,7.62-28.59,13.89-42.07,4-8.53,8.66-16.57,15.77-23,6-5.37,11.79-10.92,17.81-16.24,4.44-3.94,9-7.8,13.71-11.37A37.53,37.53,0,0,1,241.91.21c2-.48,2.4-.25,2.12,1.75-.46,3.37-1.21,6.7-1.78,10.06-.27,1.62-.45,3.26-.58,4.9-.11,1.41.48,2,2,2a46.72,46.72,0,0,1,6.89.55,9.06,9.06,0,0,1,7,5.4c1.87,3.86,3.83,7.66,5.65,11.54a57.29,57.29,0,0,1,4.86,20.76c1.16,17.28-3.22,33.48-9.72,49.25l-.55,1.25c3,.58,6,1.12,8.91,1.73,15.52,3.19,30.92,6.83,45.73,12.58,7.29,2.83,14.07,6.49,19.81,11.92a34.75,34.75,0,0,1,9.88,15.14Zm-88.6-97.25c0-1.21.07-2.43,0-3.64-.53-7.88-4.82-13-12-14a21,21,0,0,0-6.9.1c-5.64,1.15-11.23,2.62-16.82,4a23.94,23.94,0,0,0-9.53,5.09c-9.2,7.78-15.11,17.8-19.52,28.82-1.24,3.1-.62,5.42,2.09,7.61a23.44,23.44,0,0,0,5.82,3.71c7.6,3,15.22,6.06,23,8.56,5.73,1.85,11.73,2.88,17.62,4.26a4.08,4.08,0,0,0,4.86-2.17,21.94,21.94,0,0,0,1.36-2.64c1.57-4,3.27-7.93,4.61-12C251.18,75.86,253.48,66.7,253.59,57.13Zm-20.17,53.7c-3-1.78-5.57-3.51-8.33-5a94.1,94.1,0,0,0-21.22-7.6c-6.29-1.59-12.61-3.06-18.93-4.52-2.3-.52-2.43-.47-3.05,1.71-1.34,4.7-2.72,9.4-3.77,14.17a22,22,0,0,0,.07,11.43,5.71,5.71,0,0,0,5.05,4.35c1.14.14,2.29.27,3.44.36,12.39,1,24.25-.87,35.36-6.67A44.45,44.45,0,0,0,233.42,110.83ZM25.87,25a324.47,324.47,0,0,0-5.34,41.55,73.36,73.36,0,0,1-1,7.36c-.33,1.9-1.26,2.37-3,1.77a22.54,22.54,0,0,0-2.17-.78,86.11,86.11,0,0,0-9.95-2C1.53,72.54-.11,74.24,0,77.14a23.53,23.53,0,0,0,1.27,6.58c1.34,3.9,3,7.66,4.48,11.52,1,2.72.94,2.76,3.93,2.93l1,0c3.3,0,5,1.28,5.82,4.47a31,31,0,0,1,.51,3.75c.65,4.56,1.07,9.18,2,13.68a19.72,19.72,0,0,0,6,10.95c3.9,3.46,11,1.44,12-3.68a70.64,70.64,0,0,0,.83-11.65c.08-3.85-.14-7.7-.28-11.55A3.16,3.16,0,0,1,39.45,101,47.55,47.55,0,0,1,55.9,96.43c2.76-.28,4.3,1.36,4.47,4.15a7.6,7.6,0,0,1-.14,2.13A63.63,63.63,0,0,0,59,120c.2,5.44.67,10.87,1.32,16.27.39,3.19,3.11,4.12,5.77,2.26A6.16,6.16,0,0,0,67.62,137a45.38,45.38,0,0,0,3.2-5A93.6,93.6,0,0,0,80,101.35c.64-5.12,3.29-7.52,8-8.49a151.23,151.23,0,0,1,32.68-2.55c9.2.15,14.53,6.82,13.43,16-.53,4.43-1.12,8.86-1.31,13.3a49.11,49.11,0,0,0,.58,9.84c.51,3.26,2.71,5.06,6.09,5.58,3.2.5,5.14-1.05,6.65-3.5a14.52,14.52,0,0,0,1.71-3.38c1.44-4.95,3-9.89,4.06-14.93,2.82-13.37-6.49-29.4-19.56-33.56-9-2.87-18.46-4-27.89-5a141.85,141.85,0,0,1-15-1.76c-5.07-1-5.1-1.51-5.54-6.67,0-.61-.1-1.21-.1-1.81,0-5.54-.45-11-2.71-16.17-1.86-4.24-3.88-8.4-7.18-11.76-.92-.93-2-1.82-3.46-1.33a1.91,1.91,0,0,0-.18.5c.06,6.43-1.17,12.7-2.41,19-1.12,5.61-2.42,11.18-3.61,16.77a2.37,2.37,0,0,1-2.39,2.07c-.71,0-1.43.17-2.14.16-6.27-.09-12.54-.18-18.8-.33-3.18-.07-3.76-.5-4.1-3.69-.85-8-1.67-16-2.3-24-.64-8.19-4-15.32-8.2-22.58C26.1,24,26,24.46,25.87,25ZM153.06,43.29a29.84,29.84,0,0,1-2.58-8.3c-.21-1.3-.47-3-1.95-3.06-.83,0-2,1.26-2.5,2.23-1.86,3.92-3.62,7.89-5.19,11.93a28.11,28.11,0,0,0-1.07,15.29c.62,3.55.67,3.55,4.35,3.43A8.71,8.71,0,0,0,152.75,58c.69-2.87,1-5.83,1.57-8.91C153.94,47.21,153.91,45.05,153.06,43.29Z" transform="translate(0 0)" style="fill: #323232"/>
</svg>
2.) change the style="fill: #323232" corresponing to each color
3.) play around with Hypes animationproperties ...
4 Likes
Sorry for a very very late reply. Thank you so much for this! I ended up doing it in after effects since they needed a more advanced glitch with the logo and text breaking apart.
I will definitely use this in the future tho
1 Like