SVG Animationen (Fortschrittsbalken) Updated 2019

DE:Der alte Text von 2010:
EN: The old text from 2010:

Ich hab mich in den letzten Tagen ein bisschen mit SVG Animationen beschäftigt und diese drei Fortschrittsbalken gebastelt.

Die Animationen sind alle mit JavaScript gemacht und mit sollten mit den aktuellen Versionen von Opera, Safari, Chrome und Firefox gehen. der Internet Explorer darf allerdings nicht mitspielen, warum selbst das aktuelle Prerelease nicht viel besser ist habe ich ja bereits geschrieben. Der verwendete JavaScript Code ist relativ einfach, er eignet sich also gut als Beispiel für SVG Animationen. Es ist aber auch das erste Mal das ich was mit JavaScript programmiert habe also könnte man es vielleicht noch verbessern. Den Code stelle ich unter die MIT-Lizenz, also viel Spaß beim selber experimentieren.


Zum erneuten anzeigen einfach den "Neu Laden" Button oder die Taste F5 drücken.

Update 2019:

DE: Das direkte einbinden in die Seite geht leider nicht mehr. Die Dateien können hier heruntergeladen werden:
EN: The direct integration no longer works, you can download the files here:

https://www.dropbox.com/s/wa63b9qxg0p7i0f/progressbar_animatet.svg
https://www.dropbox.com/s/fc6qhtm2n772fod/Reagenzglas.svg?dl=0
https://www.dropbox.com/s/9qjrrxx3mp06nkv/progressbar_animatet_simple.svg?dl=0

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Low polygon 3D europe map

Bild
Hello my latest little project is a 3D low polygon map. I used Blender and Gimp to create this map: I've started with an elevation map of Europe I found on the website from "The European Environment Agency" (EEA). Thank you EU for this image: http://www.eea.europa.eu/data-and-maps/figures/elevation-map-of-europe Then I had to cut of the black border with Gimp and created a second image as height map: For this step I converted the image to black and white and then used the curve tool to make the mountains darker. This will make the mountains in the final image higher and easier to discover. Then I used this tutorial to create the 3D image in Blender: http://johnflower.org/tutorial/make-mountains-blender-height-maps But I didn't  subdivide in as many parts than the tutorial ans I haven't smoothed, because I wanted a low polygon look of my image and not a realistic one. After this step I gave the plane the original colour image as textu...
Mehr anzeigen

Maps for Photo Books

Bild
  I love to add maps to the photo books. Here is a collection of some of them.    This is a example of a simple map without the visited places marked. I just added the big Texas label and the overview map of North-America. I used Inkscape and Gimp for this map.    This is a map I made as a title for a calender. I marked the locations from the photos. This image was made with Inkscape. This map is a mix of elements with Gimp extracted from old maps and then composed to a new map in Inkscape.  For this map I got the base image from Mapbox . Then I added the route and some details with Inkscape. To create the route I used Google My Maps , exported it as KML file and converted it to SVG. Here I used a image from the NASA and added the flight route with Gimp and the text boxes with Inkscape. Here I used Blender to create the map. I wrote a longer post here: Low polygon 3D europe map Google My Maps and Inksc...
Mehr anzeigen

Depth Map from Gallaxy S10 Photos

Bild
If you shoot with an Samsung Galaxy S10 Plus photos in the "Live Focus" mode Samsung saves four images. The first one is the one you see if you open the photo with any application. The second one is the image without any filter applied and the third one is the shot from the wight angle lens. You can get the images from all cameras with the command line tool "exiftool" and this command: exiftool -embeddedImage -a -b -W %d%f%c.%s test.jpg Image 1, with blurred background "effect" applied Image 2, without any filters added Image 3, a photo from the wight angle lens The fourth image is a depth map. The depth map is a raw 8-bit 1008 x 476 array and you can extract it with this command: exiftool -EmbeddedImage -b test.jpg > output.data To open the image you can use the Raw data loader from Gimp. Use File -> Open... and then select the image. Now you need to change the image type to "Gray 8 bit", the wight to "1008...
Mehr anzeigen