Posted on www.linkedin.com January 19, 2017
SVG and CSS3 Snowflake
SVG, or Scalable Vector Graphics, are not as well-known as other web image formats such as JPEGs, gifs, and PNGs. SVG is a vector format that offers the advantage of being able to scale without losing detail. JPEGs have compression built with a trade-off between file size and image quality. Saving and resaving JPEGS can give some undesirable results such as images breaking down to jagged blocks of color. Creating SVG files of graphics like logos, arrows, and buttons avoids this issue, and the result is files that look great at all screen resolutions.
Two ways to add the SVG image to a web page are with the image tag < img src="snowflake.svg" /> and to add as XML. The course You, Me and SVG teaches how to write the XML, eXtensible Markup Language. The lines, geometric shapes, and blocks are written as points of coordinates. This language can look quite complicated very quickly. The hexagon points in the snowflake example are written this way.
points="300,150 225,280 75,280 0,150 75,20 225,20"
The big plus for doing it this way is that you can style the SVG code with CSS—cascading style sheets. In my example, I used the same set of points for the six snowflake arms. The CSS rotates them into position, changes the color, and can also change the stroke (line) size and opacity. If you roll over the image in Google Chrome, the rotation is also made with CSS3 transform rotate property. I experimented and decided to set the transition-duration to 4s, or 4 seconds, and the origin point to 230% to give the gentle drifting effect of a snowflake.
I used one my favorite Adobe Apps, Illustrator, to create the XML or points of coordinates for the snowflake arm. First, I drew one side of the arm and then rotated and joined the sides. At that point, I did a “save as” and chose SVG. The dialog box gives you options to save as a graphic or XML code. The code is then displayed in a text document. I only used the path information, pasted that into an HTML page, and then created my own styles.
There are other SVG generators available. I am an Illustrator fan and enjoy finding new ways to use the application. In the past, I have used it to export vector images into Flash in order to animate or to create graphics and charts. Years ago, fabric designs were done with an opaque watercolor named gouache. Gouache is a lovely paint. I have often heard other artists talk about a set they got from France or Italy that was magical and had colors they had never seen before or since. Getting the color flat and even for fabric designs was a tricky task that required lots of patience and skill. Illustrator vector graphics can create files with the similar color look that can be more easily changed and updated. However, if you find that magical brand of gouache please let me know!
View the example on Codepen
Resources for this article:
Posted on www.linkedin.com November 5, 2016
CSS3- Web Animations and Modal Windows
Resources for this article:
- Keenan Payne - Modal Window with HTML and CSS3:
- Alyssa Nicoll - Adventures in Web Animations:
- Chris Coyier Stripes in CSS: