Responsive Cut Out Collage: How to? - HTML vs SVG vs Canvas

Ok Campers: a tricky one…

EDIT: I changed the title into one that describes better my problem

I am trying to set an scene with several overlapping PNG images placed according to a background PNG image.

Here something about the collage technique.

However the background image will be moved to the right for mobile viewports. The overlapping PNG images should move accordingly.

Here an example of my current progress: https://codepen.io/ecccs/full/QWNBMPJ

To better understand my idea you can open the pen above with developer tools to see how they are NOT positioned correctly in simulated mobile views.

To see what it is happening to the background image you can do the same with the following pen: https://codepen.io/ecccs/full/ExKRary

The solution for that pen was already discussed here.

I would eventually apply some animations to each of the overlapping PNG images. In all cases, the chair in the background PNG image is central. It also should be congruent - it is a party in a living room, so dimensions and positions are relevant.

Any further ideas, hints, opinions, etc about this are more than welcome!

I am now wondering whether setting the scene in canvas or svg would not be a better option., What do you think?

EDIT: I have found at least one tutorial using Grid. I might still need some insides from other campers. I will also share my findings with you alongside the project.

PNG ROUTE

This is a follow-up of my progress using CSS to solve this problem. As mentioned previously:


For those interested in the topic that I am working on, check this nice tutorial for a useful technique:

The author is so willingful to help that she made a step-by-step reconstruction of the tutorial in Codepen. And she has other tutorials for us!! Check her! https://codepen.io/brianacamp

EDIT: I explored her solution to see if it fit my problem. In the way she set it, it didn’t. My problem so far is that Grid / Flexbox is normally used to accommodate/order the elements to the existing viewport. I have though a set of elements which size is not known in advance that shouldn’t accommodate to some mobile modes but cropped.


I was thinking that the problem I have is that I am working with several PNG images of different sizes. When the browser tries to accommodate them to the viewport the values of each transformation are not proportional, even if the transformation rule is the same for all. It is a metric problem (see post about Grid in this same thread). So what if all the images have the same size as the background image?

EDIT: It worked (with caveats…)! You can see a test in this codepen by changing the size of screen - horizontal axis. What I did was to resize the transparent background of the figures so the whole image had the same size of the background PNG image. I used an image editor (Inkscape) for that task and I saved as low quality for the test. Then you can see I nested the PNG images in the HTML. What the caveats? (1) The nesting in HTML; (2) Positioning should be worked on the editor, not in HTML; (3) My plan is to create and animate a poppet: using this technique feels cumbersome as it is likely each part of the poppet should be resized and positioned according to the background using the editor first.


I will stop working with this one for now unless I find serious caveats working with other techniques. t is a good one for several effects but for my specific case feels cumbersome.

But before moving on let me share an old but inspiring poppet animation in pure HTML/CSS3, with no JS: https://css-tricks.com/css3-walking-man/. Here the project in Github. A project made by @chriscoyier, one of the most prolific authors in CSS-Tricks and Codepen.

USING A GRID

For those who share same interest about this particular problem:

  1. Today I came across with the idea that a good way to see it is by creating a fixed grid that would allow me to compare different views. I didn’t find any transparent grid so I tried to find a CSS solution using… GRID. Here is what I found: https://stackoverflow.com/questions/32556463/overlay-grid-on-responsive-image, and here is how it looks like: https://codepen.io/ecccs/pen/oNxajEy.

See you around, Campers!

EDIT: Trying to find a conventional metric that fit all cases using plain CSS might be tricky. In this particular approach under some conditions the background image resized itself to fit the background and that meant using more or less pixels depending on screen size, turning inconsistent the comparison between screen sizes using the CSS-based grid. Still it is a good approx for this project. SOL?: load a copy of the image but with a grid, so the grid is always the same for all views, and then related that grid to pixels. MORE?: try using either canvas or svg boxes.


This analysis of the problem led me to a possible solution when working on the PNG Route.

The idea of a metric convention is in my opinion better implemented in the SVG Route because SVG poses a specific metric transform independent of the viewport.

SVG ROUTE

I was testing the use of SVG images and how to fit the whole scene. The hardest part of the using svg API is that it might prove hard to scale, based on this reference. Another reference that discuss this situation is this one.

However I found an interesting use of object-position as a possible solution when mobile portrait mode is on. Here you can find my test using a derivation of the technique. It will require more testing.

Useful as a reminder of the use of svg, here an interesting reference.

EDIT: I substituted the PNG image with an SVG one as a background image in this codepen. A simple way of how to do that is suggested by this css-trick article. The effect is the SVG keeps the corresponding aspect ratio. Although very enthusiastic about this approach there is the possible caveat that when used as <img> all the CSS control over the svg is lost, as read in this article. I have to test if true…


I have been testing an inline SVG route and seems rather promising… I modified my test to introduce some changes by using the viewbox attribute.

By the way… if you are interested in SVG you can check this link to understand the differences between viewport and viewbox and sizing in general using this API.

I like SVG because it would offer certain level of flexibility.

EDIT: What is it promising about this one? (1) The current setup in Codepen keeps aspect ratio; (2) The viewbox can be set so it occupies the viewport; (3) 1 and 2 mean it is then about building a scene that keeps the correct relations between elements; (4) It is possible to configure the position of the viewbox by manipulating is x and perhaps y values so it translate to the right place, likely dynamically (ie. JS).


If you are interested, a first test of dynamically moving the SVG viewbox based on the offset width of the most right svg object as resizing - horizontal axis.

It is important to notice that there is no responsiveness in terms of resizing of the figure, as you might probably induce from responsive design. This is on purpose: As I conceive my project the size of the figures must always be the same in all modes, but when for smaller devices, I want the whole scene to be focused on just a specific section of the whole.

Useful links:

EDIT: I made another codepen to test the application of these concepts into my project - xy axes. Have a look if you are interested, just resize the screen to see what I mean. The best results so far.

CANVAS ROUTE

I will also explore the CANVAS API. Also a hard call in terms of keeping aspect ratio but probably less than SVG. Not easy to move a section out of view. Here my first trial.


After a better evaluation of the CANVAS I decided not to go this way for my project.

I realized that in order to get the effect I wanted I should code the position of the rendered objects in a slightly complex way than how I do for SVG. Moving the CANVAS renderer after resizing won’t move the objects in it, as you can see in my codepen test.

This is similar to what happens with SVG. However, with SVG I still has access to CSS effects.

There are other good reasons why not to go CANVAS for this project. Here it is a comparison between SVG and CANVAS if you want to read more.

1 Like