Text and logo glitch effect

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 :slight_smile:

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 ...

:slight_smile:

3 Likes


Glitch.hype.zip (30,1 KB)

4 Likes