All posts tagged “svg

All the SVG-related tutorials, ideas and various posts in Stampede Constructs

Scrolling SVG Sunset
comment 0

Scrolling SVG Sunset

Have you played Firewatch? It is a mystery set in the Wyoming wilderness, where your only emotional lifeline is the person on the other end of a handheld radio. For me it’s definitely therapeutic. If you have, you might as well have visited their website. What do you see? A landscape illustration that moves along a parallax background. But what does parallax mean?

Read More

SVG drawing animation
comment 0

SVG Drawing Animation Using vivus.js

Vivus.js is a lightweight, standalone JavaScript class that allows you to animate SVGs, giving them the appearance of being drawn. A couple of preset animations are available called Delayed, Async and OneByOne, but the library also allows you to script the entire SVG drawing animation whatever way you want. By using one of the built-in animations you can simply use this library in just one line of code like new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);. The vivus.js constructor takes three parameters; ID of the SVG to animate, option object and callback to call at the end of the animation (optional). A more advanced usage is via scenario where you can define at what frame an animation must start and for how many frames it will last. Hit the button below to learn more.

View More   View Demo

SVG Responsive
comment 0

CSS: Make SVG Responsive

SVGs are pretty great when it comes to creating responsive resolution-independent logos and other graphics. An SVG can be embedded on a web page in many ways, as follows:

  • Inline embed in an HTML5 page using the <svg> tag
  • Embed SVG as image using the <img> tag
  • Embed SVG as image using the <object> tag
  • Using an iframe
  • As a CSS background image

In this brilliant article by Sara Soueidan, she covers embedding techniques, how to apply the “Padding Hack” and how to use inline media queries to make SVGs responsive.

View More

Filed under: CSS


5 things to learn by front-end developer
comment 0

5 Things Front-End Developer Should Learn in 2014

The web industry operates at a breakneck speed and so all front-end developers must continue to learn and keep up to date with the latest trends, methodologies, languages and techniques. In this compact yet excellent article by Joe Howard, you will find 5 useful skills you could master this year that will help you remain at the forefront of the latest web development know-how. Think SASS, Grunt, SVG, CSS animation and custom parallax.

Continue reading