EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update image glitch generator; change example image
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
lilith 2025-03-05 23:35:42 +01:00
commit cf0b76efbc
Signed by: lilith
SSH key fingerprint: SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
14 changed files with 221 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

26
styleguide/demopage/index.html
View file

@ -220,32 +220,26 @@
</p>
<figure>
<img
src="../assets/image/example_cat.jpg"
alt="Photograph of a young white-furred cat with blue eyes. It is leaning on its forelegs on some kind
of leopard-print fabric and looking at something behind the camera. The background is dark and
plain."
src="../assets/image/example_qrcode.png"
alt="A version 2 qrcode containing the text 'Never gonna give you up!'"
/>
<figcaption>
Example image without any distortion applied.
</figcaption>
</figure>
<p>
Now, in HTML you could simply specify <code>class="glitch"</code> on
the image tag to add the SVG filter dynamically, but this won't
render said filter in Apple's Safari, which has been a known issue
for many years. So instead, we also made
We wanted to add the ability to simply specify a CSS class on an
HTML image tag (or any other tag for that matter) to apply an SVG
filter dynamically, but this won't render said filter in Apple's
Safari (and sometimes not even in Chromium-based browsers), which
has been a known issue for many years. So instead, we made
<a href="../generator">a simple web-tool to apply the filter</a> to
an image and export it as a PNG. The tool also scales the image down
to ensure that the filter looks similar across all images.
an image and export it as a PNG.
</p>
<figure>
<img
class="glitch"
src="../assets/image/example_cat.jpg"
alt="The same photograph as before, except with a glitchy filer applied. The first effect applies to
bright edges, which get surrounded by pink and blue to their left and right hand side. The second
one distorts the image by offsetting parts of the image horizontally by seemingly random yet
somewhat osscilating amounts."
src="../assets/image/example_qrcode_distorted.png"
alt="The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get paintet pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts."
/>
<figcaption>Example image with visual glitches applied.</figcaption>
</figure>