after realizing the style on Figma then trying to convert to HTML/CSS I noticed that the svg does not take all the width as is indicated in the image especially the wave in black, I tried several techniques like scale transformation but that's not the goal I just want the wave to take all the width so that we can zoom the page quietly, I created a copy of the example here: https://codepen.io/HalasProject/pen/xxRxKaN
The Html Code of SVG:
<svg class="bg-svg" width="1360" height="402" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Group 3">
<rect id="rectangle" width="100%" height="100%" fill="orange" />
<path id="Oval" fill-rule="evenodd" clip-rule="evenodd" d="M1000.89 378C1077.38 378 1139.39 315.991 1139.39 239.5C1139.39 163.009 1077.38 101 1000.89 101C924.4 101 862.392 163.009 862.392 239.5C862.392 315.991 924.4 378 1000.89 378Z" fill="white" fill-opacity="0.24" />
<g id="points" class="animated pulse infinite" style="animation-duration: 6s;">
<path id="Oval_2" fill-rule="evenodd" clip-rule="evenodd" d="M1131.08 311.378C1144.72 311.378 1155.77 300.325 1155.77 286.689C1155.77 273.054 1144.72 262 1131.08 262C1117.45 262 1106.39 273.054 1106.39 286.689C1106.39 300.325 1117.45 311.378 1131.08 311.378Z" fill="white" fill-opacity="0.48" />
<path id="Polygon" fill-rule="evenodd" clip-rule="evenodd" d="M801.844 179L816.296 193.452L801.844 207.904L787.392 193.452L801.844 179Z" fill="white" fill-opacity="0.48" />
<path id="Polygon_2" fill-rule="evenodd" clip-rule="evenodd" d="M972.009 35L1001.52 64.5065L972.009 94.013L942.503 64.5065L972.009 35Z" fill="white" fill-opacity="0.17" />
<path id="Polygon_3" fill-rule="evenodd" clip-rule="evenodd" d="M721.478 101.242L733.054 118.086L716.21 129.662L704.634 112.818L721.478 101.242Z" fill="white" fill-opacity="0.48" />
<path id="Polygon_4" fill-rule="evenodd" clip-rule="evenodd" d="M807.869 37.6337L819.446 54.4776L802.602 66.054L791.025 49.2102L807.869 37.6337Z" fill="white" fill-opacity="0.48" />
<path id="Polygon_5" fill-rule="evenodd" clip-rule="evenodd" d="M1099.07 72.937L1106.29 80.163L1099.07 87.3891L1091.84 80.163L1099.07 72.937Z" fill="white" fill-opacity="0.54" />
</g>
<path id="Vector" d="M0 370.278L37.7778 338.556C75.5556 306.834 151.111 243.389 226.667 238.135C302.222 232.485 377.778 286.016 453.333 280.365C528.889 275.112 604.444 211.667 680 206.413C755.556 200.763 831.111 254.294 906.667 290.973C982.222 327.651 1057.78 349.46 1133.33 338.556C1208.89 327.651 1284.44 286.016 1322.22 264.504L1360 243.389V402H1322.22C1284.44 402 1208.89 402 1133.33 402C1057.78 402 982.222 402 906.667 402C831.111 402 755.556 402 680 402C604.444 402 528.889 402 453.333 402C377.778 402 302.222 402 226.667 402C151.111 402 75.5556 402 37.7778 402H0V370.278Z" fill="#273036" />
<rect id="airplane" x="762" y="168.012" width="407" height="204" transform="rotate(-13.5 762 168.012)" fill="url(#pattern0)" />
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform=" scale(0.00104423 0.00208333)" />
</pattern>
<image id="image0" xlink:href="https://lh3.googleusercontent.com/proxy/mG7vldemsGRDLaAD8Wu5GT7WxfSQprqChFjz5u-KXIIhX1y5UXB1dGARfGzU47XdUYr02jn09LcLxGHSBFaRzUTIqUrOuDMgyQf31SOTlXhLkZkBKf02KddK3My_bzk3" width="960" height="480" />
</defs>
</svg>
The wave in your SVG is smaller than the orange background. Easiest approach is to make them the same width in your design tool.
Related
I'm absolutely beginner with SVG, and I need to put text around this moon...
I tried to make text around a path and could not get the right sizes and match it with the moon.
<svg viewBox="-6 -6 30 40">
<defs>
<mask id="earth">
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
<circle fill="black" cx="3.141592654" r="5" />
</mask>
</defs>
<circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-25)"/>
</svg>
Draw the moon with a path. (and edit in: https://yqnn.github.io/svg-path-editor/)
The path is drawn counter-clockwise, if you want to draw the innermoon text like your design, it is easier to add a 2nd path drawn clockwise.
Setting pathLength helps in positioning with startoffset
Look up all attributes you don't know in the docs.
<svg viewBox="0 0 80 60">
<rect width="100%" height="100%" fill="skyblue"/>
<path id="Moon" pathLength="10" d="m16 2a12 12 0 1018 13 1 1 0 01-18-13z"/>
<text>
<textPath href="#Moon"
startoffset="1" text-anchor="left" dominant-baseline="hanging"
fill="blue" font-size="3px">Outside moon</textPath>
</text>
<text>
<textPath href="#Moon"
startoffset="6" text-anchor="right" dominant-baseline="hanging"
fill="rebeccapurple" font-size="4">Inside moon</textPath>
</text>
</svg>
I'm currently working on nested pattern in svg where the first pattern is used to fill the second shape which is used to fill the third.
The following code snippet run perfectly on a website like w3schools, but once converted to a file and to use on a browser it only shows an empty box, with no error code.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<pattern id="a" viewBox="0 0 12 12" width="135%" height="150%">
<g stroke="black" stroke-width="1">
<circle cx="6" cy="6" r="4" fill="red"/>
<circle cx="6" cy="6" r="2" fill="yellow"/>
</g>
<animate attributeName="x" from="0" to="1.35" dur="5s" repeatCount="indefinite"/>
</pattern>
<pattern id="b" viewBox="0 0 50 50" width="100%" height="100%">
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)"/>
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)" transform="scale(-1,1) rotate(90 50 50) translate(0,100)"/>
</pattern>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(90 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(180 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(270 50 50)"/>
<rect width="100" height="100" fill="transparent" stroke="black" stroke-width="3"/>
</svg>
Here is the following output:
I tried to use diverse way to use the pattern "a" like using <defs> or <use xlinks:href>, the code still run but it doesn't give the expected output or any errors. I tried using diverse browser (Chrome, Opera, Edge, Firefox), but they all give the same empty box. When I copy and paste the code while inspecting the element, to the w3school website, it all works fine.
Can I fill the SVG using path with animation?
Like this
<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" stroke="white" />
<g opacity="0.5">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="0" width="21" height="17">
<path d="M10 17V6.5L11 0L30.5 13.5L22 10L10 17Z" fill="white" />
</mask>
<g mask="url(#mask0)">
<path d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z" fill="white" />
</g>
</g>
</svg>
For the animation I'm using a circle path (#test) and I'm animation the stroke-dasharray property. The path is clipped bu the hexagon path.
As an observation the radius of the animated path is 5 (half the needed radius) and the width of the stroke is 10. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10
let l = test.getTotalLength();// the total length of the path
let stroke = 0;// the initial length of the stroke
function Animation(){
requestAnimationFrame(Animation);
if(stroke < l){stroke += .1}else{stroke= 0};//increase the length of the stroke
//the stroke-dasharray's stroke (first parameter) == stroke
//the stroke-dasharray's gap (second parameter) == the total length of the path (l) minus the length of the stroke
test.setAttribute("stroke-dasharray",`${stroke} ${l-stroke}`)
}
Animation()
svg{border:solid; overflow:visible}
body{background:#ccc}
<svg viewBox="-1 0 22 23" width="200">
<clipPath id="clip">
<path id="thePath" d="M9.00035 1.55536L2.02871 5.42849C1.39378 5.78123 1 6.45047 1 7.17681V15.8232C1 16.5495 1.39378 17.2188 2.02871 17.5715L9.00035 21.4446C9.61973 21.7887 10.3749 21.7794 10.9857 21.4202L17.514 17.58C18.1249 17.2206 18.5 16.5648 18.5 15.8561V7.14389C18.5 6.43516 18.1249 5.77936 17.514 5.42002L10.9857 1.57981C10.375 1.22056 9.61973 1.21126 9.00035 1.55536Z"/>
</clipPath>
<desc>The next path is drawing a circle with the radius = 5. When using a stroke-width =10 the stroke is covering the path from the center and give the appearance of a circle with a radius r=10</desc>
<path d="M10,6.5 A5,5 0 0 1 10,16.5 A5,5 0 0 1 10,6.5 " id="test" fill="none" stroke="black" stroke-dasharray="0 62.43" stroke-width="10" clip-path="url(#clip)" />
<use xlink:href="#thePath" stroke="white" fill="none" />
</svg>
The idea is from #enxaneta answer, but I implement it without JavaScript and with original path. The explanation you can find in his answer. If you want to have the duration in 60 seconds then you can change dur="10s" to dur="60s".
svg{background:#956}
<svg width="180" viewBox="0 0 31 29">
<g transform="translate(6 -3)">
<clipPath id="clip">
<path id="path" d="M9.00035 7.55536L2.02871 11.4285C1.39378 11.7812 1 12.4505 1 13.1768V21.8232C1 22.5495 1.39378 23.2188 2.02871 23.5715L9.00035 27.4446C9.61973 27.7887 10.3749 27.7794 10.9857 27.4202L17.514 23.58C18.1249 23.2206 18.5 22.5648 18.5 21.8561V13.1439C18.5 12.4352 18.1249 11.7794 17.514 11.42L10.9857 7.57981C10.375 7.22056 9.61973 7.21126 9.00035 7.55536Z"/>
</clipPath>
<path d="M10,12.5A5,5 0 0 1 10,22.5A5,5 0 0 1 10,12.5" fill="none" stroke="#cab" stroke-dasharray="0 62.84" stroke-width="10" clip-path="url(#clip)">
<animate attributeName="stroke-dasharray"
values="0 31.4;10 21.4;20 11.4;31.4 0" begin="0s" dur="10s" fill="freeze"/>
</path>
<use xlink:href="#path" stroke="#fff" fill="none"/>
</g>
</svg>
<svg height="80" width="300">
<g fill="none" stroke="black"
stroke-width="6">
<path stroke-linecap="butt" d="M5 20
l215 0" />
<path stroke-linecap="round" d="M5
40 l215 0" />
<path stroke-linecap="square" d="M5
60 l215 0" />
</g>
</svg>
Ok so I wrote this code in my WordPress post and nothing showed up. But there's no problem when I run it in a simple HTML file format . Can anyone tell why this thing is not working in WordPress...
I need all the text displayed in this elliptical, but it is not.
Code
<embed width="1000" height="1000" type="image/svg+xml" src="path.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="textPath"
d = "M 50 250
a 250 250 0 1 1 575 0"
/>
</defs>
<text fill="red">
<textPath xlink:href="#textPath">Foobarcs. All your favorites in one place.
</textPath>
</text>
</svg>
</embed>
Your fiddle is a bit broken, but when fixed, everything looks okay. All the text is visible.
http://jsfiddle.net/usVuq/1/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="textPath"
d = "M 50 250
a 250 250 0 1 1 575 0" />
</defs>
<use xlink:href="#textPath" stroke="blue" fill="none" />
<text fill="red">
<textPath xlink:href="#textPath">Foobarcs. All your favorites in one place.
</textPath>
</text>
</svg>
Or is there something else you need that I don't understand?