Skip to content

Instantly share code, notes, and snippets.

@Alanaktion
Created September 16, 2015 22:32
Show Gist options
  • Save Alanaktion/4c23863ff389add26b74 to your computer and use it in GitHub Desktop.
Save Alanaktion/4c23863ff389add26b74 to your computer and use it in GitHub Desktop.
A not-quite-accurate minimal SVG Google logo
Display the source blob
Display the rendered blob
Raw
<svg width="420" height="160" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
path, circle {
fill: none;
stroke-width: 12;
}
</style>
<path d="M0,118 L600,118" stroke="#777" style="stroke-width: 2; stroke-dasharray: 2,2;" />
<!-- G --><path d="M70,70 h50 A50,50 0 1,1 107.426406871193,29.644660940673" stroke="#4285F4" />
<!-- o --><circle cx="160" cy="88" r="25" stroke="#EA4335" />
<!-- o --><circle cx="225" cy="88" r="25" stroke="#FBBC05" />
<!-- g --><circle cx="290" cy="88" r="25" stroke="#4285F4" /><path d="M315,60 v60 A25,25 0 0,1 272.32233047034,137.67766952966" stroke="#4285F4" />
<!-- l --><path d="M335,20 v98" stroke="#34A853" />
<!-- e --><path d="M401.65063509461,101.5 A25,25 0 1,1 403.09698831278,79.432914190873 L356.90301,98.567086" stroke="#EA4335" data-center="380,89" />
</svg>
@Alanaktion
Copy link
Author

Coordinates for arc endpoints can be calculated with this:

<?php
$theta = - pi() / 4;

$px = 405; $py = 89;
$ox = 380; $oy = 89;

$x2 = cos($theta) * ($px - $ox) - sin($theta) * ($py - $oy) + $ox;
$y2 = sin($theta) * ($px - $ox) + cos($theta) * ($py - $oy) + $oy;

var_dump([$x2, $y2]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment