svg-animate

is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

you could use a gradient with stop-opacity to do this. you would add two “middle” stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need. <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”200″ height=”200″> <linearGradient id=”lg” x1=”0.5″ y1=”1″ x2=”0.5″ y2=”0″> <stop offset=”0%” stop-opacity=”1″ stop-color=”royalblue”/> <stop offset=”40%” stop-opacity=”1″ stop-color=”royalblue”/> … Read more

SVG animation delay on each repetition

You can add the end event of a SMIL animated element to the begin attribute. Also, you can add multiple values, separated by ; to this begin attribute : <svg xmlns=”http://www.w3.org/2000/svg” width=”300px” height=”100px”> <circle cx=”50″ cy=”50″ r=”15″ fill=”blue”> <animate id=”op” attributeType=”CSS” attributeName=”opacity” from=”1″ to=”0″ dur=”3s” begin=”3s;op.end+3s” /> </circle> </svg>

CSS transparent curved shape with two rounded sides

Here is an idea using radial-gradient .box { margin-top:120px; width:200px; height:100px; background:white; } .box .top { height:100px; width:150px; transform:translateY(-100%); position:relative; background:#fff; } .top:before, .top:after{ content:””; position:absolute; top:0; width:50px; left:100%; bottom:50%; background: radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right, radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left; background-size:50% 100%; background-repeat:no-repeat; } .top:after { … Read more