Responsive Sprites

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-18
Updated:
2016-11-18
Tags:
animation
Modern day book fo Kels

A sprite the has less and less details for smaller sizes.

Uses an attribute selector to select all elements whose class start with "star". 
It's because Illustrator adds a lot of extra ids after the class names.
  [class^="star"] {
  animation: blink 2s ease-in-out infinite both;
}

[class^="dot"] {
  animation: blink 5s -3s ease-in-out infinite both;
}

@keyframes blink {
  50% { opacity: 0; }
}
With this, elements fade out as she resizes the screen.She applies some media queries to change the appearance of some of the elements inside the SVG.

Then.

Javascript.

She needs to update ​viewBox​ based on a media query change:
  var shape = document.getElementById("svg");

// media query event handler
if (matchMedia) {
        var mq = window.matchMedia("(min-width: 500px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
}
// media query change
function WidthChange(mq) {
        if (mq.matches) {
            shape.setAttribute("viewBox", "0 0 490 474");
        }
        else {
            shape.setAttribute("viewBox", "0 490 500 500");
        }
};
This will change which part of the SVG is shown (the mobile or desktop drawing)You can apply this to an infographic. 

Tells some examples how much infographics increase leads (shares of an article).

Shows great examples of responsive infographics. 
Accessibility 

you can add ​<title>​ tags for example.