SVG iMac

Developer
Chris Wright
Size
5,932 Kb
Views
52,624
  1. SVG iMac Previews
  2. SVG iMac HTML Codes
  3. SVG iMac CSS Codes

How do I make an svg imac?

Part of my SVG series to replace work presentation transparent PNGs with low file size imagery. This one is 8kb.. What is a svg imac? How do you make a svg imac? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

SVG iMac Previews
IQ Test

SVG iMac - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG iMac</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body> <div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="800px" viewBox="0 0 960 800" enable-background="new 0 0 960 800" xml:space="preserve">
<g id="ShadowEllipse">	<g><image overflow="visible" width="303" height="82" xlink:href="data:image/png;base64,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
3zokZwhFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 327 667)"></image></g>
</g>
<g id="StandBase">	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="357.8354" y1="709.3613" x2="602.5" y2="709.3613">	<stop offset="0" style="stop-color:#E9EAE8"/>	<stop offset="0.1369" style="stop-color:#BFC0BF"/>	<stop offset="0.3935" style="stop-color:#747777"/>	<stop offset="0.5123" style="stop-color:#575A5B"/>	<stop offset="0.6321" style="stop-color:#8A8D8D"/>	<stop offset="0.7455" style="stop-color:#B3B5B4"/>	<stop offset="0.8481" style="stop-color:#D1D2D1"/>	<stop offset="0.9363" style="stop-color:#E3E4E2"/>	<stop offset="1" style="stop-color:#E9EAE8"/>	</linearGradient>	<path fill="url(#SVGID_1_)" d="M602.5,704.74c0,0-0.04,2.133-6.586,1.979l-115.746,2.191l-115.746-2.191	c-6.546,0.154-6.586-1.979-6.586-1.979l0.102,4.781c0,0-0.176,1.197,5.018,1.354c0,0,83.211,3.106,117.044,3.106	s117.213-3.106,117.213-3.106c5.193-0.157,5.061-1.354,5.061-1.354L602.5,704.74z"/>
</g>
<g id="Stand">	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="480.2192" y1="710" x2="480.2192" y2="575">	<stop offset="0" style="stop-color:#C7C8CA"/>	<stop offset="0.0205" style="stop-color:#C4C5C7"/>	<stop offset="0.2558" style="stop-color:#A7A9AB"/>	<stop offset="0.2611" style="stop-color:#AAACAE"/>	<stop offset="0.3442" style="stop-color:#D3D5D9"/>	<stop offset="0.3865" style="stop-color:#E3E5EA"/>	<stop offset="0.5134" style="stop-color:#C7C8CA"/>	<stop offset="0.5847" style="stop-color:#BCBDBD"/>	<stop offset="0.7978" style="stop-color:#C3C4C6"/>	<stop offset="0.9388" style="stop-color:#C3C4C6"/>	<stop offset="0.9554" style="stop-color:#A2A3A4"/>	<stop offset="0.9733" style="stop-color:#858687"/>	<stop offset="0.9888" style="stop-color:#737475"/>	<stop offset="1" style="stop-color:#6D6E6F"/>	</linearGradient>	<path fill="url(#SVGID_2_)" d="M577.771,679.916L566.438,575H480h-1h-85l-11.333,104.916c0,0-34.5,25.417-22,26.584	c36.125,3.373,112.027,3.496,119.271,3.5l0,0c0,0,0.1,0,0.281,0s0.281,0,0.281,0l0,0c7.243-0.004,83.145-0.127,119.271-3.5	C612.271,705.333,577.771,679.916,577.771,679.916z"/>
</g>
<g id="Shadow_under_screen">	<g><image overflow="visible" width="246" height="85" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPYAAABVCAYAAAB6mhmIAAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABE9JREFUeNrs3Q1P2zAQxvHLS19g
bNr3/5rQAk1p1ko+7XLYodPANs3/J1kpXSehLs/u7DitCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAyK7h9wT+yfgdfsn+m4SYYIOwf8NgN5HHDcFG5SEeaw15X0mg7dE/JuCoMdCj
ezzWFPC+klDb0bpjk6jiQIlg2yCfIo+rCHdfSajbyOgSASfcKBnqkzmmxlg63H0loe7M6N3PNuxU
bpQK9ugC/WbG0TxuzGuKhbtkxbah7sNYmePKhZxwo5ZQH80Y3PFo/m6xcPeFAu1DrUHenMfaHH3A
W1pyFAi2tte2Ql+CfDiP13DUwhP7T2FRc2wf7K0Zd+FoA+7DTdVGrnl1LNSXQL+Y4YMdWy0fbznY
sYq9DkG+P48fYdyHgG/C0Ha9pWKjQBseC/U+jM6cj34hrbn1OXaTaMW1Bd+GQP8M4yH8fGcqdx+Z
awvVG59cpX2wTybYGurncF6uTKX2i2pvpcJdqhVvZyr2JdC/wvgZwr01VZt2HLnbcA2szqkvod6F
UHeuotuh5/loztPxVoMdq9hrM7fWYP8Ox4cQ+I15Iwk2coXbroQPoVrvwjmrofWLabECdLOtuMj7
a9hdItzaktuqre145xYqCDZyVGzbhmv7bZ9/lulCb1tyPah0xW5nwq0BfzDt+Nq8ngU05K7Yus7T
mNb8RaZXcPoaztHSe8X9zjO7UUWvZ+vC2lamC2gEGznCbefPjWm9N2Z62CcC7W9gGpcQ7I8q+dyg
YiNnsPVxJ/PbnWM3LS2mFfdvmh+6Apk6xm7xBL66YseGv/FjlOtu6bzZYM/tvx3k7yYAXazowt97
cwsTQriRcY6t5+OrGXaPuAa+6K6zUsH2t8DFdvRcVhj38v6Swioxxybc+KpzNLYqvgtjH85VDfsh
EfDs+gpCbS/86zY93YxiVx+3Mr2OTcVG7optr2M/ncdjOO7D8wdTwX2LfvOtuL+nVS/sa6hXrvU+
yPQaoQ824UaOih3befYYCfdgqvZJFnR3V2z/rQa7N4G1odZqrcFOrTYScHxGoOfOVTtdfDJjb1ry
QaaLa9kX0foCb1rj3qxBppcPtP3ROffeVeuONhyZi9BHd3ftXDvuK/ZiWvFYxba3vdlqbTcB+A9b
INzI1Y5/dD/2s0xXyRe1eBYLduP+zLY8sQ9ZYNcZcp+v13yCyqt57liyDS8R7FGmW+s03OJ+HuT9
Vr3YDh8gZzt+7WeeFV04K1mxbZBjVbwzc++WUKPCcKc+pfRUulqXnJ/G9tLOfa4482rUMt++9nPF
i4W6dEBS3wTivxGEbwNBbeGe+yYQ/zpZWrBTAZ97TLBROtgi8zd6jJHXLzLYMhNcAo3aA556Tgj2
db8TwUZtwa4qzFbHvxPw38EGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ+SPA
AO3PGJPS91G6AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1 358 528)"></image></g>
</g>
<g id="Metal_bit">	<path id="Metal" fill="#999B9B" stroke="#7D7D7D" stroke-miterlimit="10" d="M940.5,553.109c0,10.986-8.444,21.391-19.479,21.391	H32.979c-11.034,0-20.479-10.404-20.479-21.391V35.896c0-10.987,9.444-18.396,20.479-18.396h888.043	c11.034,0,19.479,7.409,19.479,18.396V553.109z"/>
</g>
<g id="Black">	<path d="M940,552.072c0,11.006-8.922,19.928-19.928,19.928H33.928C22.922,572,14,563.078,14,552.072V36.928	C14,25.922,22.922,17,33.928,17h886.145C931.078,17,940,25.922,940,36.928V552.072z"/>
</g>
<g id="Screen">	<rect x="53" y="50" fill="#474747" width="853" height="480"/>
</g>
</svg> </div> </body>
</html>
</body>
</html>

SVG iMac - Script Codes CSS Codes

html { height:100%;
}
body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed;
background-image: linear-gradient(#8b9da9, #fff6e4);
}
div { padding:4em 0 0 0; width:960px; margin:0 auto;
}
SVG iMac - Script Codes
SVG iMac - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 5,932 Kb
Views 52,624
Do you need developer help for SVG iMac?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Wright (chriswrightdesign) Script Codes
Name
Flexbox responsive navigation
Grid - two columns with gutters
Grid - Row with minmax
SVG Reflection
CSS Responsive animated Accordion
Inertia CSS
SVG animate hamburger to cross
Form adaptation
SVG Noise blended radial
Offscreen zoom nav
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!