SVG Filter: Scale - scale
I have a svg graphic with a shadow attached to it using a svg filter. I need to scale the shadow but can't find a filter that can do this. Do anyone know if this is possible?
<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet">
<filter id="shadow" class="shadow" width="200%" height="200%">
<feOffset dx="0" dy="30" in="SourceAlpha" result="offset" />
<feFlood flood-opacity="0.12" result="opacity" />
<feComposite operator="in" in="opacity" in2="offset" result="opacityOffset" />
<feMerge class="everything">
<feMergeNode in="opacityBlurOffset" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<circle class="circle"
cx="50"
cy="50"
r="40"
fill="tomato"
filter="url(#shadow)"/>
</svg>
http://codepen.io/bradjohnwoods/pen/XXMPGY
You can enlarge the shadow by using a blur, and then use an opacity mapping (using feComponentTransfer/feFuncA) to dial up the values inside the edges of the blurred shadow to .12 - the value of your flood opacity. Something like this:
<svg class="svg" width="155" height="460" viewbox="0 0 100 100" preserveAspectRatio ="xMidYMin meet">
<filter id="shadow" class="shadow" width="200%" height="200%">
<feOffset dx="0" dy="30" in="SourceAlpha" result="offset" />
<feFlood flood-opacity="0.12" result="opacity" />
<feComposite operator="in" in="opacity" in2="offset" result="opacityOffset" />
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer result="opacityBlurOffset">
<feFuncA type="table" tableValues="0 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12 .12"/>
</feComponentTransfer>
<feMerge class="everything">
<feMergeNode in="opacityBlurOffset" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<circle class="circle"
cx="50"
cy="50"
r="40"
fill="tomato"
filter="url(#shadow)"/>
</svg>
I should note that your original code had a hanging reference - the opacityBlurOffset used as your feMergeNode "in" didn't reference a previous result.
For those who are looking. Like the solution above but without the noisy edges:
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="41.66666666666667" vector-effect="non-scaling-stroke" style="overflow: visible; width: 100%; height: 100%; pointer-events: none;">
<defs>
<linearGradient id="gradient-647049" gradientTransform="rotate(0)">
<stop offset="0%" stop-color="#320606" stop-opacity="100"></stop>
<stop offset="100%" stop-color="#FF0000" stop-opacity="100"></stop>
</linearGradient>
<filter id="shadow" color-interpolation-filters="sRGB" x="-100%" y="-100%" width="300%" height="300%">
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" in="SourceGraphic" result="shadow_color"></feColorMatrix>
<feGaussianBlur in="shadow_color" stdDeviation="5" result="a-shadow_blur"></feGaussianBlur>
</filter>
</defs>
<use xlink:href="#shape"
x="50" y="50" transform="scale(1.212)" filter="url(#shadow)"
style="transform-origin: 50% 50% 0px;"></use>
<ellipse id="shape" cx="125" cy="20.833333333333336" rx="120.5" ry="16.333333333333336" fill="url(#gradient-647049)"
stroke="rgba(27,117,221,1)" stroke-width="9" stroke-linejoin="round"></ellipse>
</svg>
Related
Adding animation on my svg, it changes its position
I'm trying to add animation on some groups inside my svg, but after i add the animation my svg changes position. When i try to change it with position absolute tho it doesnt change.
In this code, I add the aimation to the group with the light class. I removed the rest of the code of the svg file so its more simple to show here.
My code:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
padding-top: 40px;
}
.light {
-webkit-animation: action 1s infinite;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient
id="a"
x1=".771"
y1=".879"
x2=".349"
y2=".103"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient
id="b"
x1=".73"
y1=".875"
x2="-.036"
y2="-.615"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient
id="c"
x1=".496"
y1="-1.57"
x2=".509"
y2="4.41"
gradientUnits="objectBoundingBox"
>
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path
data-name="Rectangle 3243"
fill="none"
opacity=".25"
d="M0 0h767.74v782.925H0z"
/>
<rect
data-name="Rectangle 3237"
width="383.786"
height="416.279"
rx="26"
transform="translate(214.352 98.244)"
fill="url(#a)"
/>
<g
class="light"
data-name="Group 1182"
transform="rotate(36 263.423 810.556)"
>
<path
data-name="Path 6006"
d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z"
fill="#afb9c5"
/>
<path
data-name="Path 6007"
d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z"
fill="#e4e8ec"
/>
<circle
data-name="Ellipse 627"
cx="2.861"
cy="2.861"
transform="rotate(-30 137.783 -57.321)"
fill="#afb9c5"
r="2.861"
/>
<path
data-name="Rectangle 2622"
fill="#afb9c5"
d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z"
/>
<path
data-name="Path 6029"
d="m31.023 33.105 4.85-2.8-5.21-3.245Z"
fill="#afb9c5"
/>
<path
data-name="Path 6030"
d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z"
fill="#afb9c5"
/>
<path
data-name="Rectangle 2623"
fill="#afb9c5"
d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z"
/>
<path
data-name="Path 6031"
d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2624"
width="4.305"
height="4.305"
rx="2.152"
transform="rotate(150 11.67 25.183)"
fill="#afb9c5"
/>
<rect
data-name="Rectangle 2625"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2626"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2627"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2628"
width="27.208"
height="5.666"
rx="2.833"
transform="rotate(-30 155.273 -41.6)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2629"
width="24.321"
height="5.064"
rx="2.532"
transform="rotate(-30 163.695 -45.766)"
fill="#ced6dc"
/>
<rect
data-name="Rectangle 2630"
width="21.102"
height="4.392"
rx="2.196"
transform="rotate(-30 170.605 -50.842)"
fill="#ced6dc"
/>
</g>
</svg>
</div>
</div>
Problem in you case is that the g.light element already has a transform property: transform="rotate(36 263.423 810.556)". So the action animation is overwriting the default one that place the bulb icon in the top left.
My recommendation would be to separate the square and bulb in 2 different svg
and align them together by using absolute positioning:
.svg-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
background-color: white;
}
.svg {
position: relative;
padding-top: 40px;
}
.light {
position: absolute;
top: 7%;
right: 30%;
animation: action 1s infinite alternate;
}
#-webkit-keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
#keyframes action {
0% {
transform: translateY(0) rotate(40deg);
}
100% {
transform: translateY(-10px) rotate(40deg);
}
}
<div class="svg-container">
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" width="767.74" height="782.925">
<defs>
<linearGradient id="a" x1=".771" y1=".879" x2=".349" y2=".103" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#ad81ff" />
<stop offset="1" stop-color="#ffe2ff" stop-opacity=".831" />
</linearGradient>
<linearGradient id="b" x1=".73" y1=".875" x2="-.036" y2="-.615" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".13" stop-opacity=".69" />
<stop offset=".25" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
<linearGradient id="c" x1=".496" y1="-1.57" x2=".509" y2="4.41" gradientUnits="objectBoundingBox">
<stop offset=".01" />
<stop offset=".08" stop-opacity=".69" />
<stop offset=".21" stop-opacity=".322" />
<stop offset="1" stop-opacity="0" />
</linearGradient>
</defs>
<path data-name="Rectangle 3243" fill="none" opacity=".25" d="M0 0h767.74v782.925H0z" />
<rect data-name="Rectangle 3237" width="383.786" height="416.279" rx="26" transform="translate(214.352 98.244)" fill="url(#a)" />
</svg>
<svg class="light" width="70" heigth="73">
<g data-name="Group 1182">
<path data-name="Path 6006" d="M58.972 24.627a24.534 24.534 0 0 1 1.64 16.443 27.256 27.256 0 0 0 .037 14.644c.441 1.455 1.049 2.858 1.624 4.394l-18.81 10.86c-.69-.871-1.333-1.77-2.059-2.6a25.313 25.313 0 0 0-11.728-7.54 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332a25.956 25.956 0 0 1 1.66-1.241 25.9 25.9 0 0 1 38.308 10.53Z" fill="#afb9c5" />
<path data-name="Path 6007" d="M55.293 26.751a24.535 24.535 0 0 1 1.641 16.442 27.256 27.256 0 0 0 .036 14.644c.442 1.456 1.049 2.859 1.624 4.395l-15.13 8.736c-.692-.871-1.334-1.77-2.06-2.601a25.313 25.313 0 0 0-11.728-7.539 30.7 30.7 0 0 1-10.886-5.525A26.052 26.052 0 0 1 19 15.332c.545-.438 1.098-.86 1.66-1.242a25.651 25.651 0 0 1 6.154-2.017A25.934 25.934 0 0 1 55.293 26.75Z" fill="#e4e8ec" />
<circle data-name="Ellipse 627" cx="2.861" cy="2.861" transform="rotate(-30 137.783 -57.321)" fill="#afb9c5" r="2.861" />
<path data-name="Rectangle 2622" fill="#afb9c5" d="m32.468 31.618 1.12-.646 16.474 28.534-1.12.647z" />
<path data-name="Path 6029" d="m31.023 33.105 4.85-2.8-5.21-3.245Z" fill="#afb9c5" />
<path data-name="Path 6030" d="m40.69 38.934-2.314 1.336-.675-1.168 2.315-1.337a2.6 2.6 0 0 0 .952-3.551l-1.04-1.802 1.166-.674 1.042 1.804a3.947 3.947 0 0 1-1.445 5.392Z" fill="#afb9c5" />
<path data-name="Rectangle 2623" fill="#afb9c5" d="m37.35 30.887 3.728-2.152 2.153 3.728-3.729 2.152z" />
<path data-name="Path 6031" d="m43.612 48.247-1.169.675-1.205-2.087a2 2 0 0 0-2.732-.732 3.947 3.947 0 0 1-5.386-1.446l-2.75-4.763 1.168-.675 2.764 4.788a2.6 2.6 0 0 0 3.552.952 3.344 3.344 0 0 1 4.565 1.223Z" fill="#afb9c5" />
<rect data-name="Rectangle 2624" width="4.305" height="4.305" rx="2.152" transform="rotate(150 11.67 25.183)" fill="#afb9c5" />
<rect data-name="Rectangle 2625" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2626" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2627" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
<rect data-name="Rectangle 2628" width="27.208" height="5.666" rx="2.833" transform="rotate(-30 155.273 -41.6)" fill="#ced6dc" />
<rect data-name="Rectangle 2629" width="24.321" height="5.064" rx="2.532" transform="rotate(-30 163.695 -45.766)" fill="#ced6dc" />
<rect data-name="Rectangle 2630" width="21.102" height="4.392" rx="2.196" transform="rotate(-30 170.605 -50.842)" fill="#ced6dc" />
</g>
</svg>
</div>
</div>
flashing color clockwise around svg path
I have an svg quarter circle and I need to make animation so that its border will be changing to #FF00AF with time clockwisely and run all the border infinitely times Is there any elegant way to do that? <svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_d)"> <path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/> <path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/> </g> <defs> <filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="8"/> <feGaussianBlur stdDeviation="7"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)"> <stop offset="0.727873" stop-color="#8C1F6F"/> <stop offset="1" stop-color="#93006C"/> </radialGradient> </defs> </svg>
One way to have the rotation is to rotate the whole SVG - about its top left hand corner.
This snippet uses CSS animation to rotate it continuously from -90 to 90 degrees. Obviously change this to give whatever effect you want.
body {
overflow: hidden;
}
svg {
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: top left;
}
#keyframes rotate {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
<path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8"/>
<feGaussianBlur stdDeviation="7"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
<stop offset="0.727873" stop-color="#8C1F6F"/>
<stop offset="1" stop-color="#93006C"/>
</radialGradient>
</defs>
</svg>
Shape "8" looped animation with SVG <animate> only
I'm having massive headaches trying to fin the sweet-spot to achieve "8" shape animation using the combination of just <animate attributeName="cx"> and <attributeName="cy">. I'll like to do it using that since it seems, by my metrics, that it's the most performant in terms of FPS, CPU and GPU usage. Quick demo of the "ideal" motion path: https://codepen.io/ivancis/pen/eYmZowz
New solution caused by refinements in comments I need to animate a svg element using just a combination of <animate attributeName="cx"> <animate attributeName="cy"> (for performance) to make an "8" shape motion, looped Since the author does not want to use the animateMotion command, in this case I see only one way to implement the animation of the movement of the circle along the infinity symbol: It is necessary to sequentially select many points along the infinity symbol and assign their coordinates to the circle cx = "x", cy = "y" The more points you select, the closer the trajectory moving of the circle along the infinity symbol In the vector editor, I sequentially put circles on the infinity symbol and wrote down their coordinates of the center of the circle. The first circle has the center coordinates cx ="70" cy ="60" So, it was done for all circles located along the infinity symbol. The last circle has the same coordinates as the first one, thereby realizing a closed cycle It remains only to substitute these values in the animation formulas cx, cy Circle motion animation cx, cy with radius r="5 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="5"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> Radius r = 40 as in the example of the author of the question <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="40"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div>
You didn’t say what kind of animation you really want.
Therefore, I will offer examples of different types of animation and you can choose any them and somehow modify for yourself.
Infinity Symbol Moving Animation
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 100 100">
<path fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10">
<animateTransform
attributeName="transform"
type="translate"
values="0; 150; 0"
begin="0s"
dur="4s"
repeatCount="indefinite" />
</path>
</svg>
Rotation
Mouse over symbol
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotate(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path class="infinity1" fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Rotation around the axis Y
.infinity1{
transform-box: fill-box;
transform-origin: center center;
transition: rotate 2s linear ;
fill:transparent;
}
.infinity1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
100% {transform :rotateY(360deg);}
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" >
<path class="infinity1" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
</svg>
Animation of infinity symbol filling by changing attribute stroke-dasharray
Click on the colored letters in circles
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>
Live Demo
I was looking into a similar thing and came across this answer. #Alexandr_TT's answer got me thinking about a more flexible way to do this, without using a graphics editor (like Inkscape etc.)
I came up with the following idea:
Use the <AnimateMotion/> for the first loop.
Fire a setInterval every X milliseconds and each time it fires to capture the centre point of the circle (from circle.getBoundingClientRect() and svg.matrixTransform())
Push these x and y values to two arrays to capture them
When the AnimateMotion ends, clear the current setInterval and push the first element also to the end of each of the arrays (to close the loop)
Remove the <AnimateMotion/> tag from the DOM
Push these arrays to the values attribute of the <animate id="cx" attributeName="cx" values="" .../> and <animate id="cy" attributeName="cy" values="" .../> tags
begin both of these animate tags with cx.beginElement() and cy.beginElement()
You could just be happy with this performance-wise, or you could copy-paste the DOM elements with their values="..." attributes and save that as your new master file, essentially achieving what #Alexandr_TT did with the graphics editor. Of course, this method I am showing is flexible if you decide to change your path etc.
Demo: https://codepen.io/Alexander9111/pen/VwLaNEN
HTML:
<circle id="circle" class="circle" cx="0" cy="00" r="125">
<animateMotion
path="M162.9,150c6.8-0.2,12.1-5.7,12.1-12.5c0-6.9-5.6-12.5-12.5-12.5c-6.8,0-12.3,5.4-12.5,12.2v25.7 c-0.2,6.8-5.7,12.2-12.5,12.2c-6.9,0-12.5-5.6-12.5-12.5c0-6.8,5.4-12.3,12.1-12.5L162.9,150z"
dur="4s" begin="0s"
epeatCount="1" fill="freeze"
calcMode="linear"
fill="freeze">
</animateMotion>
<animate id="cx" attributeName="cx" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
<animate id="cy" attributeName="cy" values="" dur="4s" repeatCount="indefinite" begin="indefinite"/>
</circle>
JS:
const svg = document.querySelector('svg');
const animateElem = document.querySelector('animateMotion');
const circle = document.querySelector('#circle');
const cx = document.querySelector('#cx');
const cy = document.querySelector('#cy');
let myInterval;
let valuesX = [];
let valuesY = [];
function startFunction() {
const box = circle.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right) / 2;
pt.y = (box.top + box.bottom) / 2;
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
console.log(svgP.x,svgP.y)
valuesX.push(svgP.x);
valuesY.push(svgP.y);
}
function endFunction() {
animateElem.parentNode.removeChild(animateElem);
clearInterval(myInterval)
valuesX.push(valuesX[0]);
valuesY.push(valuesY[0]);
cx.setAttribute('values', valuesX.join('; '));
cy.setAttribute('values', valuesY.join('; '));
circle.setAttribute('cx', 0);
circle.setAttribute('cy', 0);
cx.beginElement();
cy.beginElement();
}
animateElem.addEventListener('beginEvent', () => {
console.log('beginEvent fired');
myInterval = setInterval(startFunction, 50);
})
animateElem.addEventListener('endEvent', () => {
console.log('endEvent fired');
endFunction();
})
Nesting SVGs with center alignment
I need to place icon SVGs of random shape (i.e. not necessarily square-ish) on top of a pin/marker SVG. I can easily stack them but I'm not sure how to align them so regardless of the shape, the icons are vertically and horizontally aligned. Marker SVG: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="45"> <defs> <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> </defs> <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/> <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/> </g> </svg> Icon SVG: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>bicycle</title><path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/></svg> Stacked (Incorrect Alignment): <svg xmlns="http://www.w3.org/2000/svg" width="32" height="45"> <defs> <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> </defs> <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/> <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/> <g fill="#FFF" fill-rule="nonzero"> <path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/> </g> </g> </svg>
This is very simple. Just embed your <svg> icon into the other SVG. Set the x, y, width, and height of the embedded <svg> element to the size and position of the square area you want the icon to be positioned within. And SVG will do the rest (including the centering). In this case, I have chosen a square that is: x="6" y="6" width="20" height="20". <svg xmlns="http://www.w3.org/2000/svg" width="32" height="45"> <defs> <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> </defs> <g fill="none" fill-rule="evenodd" transform="translate(1 1)"> <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/> <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/> </g> <svg x="6" y="6" width="20" height="20" viewBox="0 0 24 24" fill="#fff"><title>bicycle</title><path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/></svg> </svg>
Answer #Paul LeBeau is good for its originality, but unfortunately with this solution, the combined icon can only be used once. Because different parts of the icons are located in different instances of svg Suppose you need to use combined icons multiple times as map pointers. Then you have to use another solution for positioning the components of the icon relative to each other. This can be done using the command transform ="translate (2.5 2)" Add raster map to svg <image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" /> Clone and simultaneously position icons on the map <use x="300" y="110" xlink:href="#bicicle" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 761"> <image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" /> <defs> <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> <g id="bicycle"> <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/> <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/> <path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/> </g> </defs> <use x="300" y="110" xlink:href="#bicycle" /> <use x="650" y="200" xlink:href="#bicycle" /> <use x="650" y="450" xlink:href="#bicycle" /> <use x="150" y="250" xlink:href="#bicycle" /> </svg> UPDATE When cloning icons, they can be styled. To do this, delete the attribute fill ="#006893" at the parent and paint the children in different colors <use x="300" y="110" fill="red" xlink:href="#bicycle" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 761"> <image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" /> <defs> <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox"> <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> </filter> <g id="bicycle"> <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/> <path fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/> <path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/> </g> </defs> <use x="300" y="110" fill="red" xlink:href="#bicycle" /> <use x="650" y="200" fill="dodgerblue" xlink:href="#bicycle" /> <use x="650" y="450" fill="purple" xlink:href="#bicycle" /> <use x="150" y="250" fill="green" xlink:href="#bicycle" /> </svg>
Fill an SVG shape with a gradient
How can I apply Linear gradient and drop shadow to this pattern? <svg viewbox="0 0 60 10"> <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"> <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" /> </pattern> <rect x="0" y="0" width="60" height="7" fill="url(#waves)" /> </svg>
As commented by Paul LeBeau, you need to convert the wavy shape to one path, then you can fill the wavy shape with a linear gradient as shown in this example: <svg viewbox="7.5 0 60 10"> <defs> <linearGradient id="gradient"> <stop offset="5%" stop-color="#FFC338" /> <stop offset="95%" stop-color="#FFEA68" /> </linearGradient> </defs> <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" /> </svg>
Try the following: Place all the gradient and pattern definitions within a <defs> block. After the defs block is closed place your visible content tags.
not exactly what you are looking for, but try: <svg viewbox="0 0 100 80"> <defs> <filter id="f1" x="0" y="0" width="140%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="8" dy="6" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="50" height="20"> <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="url(#grad1)" /> </pattern> </defs> <rect x="0" y="3" width="200" height="20" fill="url(#waves)" filter="url(#f1)" /> </svg> Edit numerical parameters individually to see the effect.