Paste this code on any site with a heavy interface (twitter for example) and run a performance test:
<div style="position: absolute; contain: strict; width: 100vw; height: 100vh; z-index: 2000; top: 0; left: 0; background: white; backface-visibility: hidden;">
<svg viewBox="0 0 100 100" height="40px">
<rect width="40" height="40" x="93.5319">
<animate attributeName="x" dur="1000ms" repeatCount="indefinite" from="0" to="100"></animate>
</rect>
</svg>
</div>
For incomprehensible reasons to me, the "update layer tree" takes several ms on the core i7 4770k:
example on twitter.com
And if you insert the same code on an empty page, then everything works very quickly. Why is this happening and how to fix it?
Related
I'm building a Shopify for my dog leash products. I had a cool idea to have an animated disappearing paw print path show up on random parts of the screen going in different directions, while avoiding any text. The animation would appear for a certain amount of time, for a certain frequency, and a certain number of simultaneous instances. Is there any suggestions or code to implement this animation with this type of behavior to the store's code? I don't have too much experience with website code, but I'm savvy enough to figure it out with some guidance and instruction.
Any help is greatly appreciated!
The most research I did was figuring out how to add an animation on scroll library but I'm not sure if that's in the right direction.
It's not simple like you think. You can't just copy some code and it will work. It is tricky and requires customization based on which theme you are using and how it's structured.
But if you know a little bit of CSS and JS i think you can get away with it by modifying the code below:
The HTML:
<svg id="svg-sprite">
<symbol id="paw" viewBox="0 0 249 209.32">
<ellipse cx="27.917" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
<ellipse cx="84.75" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
<ellipse cx="162" cy="47.749" stroke-width="0" rx="34.75" ry="47.751"/>
<ellipse cx="221.083" cy="106.333" stroke-width="0" rx="27.917" ry="35.833"/>
<path stroke-width="0" d="M43.98 165.39s9.76-63.072 76.838-64.574c0 0 71.082-6.758 83.096 70.33 0 0 2.586 19.855-12.54 31.855 0 0-15.75 17.75-43.75-6.25 0 0-7.124-8.374-24.624-7.874 0 0-12.75-.125-21.5 6.625 0 0-16.375 18.376-37.75 12.75 0 0-28.29-7.72-19.77-42.86z"/>
</symbol>
</svg>
<div class="ajax-loader">
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
<div class="paw"><svg class="icon"><use xlink:href="#paw" /></svg></div>
</div>
The CSS:
.ajax-loader{
position: absolute;
top: 25%;
left: 50%;
transform-origin: 50% 50%;
transform: rotate(90deg) translate(-50%, 0%);
font-size: 50px;
width: 1em;
height: 3em;
color: #d31145;
.paw{
width: 1em;
height: 1em;
animation: 2050ms pawAnimation ease-in-out infinite;
opacity: 0;
svg{
width: 100%;
height: 100%;
}
.icon{
fill: currentColor;
}
&:nth-child(odd){
transform: rotate(-10deg);
}
&:nth-child(even){
transform: rotate(10deg) translate(125%, 0);
}
#for $i from 1 through 6{
&:nth-child(#{$i}){
animation-delay: #{ (($i * -1)+6)*0.25 }s;
}
}
.no-cssanimations &{
opacity: 1;
}
}
}
#keyframes pawAnimation {
0%{
opacity: 1;
}
50%{
opacity: 0;
}
100%{
opacity: 0;
}
}
This code is one of the 4 examples i found online, i hope they can help you:
https://codepen.io/motionimaging/pen/MKrQXa
https://codepen.io/ngets/pen/qMXgrq
https://codepen.io/kylojen/pen/VxXXNm
https://codepen.io/trungk18/pen/BLYNmM
I tried to adapt a codepen thing for waves with svgs.
Works just fine in Chrome, Safari and Edge, but not in Firefox (and IE, but I don't care too much about that).
I suspect some Syntax problem with the svg. The animation works just fine, but the svgs are not displayed correctly. In Firefox it's just a straight line instead of waves.
Anyone out there, that has an idea about that?
Thanks a lot in advance.
.waves {
width: 100%;
height: 7em;
position: relative;
overflow: hidden;
background-color: #f6f9fc;
}
.wave
{
width:calc( 100% + 4em );
height:100%;
position:absolute;
left:-2em;
background:bottom center repeat-x;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
/* Individual wave layers */
.wave_1
{
animation-name:wave_1;
animation-duration:3400ms;
animation-delay:-1200ms;
z-index:2;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #e0e7f1;
top: -3em;
}
.wave_2
{
z-index:1;
opacity: 1;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="2000" viewBox="0 0 600 2000"><path fill-rule="evenodd" clip-rule="evenodd" fill="#e0e7f1" d="M600 2000c-100.8 0-141.6-39.892-240-39.892S98.4 2000 0 2000V0h6000v2000z"/></svg>');
background-position:bottom left;
background-color: #245aa6;
top: 0em;
}
#keyframes wave_1
{
from { transform: rotate(0deg) translatey(-0.61em) rotate(0deg) ; }
to { transform: rotate(360deg) translatey(-0.61em) rotate(-360deg) ; }
}
<div class="waves">
<div class="wave wave_1"></div>
<div class="wave wave_2"></div>
</div>
I have next svg object which shown well in Chrome and AI, but it shows not correctly in Firefox. In my svg i have 2 textPath tags, i try to set italic font-style for both of them however only 1 textPath effected. How can i fix it if i still want 2 textPath elements be in 1 svg object?
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><g id="0.13161635632674862"><text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Carter One';" itemzoom="0.4305468677769046 0.45416505875126006"><textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath><textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath></text></g><defs><path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path><style>#font-face {
font-family: 'Carter One';
src: local('Carter One'), local('CarterOne'), url(http://fonts.gstatic.com/s/carterone/v9/VjW2qt1pkqVtO22ObxgEBfk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}</style></defs></svg>
The problem seems to be that the font you selected, Carter One, has no italics variant. So the browser needs to use a fallback (which, as far as I know, amounts to skewing the glyphs). Firefox seems to fail with the simultanuous task of "inventing" an italics font, painting a stroke and writing it on a text path.
It is not a problem to use multiple textPath elements inside one text. Only when using both a non-zero stroke-width and font-style:italics a font with a known italics style needs to be referenced. For example Lato has one:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
<textPath xlink:href="#textPath-item-4"><tspan dy="0" style="stroke-width: 0px;">Create</tspan></textPath>
</text>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>
As an aside, while I don't know exactly which browsers support it, at least most modern browsers seem to know the paint-order CSS property, which removes the need to paint the text twice. paint-order:stroke paints the stroke below the fill:
<svg width="229" height="95" viewBox="0 0 98.59523272091116 43.1456805813697" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="0.13161635632674862">
<text fill="#FF0000" stroke="#FFFF00" data-stroke="FFFF00" stroke-width="0px" stroke-linecap="round" stroke-linejoin="round" x="" y="2.1527343388845233" text-anchor="start" font-size="24px" font-family="Carter One" data-textcurve="1" data-itemzoom="1 1" data-textspacing="0" style="font-style: italic; font-weight: normal; text-decoration: none;font-family: 'Ubuntu';" itemzoom="0.4305468677769046 0.45416505875126006">
<textPath xlink:href="#textPath-item-4" style="stroke: rgb(255, 255, 0); stroke-width: 3.31429px;paint-order:stroke" data-stroke="rgb(255, 255, 0)"><tspan dy="0">Create</tspan></textPath>
</g>
<defs>
<path id="textPath-item-4" d="M 4.5 28.240596987479876 A 5443.099053742821 5443.099053742821 0 0 1 99.4987942273035 28.240596987479876"></path>
<style>
#font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCp6KVjbNBYlgoKejZPslyPN4E.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
</style>
</defs>
</svg>
I have a light gray SVG button in a label with black background. The SVG button seems 'blurry' / 'bolder' on the edges. This is not something I can notice when using a white background.
I suppose it is related to the high contrast between background and asset colour.
How can I get this better?
Btw, I'm using the SVG has background image of a div and respecting the original size of image.
CSS code of the div containing the SVG asset:
position: absolute;
z-index: 2;
width: 42px;
height: 42px;
padding: 0px;
border: 0px;
top: 20px;
right: 20px;
background-image: url(/assets/images/icons/create-document-close-button.svg);
background-repeat: no-repeat;
background-color: transparent;
background-size: 36px 36px;
background-position: center center;
transition: all 100ms ease-in-out;
The SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="States" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Buttons-&-States-(Documents-Steps)" transform="translate(-104.000000, -138.000000)">
<g id="Close-Button" transform="translate(104.000000, 138.000000)">
<g>
<circle id="circle" fill="#E9EEF2" cx="18" cy="18" r="18"></circle>
<polygon id="X" fill="#9FADB5" transform="translate(17.868000, 17.808000) rotate(-45.000000) translate(-17.868000, -17.808000) " points="16.968 23.616 18.768 23.616 18.768 18.672 23.736 18.672 23.736 16.944 18.768 16.944 18.768 12 16.968 12 16.968 16.944 12 16.944 12 18.672 16.968 18.672"></polygon>
</g>
</g>
</g>
</g>
after my firefox update to version 35.0.1 my svg animations doesn't work in firefox, but it was working in previous versions and it still works in firefox beta (36), nightly (37.0a2) and other browsers (opera, chrome, safari, modern ie):
html:
<svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986 3038.43 55 53.758" enable-background="new -1061.986 3038.43 188.279 53.758" xml:space="preserve">
<g id="logo-mask" >
<rect id="sygnet" fill="#FFFFFF" x="-1100" y="3038" width="100" height="50"/>
</g>
<g id="logo-black">
<rect id="sygnet" fill="#000000" x="-1100" y="3038" width="100" height="50"/>
</g>
</svg>
<div id="button">Click me!</div>
css:
body{
background-color: #777777;
}
#button{
margin-right: 100px;
display: block;
width: 100px;
height: 20px;
float: right;
background-color: #fff;
cursor: pointer;
text-align: center;
line-height: 20px;
}
js (using snap.svg):
$(document).ready(function(){
var s = Snap(),
svg = Snap.select('#logo-svg'),
logo = Snap.select('#logo-mask'),
logoBlack = Snap.select('#logo-black'),
mask = svg.rect(-1100, 2830, 280, 100).attr({
fill: 'white',
id: 'maska-logo'
});
logoBlack.attr({'mask': mask, 'opacity': 1});
});
$(document).on('click', '#button', function(){
var maska = Snap.select('#maska-logo');
maska.animate({
transform: 'T'+[0,200]
}, 500);
});
simple example: http://jsfiddle.net/7yq14L0f/2/
any idea, why? :(
It was caused by a change in the Firefox code which was not completely correct and which was then fixed. Bug 932771 caused it and bug 1127507 which was backported as far as Firefox 36 fixed it.