Related
I am wanting to add an SVG logo that I have (I have the SVG code also) on top of a rectangle with a radial background colour that also contains some title text, however I'm unsure of how to do this.
For context, I am using React-PDF, so the syntax is slightly different.
Currently I have
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
</Svg>
I then also have my SVG logo (shortened here for conciseness):
<Svg width="80" height="52" viewBox="0 0 80 52" fill="none">
<Path d="M0 47.6941V37.8042C0... fill="green"/>
...
</Svg
I am wondering how I can add the logo to the main piece...
I have attempted to place the full <Svg>/*logo*/</Svg> to the main section, but this produced an error:
I have also tried moving all of the <Path> pieces into the main block, without the <Svg> wrapper, which did work to some extent, but then I found that I didn't know how to move them down and right...
This is the example:
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
<Path d="M0 47.6941V37.8042C0... fill="green"/>
/* rest of the logo svg paths here */
</Svg>
You can wrap your logo in a group and apply a transform to it
<svg width="555" height="80" viewBox="0 0 555 80">
<defs>
<radialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<stop stop-color="#A01858"/>
<stop offset="1" stop-color="#87005F"/>
</radialGradient>
</defs>
<rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<text x="500" y="50%" text-anchor="end" dominant-baseline="middle">Some title here</text>
<g transform="translate(20,10) scale(0.5 0.5)">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="green" />
</g>
</svg>
<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I want to create a svg gradient in a circle that has 3 points of color, set out in a triangle like this.
<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I have tried creating a linear Gradient with three stops, but I am not sure how to position the stops where I need them (top left right).
This is about as close as you can get.
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="9"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
</svg>
Since the blending you get in CSS/SVG works purely by combining the red, green, and blue channels of RGB colours separately, it doesn't know that we expect to see green when we blend blue and yellow. Instead you just get a murky grey.
So in the example above, I "cheated" by adding slivers of the "correct" colours in between our three main colours. For example I put a sliver of green between the blue and yellow sectors.
If I don't do that, the above example would look like this:
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
</g>
</svg>
This topic is inspired by the answer #Paul LeBeau
The author of the question did not ask a question on animation. But I think that the options will be useful to someone.
Gradient rotation
An animation command is added for a group of elements:
circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
</svg>
Animation tracks
The command of animation of the radius of circles is added.
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an2" attributeName="r" values="5;50" dur="2s" begin="0.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="2s" repeatcount="indefinite" />
</circle>
</svg>
i wanted to give it a try, too.
the result is very different depending on the browser, firefox for example doesn't produce a very good result. (although that is also true for the other solutions, I think)
but it doesn't need the manually inserted composite colors and produces a very homogeneous effect on Safari and Chrome…
<svg viewBox="0 0 100 100">
<defs>
<filter id="colorblend">
<feColorMatrix in="SourceGraphic" result="red" type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
1 0 0 0 0" />
<feColorMatrix in="SourceGraphic" result="green" type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 1 0 0 0" />
<feColorMatrix in="SourceGraphic" result="blue" type="matrix" values="
0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 1 0 0" />
<feGaussianBlur in="red" stdDeviation="20" result="red" />
<feGaussianBlur in="green" stdDeviation="20" result="green" />
<feGaussianBlur in="blue" stdDeviation="20" result="blue" />
<feBlend mode="screen" in="red" in2="green" result="redplusgreen" />
<feBlend mode="screen" in="redplusgreen" in2="blue" result="rainbow" />
<!--fix alpha -->
<feColorMatrix in="rainbow" result="rainbow" type="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 0" />
<!-- increase brightness -->
<feBlend in="rainbow" in2="rainbow" mode="screen" result="rainbow" />
<!-- remove artefacts -->
<feGaussianBlur in="rainbow" stdDeviation="1" />
</filter>
<mask id="mask">
<circle cx="50" cy="50" r="50" fill="white"></circle>
</mask>
</defs>
<g mask="url(#mask)" filter="url(#colorblend)">
<rect x="-10" width="110" height="110" fill="red" />
<rect x="50" width="60" height="110" fill="lime" />
<polygon points="0,0, 100,0, 100,30, 50,50, 0,30" fill="blue" />
</g>
</svg>
i have this svg-path as an header-icon. Now i want to add a letter to the path by using the gimp-method discussed here, but everytime i add the path for the "B" nothing is showing up. Any advice on what i am doing wrong? Here's the current (working) code and an image of what i'm trying to get.
Also, here is the .svg i'm using. Maybe there's something wrong with the svg itself and therefore i don't get the right paths in the text-file?
Hope someone is able to help me out with this issue.
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#000000"></stop>
<stop offset="25%" stop-color="#bd2478"></stop>
<stop offset="35%" stop-color="#54bdff"></stop>
<stop offset="55%" stop-color="#96a318"></stop>
<stop offset="100%" stop-color="#000000"></stop>
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>
You need to add the path for the B outside the masked group like so:
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="black" />
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
<path id="letterB" d="M141.864,42.852c2.736-0.576,7.057-1.008,11.449-1.008c6.264,0,10.297,1.08,13.32,3.528
c2.521,1.872,4.033,4.752,4.033,8.568c0,4.681-3.097,8.785-8.209,10.657v0.144c4.608,1.152,10.009,4.968,10.009,12.169
c0,4.176-1.656,7.345-4.104,9.721c-3.384,3.096-8.856,4.537-16.777,4.537c-4.32,0-7.633-0.288-9.721-0.576V42.852z M148.129,62.726
h5.688c6.624,0,10.513-3.457,10.513-8.137c0-5.688-4.32-7.921-10.657-7.921c-2.88,0-4.536,0.216-5.544,0.432V62.726z
M148.129,85.983c1.224,0.216,3.024,0.288,5.256,0.288c6.48,0,12.457-2.376,12.457-9.433c0-6.625-5.688-9.361-12.528-9.361h-5.185
V85.983z"/>
</svg>
I have a landing page with an SVG image as the background. I'd like to lock its size in place so if the browser is zoomed in or out it doesn't change. It looks crappy zoomed out.k
Here's an svg example from Twitter of the functionality I'm talking about. If you open this svg code in a browser, the twitter bird doesn't change size if you command&+/- and zoom out.
<svg class="twitterIcon-bird" viewBox="0 0 1208 982" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>bird</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Final-Horizon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-286.000000, -117.000000)" fill-rule="nonzero" fill="#1B95E0">
<path d="M1493.75308,233.195911 C1449.31783,252.922544 1401.56126,266.207828 1351.43951,272.19627 C1402.61804,241.549536 1441.92034,192.987798 1460.3889,135.116296 C1412.53168,163.498493 1359.49119,184.130942 1303.02874,195.252335 C1257.88897,147.093181 1193.42514,117 1122.16771,117 C962.190754,117 844.636121,266.258151 880.768067,421.202806 C674.896491,410.886582 492.324484,312.253414 370.089808,162.341063 C305.17308,273.705962 336.423691,419.391176 446.731805,493.16476 C406.171431,491.856361 367.925917,480.734968 334.561738,462.165765 C331.844294,576.95263 414.122472,684.342008 533.287442,708.245454 C498.413572,717.706186 460.218381,719.9204 421.368991,712.47259 C452.871217,810.904465 544.358512,882.514158 652.854997,884.52708 C548.686294,966.201382 417.443793,1002.68559 286,987.186091 C395.653915,1057.48739 525.940278,1098.50067 665.838342,1098.50067 C1125.89162,1098.50067 1385.81015,709.956437 1370.10936,361.469352 C1418.52012,326.494836 1460.53987,282.864756 1493.75308,233.195911 Z" id="bird"></path>
</g>
</g>
</svg>
Here's my image's svg info that I'd like to behave similarly. You might need to copy and paste this into a file and view in a browser. It's a curved image with multiple layers.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>
What changes can I make to my svg file to make it behave like the twitter svg?
This will give you the viewBox, now I leave it to you to put your markup in that viewbox - since it is off center.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5000 5000">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>
I'm working on svg animation and trying to make the letters filled just once. When they are filled, animation must stop.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" 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">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>
I've used this exampl, but it doesn't work the way I want it to
Here is my js fiddle
Does anyone have any idea how I can get this to work?
If you don't want it to repeat then don't use repeatCount.
If you want it to freeze as it is post animation use fill="freeze"
I've also adjusted the values of the animation so the stop offsets just go from 0 to 1
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" 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">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s fill="freeze"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>