Organizing SVG files with use and symbol elements offers many advantages but some quirks may arise when using transforms/animations.
Category: Web development
Categories
About charset UTF-8
Simple explanation of Unicode and character encodings
In Fun with canvas transforms a few basic examples of transforms with canvas where presented. Let’s make it a bit more interesting and create a tile of triangles to use as a seamless pattern as used in the Kaleidoscope toy tool. The point of depart is a triangular base fragment. The triangle is equilateral: all […]
In a previous post we’ve seen how to create a magnifying glass effect with canvas. But the position of the lens was static, and of course in a useful application a user must be able to move the lens to a point of interest. Let’s make aVue component for that!
It is surprisingly easy to manipulate images in the browser using the html5 element canvas. For instance, we can cut out part of the image and paste it back at another positon, in the mean time changing the shape or color of it. And it doesn’t have to be rectangles only!
Making use of coordinate system transformations can make drawing on the html5 element canvas much easier. But sometimes it is confusing how transforms work. What is it that is actually transformed? Let’s clear that up and see how to use it.
Categories
SVG sprites transforms
Investigation if working with SVG sprites is practical. Especially in combination with transforms.
Categories
Drag hiccups
Workaround of a rare bug I found with gsap’s Draggable and Wacom Intuos tablets on Windows 10
Categories
Looping video with autoplay
Looping a video with autoplay. Either with YouTube or html5 video tag
Categories
Bishops Swap Game
The Bishops Swap Game is a classic puzzle from the 7th Guest. Here is the start position of it: The end position is the same, except that the black and white bishops have swapped: the black bishops are on the top row, the white bishops are on the bottom row. Move the bishops to get […]