Categories
Games

Alexander knight puzzle

Recently released: the Alexander knight puzzle. The goal is to swap the positions of the knights per colour under a few simple rules.

Categories
Web development

Organize SVG with <use>, but beware of transforms

Organizing SVG files with use and symbol elements offers many advantages but some quirks may arise when using transforms/animations.

Categories
Web development

About charset UTF-8

Simple explanation of Unicode and character encodings

Categories
Geometry JavaScript Mathematics Patterns Web development

Create seamless patterns of triangles

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 […]

Categories
Wordpress

Remove login shake effect WordPress

If you search for a way to get rid of the shake effect of the WordPress login form when the input is erroneous you’ll find this snippet everywhere: That used to work but the action has moved to login_footer (since somewhere aound WP 5). So this’ll work:

Categories
Graphics JavaScript Web development

Magnify images with a draggable loupe

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!

Categories
Graphics JavaScript Web development

Creating a magnifying glass with html5 canvas

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!

Categories
Geometry Graphics JavaScript Web development

Fun with canvas transforms

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
Web development

SVG sprites transforms

Investigation if working with SVG sprites is practical. Especially in combination with transforms.

Categories
Web development

Drag hiccups

Workaround of a rare bug I found with gsap’s Draggable and Wacom Intuos tablets on Windows 10