screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <style> div { display: inline-flex; justify-content: center; align-items: center; width: 100px; height: 100px; margin: 10px; } svg { width: 100px; height: 100px; fill: #ffffff; } /* Customize the background colors and border radii for each div */ div:nth-child(1) { background: #000000; border-radius: 50%; } div:nth-child(2) { background: #FF5733; border-radius: 25%; } div:nth-child(3) { background: #36B94F; border-radius: 75px; } div:nth-child(4) { background: #FFC300; border-radius: 10px; } div:nth-child(5) { background: #0074D9; border-radius: 50%; } div:nth-child(6) { background: #FF851B; border-radius: 60%; } div:nth-child(7) { background: #8C8C8C; border-radius: 70%; } div:nth-child(8) { background: #FF4136; border-radius: 80%; } div:nth-child(9) { background: #B10DC9; border-radius: 90%; } div:nth-child(10) { background: #F012BE; border-radius: 100%; } </style> </head> <body> <h3>New Twitter X Svg Icon with Different Background Color</h3> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> <div> <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" /> </svg> </div> </body> <script> function copySvgCode(iconNumber) { const svgElement = document.querySelector(`div:nth-child(${iconNumber}) svg`); const svgCode = new XMLSerializer().serializeToString(svgElement); const tempTextarea = document.createElement('textarea'); tempTextarea.value = svgCode; document.body.appendChild(tempTextarea); tempTextarea.select(); document.execCommand('copy'); document.body.removeChild(tempTextarea); alert('SVG Code copied to clipboard!'); } function downloadPng(iconNumber) { const svgElement = document.querySelector(`div:nth-child(${iconNumber}) svg`); const svgCode = new XMLSerializer().serializeToString(svgElement); const canvas = document.createElement('canvas'); canvas.width = svgElement.clientWidth; canvas.height = svgElement.clientHeight; const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0); const downloadLink = document.createElement('a'); downloadLink.download = `icon_${iconNumber}.png`; downloadLink.href = canvas.toDataURL('image/png'); downloadLink.click(); }; img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgCode))); } </script> </html>