Search results for using svg stroke attributes Scripts fewliveasync.js

Learning SVG

by Brian Rinaldi

…animate; in our case, that will be stroke or fill. Then you have the from and to attributes; these define the starting and ending states of the animation. The value…

Using SVG Stroke Attributes

by Brian Rinaldi

…in the browser, or making edits to an existing graphic. There are a number of stroke related attributes within SVG that allow us to control the details of our strokes,…

Creating Image Galleries with Clipped Images Using CSS Pointer Events and SVG

by Brian Rinaldi

…SVG </object> Here is a live example so you can see the result: [iajsfiddle user=”remotesynth” fiddle=”rRg5e” height=”450px” width=”100%” show=”js,resources,html,css,result” skin=”default” show=”result”] The good thing about using SVG is that the…

CSS Regions Matter

by Brian Rinaldi

…we may face when using CSS Regions, and talk about possible solutions to common Regions problems. CSS Regions Problems and Possible Solutions CSS regions have two prominent “problems” today: non-semantic…

Animating Inline SVG Icons

by Brian Rinaldi

…also change some of the details of your SVG such as the color of the stroke (border) and the fill (background). Adding Animation Now we can go in and apply…

Taming Asynchronous JavaScript Programming with ECMAScript6

by Brian Rinaldi

…underscore = require(‘underscore’) string = require(‘underscore.string’) linklib = require(‘linklib’) { using, _ } = require(‘./chain’).chain.init() using(jQuery) using(underscore) using(string) using(console) using(linklib) getUser = (user) -> _(“https://npmjs.org/~#{user}”) .get() .extractLinks() .filter( -> /package/.test(arguments[0])…

A JavaScript Build System Shootout: Grunt vs. Gulp vs. NPM

by Nicolas Bevacqua

…just CLI tools. In fact, npm is able to run any shell script. Let’s dig into that! Using shell scripts in npm tasks Below is an example script that runs…

45 Useful JavaScript Tips, Tricks and Best Practices

by Saad Mousliki

…object constructor function Person(firstName, lastName){ this.firstName = firstName; this.lastName = lastName; } var Saad = new Person(“Saad”, “Mousliki”); 6 – Be careful when using typeof, instanceof and constructor. typeof :…

Understanding the SVG viewBox and viewport

by Brian Rinaldi

…The viewport is set through height and width attributes within the <svg>. If we choose to not define a viewport (although I have encountered issues with Firefox here) the dimensions…