Svg Css3 Transforms And Animations
Contents |
Animate.css and WoW
Before you dive into details, you can try
animate and
wow to trigger it on scroll.
So you can just add classes to your elements, like hinge
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
</script>
<script>
new WOW().init();
</script>
</head>
<body>
<div class="animated fadeInRightBig">
Content to Reveal Here
</div>
</body>
</html>
Transform property
div {
transform: scale(2,3);
}
Note that element still occupy initial size. If you wrap with <span> than you
need to set display: inline-block (width and height can only be applied to
inline-block or block).
2D transforms:
translate(50px, 100px)is 50px right and 100px downrotate(20deg)clockwisescale(2,3)width 2 times and height 3 times biggerskewX(20deg)skewY(-10deg)andskew(20deg,-10deg)matrix(6 params)
another usefull property is transform-origin: 50% 50% 0 which
move the base of transform, on x, y and z axis (for 3D).
3D transforms:
rotateX(20deg)around X axis (horizontal)rotateY(20deg)around Y axis (vertical)rotateZ(20deg)around Z axis (toward user)- translate3d scale3d rotate3d
usefull property is perspective: 400px is how many pixes is
3D element placed from the view and perspective-origin: 10% 10% bootom
position on x and y axis.
Transition property
Transition allows that element change property smoothly, over given duration.
Some of the timing functions could be: ease, ease-in, ease-in-out,
linear.
div {
transition: width 2s ease-out 1s;
// or
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 1s;
}
usually we change properties on hover.
Animation property
so you don’t need user action to animate…
div {
animation: example 5s linear 2s infinite alternate;
// or
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes example {
0% { width: 10px; }
25% { width: 100px; }
100% { width: 110px; }
}
Inkscape
Usefull shortcuts:
- select two elements and
CTRL + +union,CTRL + -difference (top image is substracted from bottom image) - to see the SVG code use Edit -> XML Editor
- zoom canvas https://inkscape.org/doc/keys.html#idm452 zoom in with middle
click, zoom out shift+middle click, zoom specific area ctrk+middle click drag,
quick zoom with
qzoom to selection3page5 - inkspace fish https://www.youtube.com/watch?v=l3BHcregNUs&t=300s
- sozi http://sozi.baierouge.fr/pages/10-about.html
Svg
You can create SVG in Inkscape (Gimp can not export in SVG). If you open existing svg or copy paste some paths, in Inkscape you can Edit -> “Resize page to selection” to crop to fit size to include only paths. When you export you should optimize online https://jakearchibald.github.io/svgomg/ or inline
svgo file_name.svg --pretty --disable=cleanupIDs
or download inkscape extension
https://github.com/juanfran/svgo-inkscape and use Save as "optimized with
svgo" and uncheck Plugin 2 -> CleanupIDS if you want your grouped ids to
remain, so you can target them in css.
In rails you can use svg inliner https://github.com/jamesmartin/inline_svg In inkscape we can use multiple layers with same name, so id is autogenerated, and cleaned with svgo, so better is to use groups.
- main
<svg width="123" height="123" viewBox="0 0 123 123">- view box has four params: x, y, width, height (those are units inside svg)
- group
<g id="petals" fill="#f00">group elements - text
<text x="0" y="200" dx="10">Some text</text>x is distance from left, y from top, dx is another drift - circle
<circle cx="1" cy="1" r="5" stroke="green"/>cx is center x, r is radius. - rectangle
<rect x="1" y="1" width="10" height="10" rx="1" style="" />rx is radius of corner - ellipse
<ellipse cx cy rx="10" ry="20"/>cx is horizontal radius - line
<line x1="0" y1="0" x2="10" y2="20" /> - polygon and polyline
<polygon points="200,10 250,190 160,210"/> - path: M - moveto, L - lineto, Z - closepath, H - horizontal, V -vertical
lowercase letters is relative position, uppercase is absolutely.
<path d="M 50 0 L 75 200 L 225 200 Z" />
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Curve_commands
C cubic curve C x1 y1, x2, y2, x, y first two are control points, (x,y) is end
of curve.
C followed with S S x2 y2, x y is shorten version of C which is reflection.
Q quadratic curve Q x1 y1, x y is simpler since both slopes are equal. Also it
could be followed with T T x y which will use same reflection.
Elliptical arcs are complex to write A rx ry x-axis-rotation large-arc-flag
sweep-flag x y
Reuse components with <defs> and <simbol>.
http://vanseodesign.com/web-design/svg-definition-reuse/
Attach another element with <marker>
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker
CSS Animations
You can animate using 3 ways: with css, with <animate> and with javascript.
video
SVG Animate with css
For SVG there are custom css which can be inline like fill="blue" or in css
fill: bluecolor of element areastroke: pinkcolor of line, text or outlinestroke-width: 5thickness or line, text or outlinestroke-linecap: buttroundsquareending of open pathstroke-dasharray: 10length of dashes and spacesstroke-dashoffset: 10when to start dash or space, this is used for line animation along the pathtransform:rotate(20deg)translate(x,y)
Here is some example of text shadows: https://www.w3.org/People/Dean/svg/texteffects/index.html https://www.w3schools.com/graphics/svg_feoffset.asp
- to add blur
```
asd
</degs>
But better is to add another original item after filtered (so filtered is in
background).
If you want to apply multiple times (so it is bolder) you can use `feMergeNode`
</defs>
* to show text along the path use
* pure text in pure css can be different color with help of fill transparend and
background
https://mawla.io/team/
.colorize-text-background background: radial-gradient($color-a, $color-b 60%, $color-c %20) -webkit-background-clip: text -webkit-text-fill-color: transparent
You can also animate saturation or sepia using filter
https://www.cssfilters.co/
# SVG Mask
* jpeg does not support mask (png does but is not optimized for big images), to
use jpeg and png mask and one svg to combine them