This example demonstrates how to use gradients in SVG, defining the stop colors completely via CSS. The advantage of this approach is that we can use gradients in shapes without having to hardcode the stop-color attributes when defining the gradients in the SVG element.
Pablo Navarro pnavarrc
This gist shows how to include an SVG image that adapts to the size of its container.
For this technique to work, the SVG element should have the attribute viewBox set with the image dimensions, and the attribute preserveAspectRatio="xMinYMin meet", and it shouldn't have the attributes width and height.
The container should have a width defined, as a percent or as a size in pixels.
Inserting SVG images as DOM nodes instead of inserting them as images or objects. In this example, we load an image stored as JST templates and insert the image into the DOM, allowing to modify its style via CSS and its attributes with JavaScript.
In this gist, we change the whale color and make it move using D3.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip | |
| ne_50m_admin_0_countries.zip: | |
| curl -LO $(URL) | |
| ne_50m_admin_0_countries.shp: ne_50m_admin_0_countries.zip | |
| unzip ne_50m_admin_0_countries.zip | |
| touch ne_50m_admin_0_countries.shp | |
| countries.json: ne_50m_admin_0_countries.shp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/cultural/ne_50m_admin_0_countries.zip | |
| ne_50m_admin_0_countries.zip: | |
| curl -LO $(URL) | |
| ne_50m_admin_0_countries.shp: ne_50m_admin_0_countries.zip | |
| unzip ne_50m_admin_0_countries.zip | |
| touch ne_50m_admin_0_countries.shp | |
| countries.json: ne_50m_admin_0_countries.shp |
Moiré Patterns are patterns that results from overlapping two periodical patterns (series of straight lines, for instance). This demo allows to create Moiré patterns by changing the relative angle between the patterns, the number of bars, the bar width and the color of the bars.
This demo uses D3 to create the patterns with SVG rectangles.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Download and Transform the 1:50m Country Shapefiles from Natural Earth | |
| # http://www.naturalearthdata.com/downloads/110m-physical-vectors/ | |
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip | |
| # Download the zip file from the Natural Earth server | |
| ne_110m_land.zip: | |
| curl -LO $(URL) | |
| # Unzip the shapefiles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Download and Transform the 1:50m Country Shapefiles from Natural Earth | |
| # http://www.naturalearthdata.com/downloads/110m-physical-vectors/ | |
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip | |
| # Download the zip file from the Natural Earth server | |
| ne_110m_land.zip: | |
| curl -LO $(URL) | |
| # Unzip the shapefiles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Download and Transform the 1:50m Country Shapefiles from Natural Earth | |
| # http://www.naturalearthdata.com/downloads/110m-physical-vectors/ | |
| URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/physical/ne_110m_land.zip | |
| # Download the zip file from the Natural Earth server | |
| ne_110m_land.zip: | |
| curl -LO $(URL) | |
| # Unzip the shapefiles |